Building Your First React Website
Tags: webdev, javascript, react, tutorial
Published: 2019-07-17 14:03:35

---
title: Building Your First React Website
published: true
description: Build your first React website using Create React App
tags: webdev, javascript, react, tutorial
cover_image: https://thepracticaldev.s3.amazonaws.com/i/pxaicsmec2pheg0jczyx.png
---

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](https://insights.stackoverflow.com/survey/2019#technology-_-web-frameworks).

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](https://c.next.tech/2EUAVlp) 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:

```bash
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:

```bash
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.

![Create React App Website](https://thepracticaldev.s3.amazonaws.com/i/pxaicsmec2pheg0jczyx.png)

## 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:

```jsx
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

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

with

```jsx
<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:

```jsx
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:

```jsx
import logo from './logo.svg';
```

The final `App.js` file should look like this:

```jsx
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:

![Image of finished website](https://thepracticaldev.s3.amazonaws.com/i/wutfnkubpj9q1hoqnl1x.png)

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](https://c.next.tech/2EUAVlp) 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](https://unsplash.com/@mvdheuvel?utm_medium=referral&utm_campaign=photographer-credit&utm_content=creditBadge) for taking the photo of the Golden Gate Bridge used in this post!