React: A basic introduction – Noteworthy
React: A basic introduction
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
Building the base project
Before we begin, make sure you have Node.js and NPXinstalled. If you don’t already have either installed, download a recent version of Node
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
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 ourname
variable inside thestate
for the component because we eventually expect to update the value ofname
in response to user input, andstate
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 therender
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 thehandleNameChange
function needs to havethis
refer to theApp
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 unlessthis
refers toApp
we will get an error or unexpected behavior when it’s called insideinput
.
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.