The exact approach depends on your existing page setup, so let’s walk through some details. Render your React components where you want to see them on the page.Set up a JavaScript environment that lets you use the JSX syntax, split your code into modules with the import / export syntax, and use packages (for example, React) from the npm package registry.That’s a common way to integrate React-in fact, it’s how most React usage looked at Meta for many years! Let’s say you have an existing page built with another technology (either a server one like Rails, or a client one like Backbone), and you want to render interactive React components somewhere on that page. Using React for a part of your existing page In that case, serve the HTML/CSS/JS export ( next export output for Next.js, default for Gatsby) at /some-app/ instead. However, you can use the same approach even if you can’t or don’t want to run JavaScript on the server. ![]() ![]() Many React-based frameworks are full-stack and let your React app take advantage of the server. This ensures the React part of your app can benefit from the best practices baked into those frameworks. ![]() Configure your server or a proxy so that all requests under /some-app/ are handled by your React app.Specify /some-app as the base path in your framework’s configuration (here’s how: Next.js, Gatsby).Build the React part of your app using one of the React-based frameworks.Let’s say you have an existing web app at built with another server technology (like Rails), and you want to implement all routes starting with /some-app/ fully with React. ![]() Using React for an entire subroute of your existing website Although you can try React online or with a simple HTML page, realistically most JavaScript tooling you’ll want to use for development requires Node.js. You need to install Node.js for local development.
0 Comments
Leave a Reply. |