Andrew Sverdrup for Next Tech

Posted on Jul 17, 2019 • Edited on Jul 18, 2019

Building Your First React Website

#webdev #javascript #react #tutorial

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!

Top comments (10)

Dave Ceddia • Jul 19 '19

The installed create-react-app command more or less doesn't need to be updated. Not that it hasn't ever changed, but that leaving it on an older version won't prevent you from creating up-to-date React apps.

At the time you run it, it'll create a React app using the latest version of the react and react-dom packages (so you're running latest React) and the latest version of react-scripts (the "brains" of a CRA app which handles the start/build/eject commands).

Piyanutrk • Jul 17 '19

How to deploy Bro!

Andrew Sverdrup • Jul 17 '19

Working on a deployment to GitHub Pages walk through right now! Will post the link here when it's ready.

Andrew Sverdrup • Jul 18 '19

Thanks for the info! I just updated the post to use npx instead of a global install. I'm going to leave it described as a framework though because I think of it as a lightweight framework and it is often compared to frameworks such as Angular. I stumbled across this post that is an interesting discussion of this dev.to/renannobile/why-is-react-a-....

Dave Ceddia • Jul 19 '19

CRA is good for bigger projects too, definitely well-suited to more than just toy/learning apps. If you're only gonna use a tool once or twice though, yeah, npx is awesome.

On the other hand... here's a quick test of running npx create-react-app a few times (not actually creating an app, literally just printing the help text):

$ npx create-react-app
npx: installed 91 in 5.464s

$ npx create-react-app
npx: installed 91 in 4.985s

$ npx create-react-app
npx: installed 91 in 5.091s

I'm personally happy to pay the price of a bit of disk space and an extra file in my bin folder to save 5 seconds every time I run a tool 🤷‍♂️

Gonna go re-install that now 😄

Brighton Dube • May 20 '20 • Edited

Hi Dave, I use Windows 10, WSL, and VS Code for development. I have one problem with using npx, I have seen a few other people raise that issue on Github and SO but there seems to be no answers. When I run $npx create-react-app I always get this warning :

You are using npm 3.10.10 so the project will be bootstrapped with an old unsupported version of >tools.

Please update to npm 5 or higher for a better, fully supported experience.

But...
$npm --version
6.13.4

Clearly I have a higher version of npm installed than what CRA is telling me!
The only solution I ever found was to install CRA globally or to use yarn.
However, I don't understand what is causing this, I have an open issue on the react repo and no answers, I looked at similar issues, there were no solutions to this particular problem!

After the installation is done I get :

Note: the project was bootstrapped with an old unsupported version of tools.
Please update to Node >=8.10 and npm >=5 to get supported tools in new projects.

Chad Collins • Nov 26 '19

Hey @nextdottech thank you! This post showed right up on google search. Today a member of our ReactJSLive group*s asked for just a basic example. So I live created using your post as an example. So appreciative. You can the post here! => dev.to/ratherbsurfing/how-to-make-...