Building Your First React Website

React is one of the most popular web frameworks out there. It has been growing steadily in popularity for years, passing Angular for the first time in the 2019 Stack Overflow developer survey.

This post will show you how to create your own React website in just a few minutes. If you're interested in learning more after completing this tutorial, checkout the Beginning React course I just created on Next Tech to further improve your React skills.

For now, let's dive right into building a website with React!

Prerequisites

To complete these steps you'll need to have the Node Package Manager (npm) installed. If you don't have it installed yet, head on over to https://www.npmjs.com/get-npm to download and install npm.

This will also install npx which we'll use to run create-react-app.

Create React App

Create React App is an excellent way to quickly get a React website up and running. Create React App was created by Facebook (the same company that created React!). In their docs, they describe it as:

Create React App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.

Knowing that Create React App is supported by the creators of React is a huge plus. Let's use it to get started with our website!

Run the following command to create your site:

npx create-react-app hello-react

Note that it may take a couple minutes for this command to complete.

Viewing the React website

Next, run the following commands to start the React development server:

cd hello-react
npm start

At this point a browser tab should open showing your React site. If it doesn't, visit http://localhost:3000 in your favorite browser to see your React site!

Updating the site

Now, let's make a change to update the site. Open the hello-react/src/App.js file, then replace the following line:

Edit <code>src/App.js</code> and save to reload.

with

My first React website!

If you open the web page again you'll see that it updated without you having to refresh the page! Live reloading is one of the awesome features that Create React App configures for you.

Creating a React Component

Next, we'll create a new React component. First, create a folder in the src folder named components. Then create a file called HomepageImage.js in the src/components folder. This file will hold our new homepage image component.

We'll create this component by adding the following code to the HomepageImage.js file:

import React from 'react';

function HomepageImage() {
  const url = 'https://cdn.filestackcontent.com/XYrHCaFGRSaq0EPKY1S6';
  return (
    <img src={url} style={{width: 650}} alt='Image of Golden Gate Bridge' />
  );
}

export default HomepageImage;

Then, in App.js, replace

<img src={logo} className="App-logo" alt="logo" />

with

<HomepageImage />

We also need to import the component at the top of App.js by adding the following code to the top of the file:

import HomepageImage from './components/HomepageImage'

Since we removed the image of the React logo, you can then remove this import for the logo as well:

import logo from './logo.svg';

The final App.js file should look like this:

import React from 'react';
import './App.css';
import HomepageImage from './components/HomepageImage'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <HomepageImage />
        <p>
          My first React website!
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Now, open http://localhost:3000 again in your browser. If everything is working, you should see the following page:

Congratulations on creating your first website using React 🎉!

Next steps

This tutorial was a quick introduction to creating web pages with React. If you want to gain a better understanding of React so you can build awesome sites using it, checkout the course I just released that teaches React!

Have you built a site with React? Feel free to share your URL or a link to your project on GitHub in the comments below to show it off!

Thanks for reading,

Andrew, Software Engineer @ Next Tech

Special thanks to Maarten van den Heuvel for taking the photo of the Golden Gate Bridge used in this post!