(a). Add React in One Minute
In this section, we will show how to add a React component to an existing HTML page. You can follow along with your own website, or create an empty HTML file to practice.
There will be no complicated tools or install requirements — to complete this section, you only need an internet connection, and a minute of your time.
Step 1: Add a DOM Container to the HTML
First, open the HTML page you want to edit. Add an empty
<div> tag to mark the spot where you want to display something with React. For example:
<!-- ... existing HTML ... --> <div id="like_button_container"></div> <!-- ... existing HTML ... -->
We gave this
<div> a unique
You can place a “container”
<div>like this anywhere inside the
<body>tag. You may have as many independent DOM containers on one page as you need. They are usually empty — React will replace any existing content inside DOM containers.
Step 2: Add the Script Tags
Next, add three
<script> tags to the HTML page right before the closing
<!-- ... other HTML ... --> <!-- Load React. --> <!-- Note: when deploying, replace "development.js" with "production.min.js". --> <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> <!-- Load our React component. --> <script src="like_button.js"></script> </body>
The first two tags load React. The third one will load your component code.
Step 3: Create a React Component
Create a file called
like_button.js next to your HTML page.
Open this starter code and paste it into the file you created.
This code defines a React component called
LikeButton. Don’t worry if you don’t understand it yet — we’ll cover the building blocks of React later in our hands-on tutorial and main concepts guide. For now, let’s just get it showing on the screen!
After the starter code, add two lines to the bottom of
// ... the starter code you pasted ... const domContainer = document.querySelector('#like_button_container'); ReactDOM.render(e(LikeButton), domContainer);
These two lines of code find the
(b) Create React App
npx create-react-app my-app cd my-app npm start
When you’re ready to deploy to production, running
npm run build will create an optimized build of your app in the