React: A basic introduction

Image by Brennan Burling

React has a lot of stuff going on, and it can be overwhelming when first trying it out. If you’re new to React, read on for a walkthrough of building a simple, interactive React app.

We’ll walk through how to build a basic app from scratch using only the tools provided by the create-react-app (CRA) command line interface. The app will consist of a simple text body greeting the user, with an input that lets the user enter their name to customize the greeting.

Building the base project

Before we begin, make sure you have Node.js and NPX installed. If you don’t already have either installed, download a recent version of Node from nodejs.org — this will install both NPX and Node itself.

Next, navigate in your terminal to where you’d like to build your project, then run the following commands (replace “my-app” with what you want to name your actual app — no spaces allowed!):

The commands above will build a fully-configured shell project and start it running locally. You can check if it’s working by navigating to localhost:3000 in your browser.

While it’s possible to set up a new React project manually (i.e. without using CRA), manually configuring a React project is pretty involved and provides relatively few benefits for most projects, so it’s not recommended (nor is it in the scope of this article).

Clearing the ground for our site

If you started up the new project via npm start above, you should see a simple ‘example’ site when you visit localhost:3000 in your browser. Before building our own site, we’ll want to wipe out all the content and styles in this example site so we can really understand how to put everything together.

If you use an IDE or similar tool for developing web projects, go ahead and open up the project folder you created in it. If you don’t use an IDE you can make code changes using a plain text editor, but I would highly recommend getting an IDE for coding. I use WebStorm and love it, but VS Code is another great (free!) option.

Once you’re in the project, open up the src/ directory. In here, delete logo.svg and App.css entirely, and then delete the import statements for those files as well as all the content inside the <div className="App"></div> tags in the App.js file.

At this point the site should be a blank white page in our browser, and App.js should look something like this:

Building our site

One of the first things you’ll notice in App.js is the HTML-like code inside the render method’s return statement. If you’re completely new to React, this is JSX, a sort of Javascript-as-HTML.

JSX is still Javascript, but formatted to look like HTML since it represents components in a React application. JSX is different from HTML in some key ways (you can already see this where we use className instead of class to define a component’s class), but it’s similar.

To demonstrate this similarity, let’s add a <h1> tag inside of our app, so we have something other than a blank page to look at — how about the traditional “hello world”?

Go ahead and add the following inside the <div> tags (between lines 6 and 7 in the image above):

<h1>Hello, world!</h1>

Now look at the app on localhost:3000 and we can see our new text! This shows how easy it is to add basic content to a React app.

Displaying a value on the page

So far we’ve only used JSX like we might use HTML — add a specific, unchanging element to a page. This isn’t very compelling, since we could do this even more easily by creating an HTML file without any of the React setup, so let’s do something we can’t easily do in HTML: render the value of a variable directly in our HTML.

If you’re following along, your App component should look like this:

<div className="App">
    <h1>Hello, world!</h1>
</div>

Let’s say we want to change “world” in “Hello, world” to another word. We could of course change the text inside our <h1> tag, but there is another way that provides more flexibility: replace “world” with a reference to a new variable “name” in the App class.

To do this, make a new line above the render method and type the following:

constructor() {
    super();
    this.state = {
        name: 'reader'
    }
}

Then change the <h1> tag to <h1>Hello, {this.state.name}!</h1> and you should see the site update to display the text “Hello, reader!”.

So what did this gain us? At the moment, not much — we could just as easily change the text in our JSX as change a variable in App state — but it shows how we can change a value in Javascript and have that value alter the page for our users. Since Javascript variables are easier to modify and access than DOM properties, this makes it easier to make our page dynamic.

A note on state: we put our name variable inside the state for the component because we eventually expect to update the value of name in response to user input, and state is the recommended place to put values we will want to modify. If we didn’t expect it to change we could define it however we felt as long as it was in scope for the render method.

Updating with user input

Now let’s try something more interesting: displaying a user’s input on the page! There are a few tricks to this, but once you do it a few times it’s pretty easy to do.

Let’s start by putting an input on the page, above the <h1>:

<input type={'text'} placeholder={'Your name here'} />

This probably looks really ugly right now, but we’ll make it look better soon. First, however, we want to tie the value of this input to our name variable so that the value of name appears in the input and the variable updates with whatever the user types in.

To make this work, let’s first set value in the input to this.state.name. Your input should look like this:

<input type={'text'} placeholder={'Your name here'} value={this.state.name} />

If you look at the site now, you’ll see that the input has the value of name from the App component (‘reader’ if you’re following along in code). However, if you try to type in the input you’ll find that nothing you do changes the value. This is because while we display the value of name in the input, we don’t give the input any way to change the underlying variable. To do this, let’s pass the input a function that will update name when the user changes the value in the input.

Here’s a function that will do the trick:

handleNameChange = (event) => {
    const value = event.target.value;
    this.setState({
        name: value
    });
};

Note that we use this.setState to change the value of name to the new value in the input. The setState method is present on all React components that extend the Component class (there are also functional components that are just functions that return JSX), and it updates state in the component in a DOM-friendly way so the component only changes visually when appropriate. It is very strongly not recommended to change anything on state directly, so only change state with setState unless you’re totally sure you know what you’re doing.

Now that we have this function, hooking it up is pretty easy: just pass it as the onChange prop to the input! After doing this, your input should look something like this (note we broke the input across a few lines to make it easier to read — it’s still just one element):

This approach means that handleNameChange is called with the input’s change event whenever the user changes the value in the input, which is exactly what we want.

One ‘gotcha’ here is that the handleNameChange function needs to have this refer to the App component (where it is defined) rather than to the input component (where it is called). We do this above by making it an ES6 arrow function, but there are other approaches. The point here is that unless this refers to App we will get an error or unexpected behavior when it’s called inside input.

Styling our app

Finally, let’s put some simple styles on our app. I’m going to keep it simple for the sake of demonstration, but feel free to go crazy here if you’re following along on your own.

Make a new file called App.css inside the src folder. This is a perfectly ordinary CSS file so it should be fairly familiar to work with, but here are the styles I used for reference:

Using these styles in our app is as simple as importing this CSS file. At the top of App.js add the line

import './App.css';

and you’re done! Your new styles should now be present on the page.

Summary

Hopefully you found this introduction to React useful. Now that you’re familiar with the basics you can start to create simple interactive apps, or start learning more involved techniques to further your skills!

If you ever want to reference the code for the final app built in this walkthrough, feel free to look at the code on the Github repo here: https://github.com/The-Naive-Bayesian/react-basic-intro.

This story is published in Noteworthy, where 10,000+ readers come every day to learn about the people & ideas shaping the products we love.

Follow our publication to see more product & design stories featured by the Journal team.