Use as little or as lots React as you need.
React has been designed from the begin for gradual adoption, and you could use as little or as a whole lot React as you want. Perhaps you best want to feature some “sprinkles of interactivity” to an current web page. React additives are a great way to do this.
The majority of web sites aren’t, and don’t want to be, unmarried-web page apps. With a few strains of code and no build tooling, attempt React in a small a part of your internet site. You can then either progressively expand its presence, or keep it contained to a few dynamic widgets.
- Add React in One Minute
- Optional: Try React with JSX (no bundler important!)
In this section, we can display the way to add a React element to an existing HTML web page. You can follow along with your own internet site, or create an empty HTML report to exercise.
There may be no complex tools or installation necessities — to complete this segment, you most effective want a web connection, and a minute of some time.
Optional: Download the total instance (2KB zipped)
First, open the HTML page you want to edit. Add an empty <div> tag to mark the spot where you want to show some thing with React. For example:
You can place a “field” <div> like this anywhere inside the <body> tag. You might also have as many independent DOM containers on one web page as you need. They are normally empty — React will replace any existing content material inner DOM containers.
Next, add three <script> tags to the HTML page proper earlier than the last </frame> tag:
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script><script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script><script src="like_button.js"></script>
The first two tags load React. The 0.33 one will load your element code.
Create a file known as like_button.js next in your HTML web page.
Open this starter code and paste it into the record you created.
This code defines a React aspect called LikeButton. Don’t fear in case you don’t recognize it but — we’ll cowl the building blocks of React later in our palms-on educational and principal principles manual. For now, allow’s just get it showing at the screen!
After the starter code, add two lines to the bottom of like_button.js:
const domContainer = file.querySelector('#like_button_container');ReactDOM.render(e(LikeButton), domContainer);
These two traces of code discover the <div> we introduced to our HTML within the first step, and then show our “Like” button React aspect internal of it.
There isn’t any step four. You have simply delivered the first React aspect for your internet site.
Check out the next sections for greater hints on integrating React.
View the overall instance supply code
Download the total instance (2KB zipped)
Commonly, you would possibly need to show React components in a couple of places at the HTML page. Here is an instance that shows the “Like” button three times and passes a few facts to it:
View the entire instance supply code
Download the full example (2KB zipped)
This strategy is more often than not useful whilst React-powered components of the page are remoted from each different. Inside React code, it’s less difficult to use component composition as an alternative.
If you already minify the application scripts, your web page may be production-geared up in case you ensure that the deployed HTML loads the versions of React finishing in production.min.js:
<script src="https://unpkg.com/react@17/umd/react.manufacturing.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
If you don’t have a minification step on your scripts, right here’s one way to set it up.
const e = React.createElement;go back e('button', onClick: () => this.setState( appreciated: true ) ,'Like'
However, React additionally offers an option to use JSX as an alternative:
return (<button onClick=() => this.setState( favored: genuine )>Like</button>
These two code snippets are equivalent. While JSX is absolutely non-compulsory, many people find it beneficial for writing UI code — both with React and with different libraries.
You can play with JSX the use of this on line converter.
The quickest way to strive JSX on your project is to add this <script> tag to your page:
Now you may use JSX in any <script> tag by way of including kind=”text/babel” attribute to it. Here is an instance HTML document with JSX that you could download and play with.
This technique is exceptional for learning and growing easy demos. However, it makes your internet site gradual and isn’t appropriate for production. When you’re prepared to transport ahead, take away this new <script> tag and the sort=”textual content/babel” attributes you’ve introduced. Instead, in the subsequent phase you may set up a JSX preprocessor to convert all your <script> tags automatically.
Adding JSX to a task doesn’t require complicated tools like a bundler or a development server. Essentially, including JSX is lots like including a CSS preprocessor. The best requirement is to have Node.js mounted on your laptop.
Go to your venture folder in the terminal, and paste those two commands:
We’re the use of npm right here best to install the JSX preprocessor; you won’t need it for some thing else. Both React and the software code can stay as <script> tags with no changes.
Congratulations! You just delivered a manufacturing-equipped JSX setup for your task.
Create a folder known as src and run this terminal command:
npx babel --watch src --out-dir . --presets react-app/prod
npx is not a typo — it’s a bundle runner tool that incorporates npm five.2+.
If you notice an errors message pronouncing “You have mistakenly established the babel package”, you may have missed the previous step. Perform it in the identical folder, and then attempt again.
Don’t look forward to it to complete — this command begins an automated watcher for JSX.
If you notice which you’re getting snug with construct gear and need them to do more for you, the next phase describes some of the most popular and approachable toolchains. If not — the ones script tags will do just excellent!