` tag to mark the spot where you want to display something with React. For example: ```html{3}

``` We gave this `

` a unique `id` HTML attribute. This will allow us to find it from the JavaScript code later and display a React component inside of it. >Tip > >You can place a "container" `

` like this **anywhere** inside the `` 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 {#step-2-add-the-script-tags} Next, add three ` ``` The first two tags load React. The third one will load your component code. ### Step 3: Create a React Component {#step-3-create-a-react-component} Create a file called `like_button.js` next to your HTML page. Open **[this starter code](https://gist.github.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** and paste it into the file you created. >Tip > >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](/tutorial/tutorial.html) and [main concepts guide](/docs/hello-world.html). For now, let's just get it showing on the screen! After **[the starter code](https://gist.github.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**, add three lines to the bottom of `like_button.js`: ```js{3,4,5} // ... the starter code you pasted ... const domContainer = document.querySelector('#like_button_container'); const root = ReactDOM.createRoot(domContainer); root.render(e(LikeButton)); ``` These three lines of code find the `

` we added to our HTML in the first step, create a React app with it, and then display our "Like" button React component inside of it. ### That's It! {#thats-it} There is no step four. **You have just added the first React component to your website.** Check out the next sections for more tips on integrating React. **[View the full example source code](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)** **[Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/87f0b6f34238595b44308acfb86df6ea43669c08.zip)** ### Tip: Reuse a Component {#tip-reuse-a-component} Commonly, you might want to display React components in multiple places on the HTML page. Here is an example that displays the "Like" button three times and passes some data to it: [View the full example source code](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda) [Download the full example (2KB zipped)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/279839cb9891bd41802ebebc5365e9dec08eeb9f.zip) >Note > >This strategy is mostly useful while React-powered parts of the page are isolated from each other. Inside React code, it's easier to use [component composition](/docs/components-and-props.html#composing-components) instead. ### Tip: Minify JavaScript for Production {#tip-minify-javascript-for-production} Before deploying your website to production, be mindful that unminified JavaScript can significantly slow down the page for your users. If you already minify the application scripts, **your site will be production-ready** if you ensure that the deployed HTML loads the versions of React ending in `production.min.js`: ```js ``` If you don't have a minification step for your scripts, [here's one way to set it up](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3). ## Optional: Try React with JSX {#optional-try-react-with-jsx} In the examples above, we only relied on features that are natively supported by browsers. This is why we used a JavaScript function call to tell React what to display: ```js const e = React.createElement; // Display a "Like" ); ``` These two code snippets are equivalent. While **JSX is [completely optional](/docs/react-without-jsx.html)**, many people find it helpful for writing UI code -- both with React and with other libraries. You can play with JSX using [this online converter](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.15.7). ### Quickly Try JSX {#quickly-try-jsx} The quickest way to try JSX in your project is to add this ` ``` Now you can use JSX in any `