How To Upload React Project To Server
How to Embed a React Awarding in Whatever Website
Employ create-react-app and then embed it into an existing project
Let'southward say you have a static website — exist that on WordPress, Wix, Squarespace, or HTML from a server — and you desire to add some dazzling functionality to information technology.
"If only I could employ React!" yous say to yourself, merely time and budget constraints prevent a full overhaul of your website.
The good news is that you are not alone, and the great news is that this guide volition show you how to create and embed a React widget within your website! We just have to learn to think about React a footling differently…
"React tin be used in whatever web application. It tin be embedded in other applications and, with a niggling intendance, other applications can be embedded in React." — React'south official documentation
Getting Started
This guide assumes some working cognition of React and general web development. If y'all have never spun upwardly a React application before, there is a great tutorial on the React website!
Nosotros will too be using yarn and low-cal-server.
Let's first, as many developers do today, by running:
yarn create react-app example-widget This boilerplate holds a functional React awarding where you lot tin develop whatever y'all like. For the sake of this case, I created a simple component that uses the excellent react-alive library.
This component renders a web IDE where you tin can write code and instantly see the outcome — something that would be painfully hard to achieve on a WordPress site yet just takes 28 lines of code in React.
The 4-Stride Process — Without Ejecting!
- Nosotros want our application to mount onto a unique
<div></div>that we have control over. Allow'south change the application's target div to something unique:
2. We need to update the application's homepage to serve the build from wherever your website lives. This is done by adding "homepage": "." to the package.json file:
Note: Things piece of work differently if you have front-terminate routing on your awarding. See these docs for more than information.
3. Now nosotros need to build the application and extract the Webpack bundle to be used as static assets on our other website.
First, run yarn build to produce a minified build.
Second, create a binder to hold the 3 files your application needs to run. I named mine dist. You volition demand these 3 files:
- The file holding roughly a minified version of the libraries yous are using.
./build/static/js/2.<someUniqueNumbers>.clamper.js - The file belongings a minified version of your lawmaking.
./build/static/js/primary.<someUniqueNumbers>.chunk.js - The file holding the code to launch your awarding.
./build/static/js/runtime-primary.<someUniqueNumbers>.js When y'all accept the files, your dist directory should wait similar this:
4. Lastly, we tin can call our new static avails as JS files and point our React widget to mount a <div></div> on our website!
Here is my example HTML page that has two React applications mounted equally React widgets:
Note that the order of these files does matter!
Now, if I serve the HTML page using lite-server…
Ta-da! An extremely interactive website featuring two React applications amid other static content!
Determination
I hope this tutorial reveals the power of React as a flexible JavaScript library. If yous are interested in why all of this works, I would encourage you to check out these docs.
You can browse my example repository on GitHub!
Have whatever other tips for using React among external libraries/content? Drop a reply and let me know!
Stay condom and salubrious, and every bit always, happy coding.
Source: https://betterprogramming.pub/how-to-embed-a-react-application-on-any-website-1bee1d15617f
Posted by: tellistharand.blogspot.com
0 Response to "How To Upload React Project To Server"
Post a Comment