How to add React to a static website

Last updated - November 06, 2022Author Rabra Hierpa

In the blog, we are going to see how to add react (with webpack and babel) to a static website. So a few days ago, I was working on my person site and I was looking for a way to add react to my static portfolio website. I already had setup the site with a basic template – nothing fancy.

Adding React to a static website that is only using HTML, CSS, and JavaScript can greatly enhance the website’s functionality and interactivity. React is a popular JavaScript library for building user interfaces, and can be easily integrated into a static website. In this blog post, we’ll go over the steps required to add React to a static website, and provide some tips and best practices along the way.

Step 1: Set up a development environment To add React to a static website, you’ll need to set up a development environment on your local machine. This will involve installing a text editor, a terminal, and a local web server. There are many text editors to choose from, including VS Code, Atom, and Sublime Text. For this example, we’ll use VS Code.

Once you have a text editor installed, open it and create a new file called index.html. In this file, add the following HTML code:



<!DOCTYPE html>
<html>
  <head>
    <title>My Static Website</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

This is a basic HTML template for a static website. We’ve added a div element with an id of root, which will be used by React to render our components.

Step 2: Install React and ReactDOM The next step is to install React and ReactDOM, which are the two packages we’ll need to add React to our static website. Open up a terminal and navigate to the directory where your index.html file is located. Then, run the following command to install React and ReactDOM:



npm install react react-dom

This will install the latest versions of React and ReactDOM in your project.

Step 3: Create a React component Now that we have React installed, we can create a new React component. Create a new file called App.js in your project directory, and add the following code:



import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
}

export default App;

This is a simple React component that renders a div element with an h1 element inside.

Step 4: Render the component in the HTML file To render the App component in our index.html file, we’ll need to use the ReactDOM.render() method. Add the following code to the bottom of your index.html file:



<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="App.js"></script>
<script>
  ReactDOM.render(
    React.createElement(App),
    document.getElementById('root')
  );
</script>

This code includes the React and ReactDOM libraries, as well as our App.js component. The ReactDOM.render() method takes two arguments: the first is the component we want to render, and the second is the DOM element where we want to render it (in this case, the div with an id of root).

Step 5: Run the local web server To view your static website with React components, you’ll need to run a local web server. There are many options for this, including http-server and live-server. For this example, we’ll use http-server. Install it by running the following command:



npm install -g http-server

Then, navigate to your project directory in the terminal and run the following command:



http-server

Now you should be able to play around with React to add more interactivity to your site! Hope you enjoyed my blog 🙂