DEV Community

Cover image for Building Your First React Website
Andrew Sverdrup for Next Tech

Posted on • Edited on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

with

My first React website!
Enter fullscreen mode Exit fullscreen mode

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

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;
Enter fullscreen mode Exit fullscreen mode

Then, in App.js, replace

<img src={logo} className="App-logo" alt="logo" />
Enter fullscreen mode Exit fullscreen mode

with

<HomepageImage />
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

Image of finished website

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)

Collapse
 
dceddia profile image
Dave Ceddia

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).

Collapse
 
piyanutrk profile image
Piyanutrk

How to deploy Bro!

Collapse
 
andrewsverdrup profile image
Andrew Sverdrup

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

Collapse
 
andrewsverdrup profile image
Andrew Sverdrup

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

 
dceddia profile image
Dave Ceddia

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 😄

Thread Thread
 
brightondube profile image
Brighton Dube • 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.

Collapse
 
ratherbsurfing profile image
Chad Collins

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

Collapse
 
psilax profile image
Psilax

Nice start, to bad the next.tech website is running out of date course material that fail after the setup step.

Collapse
 
andrewsverdrup profile image
Andrew Sverdrup

Sorry that the course wasn't working 🙁. We fixed it so it's working again! (the fix was made back in December, this comment is just a bit delayed 🙂)

Collapse
 
mhasan profile image
Mahmudul Hasan

Hi, Do you vs Code ? If yes, Can you tell me the theme name ?