Set Up a React Environment, Part 1

React is a JavaScript library for building user interfaces (UI). It's maintained and developed by Facebook, and is one of the most popular tools for creating web apps today.

However, it's had a bit of a reputation for not being very user friendly to set up a React app, particularly for beginners. The problem stems from when React first became popular, and the standard method of creating a React app involved complex manual configuration of a whole host of setup files.

A lot of tutorials intended to help beginners get started with React introduced different approaches, and tools, to set up a working app. Even with subtle differences between suggested build methods, confusion was inevitable.

To be able to successfully set up a React app via manual configuration requires a good understanding of multiple different technologies.

This flexibility in setup is actually a great thing. You have complete freedom to choose the specific tools you want to build your React app, and configure them exactly as required.

Once comfortable with these tools, you'll have the confidence to use them to their full potential and create in-depth complex apps. Until then, there still remains an entry barrier to a lot of developers who haven't necessarily got experience with the command-line tools needed to create React apps.

To help alleviate this frustration, this tutorial series focuses on various methods for setting up React apps. We'll start with the most basic approach and then build up to more complex setups. Let's kick things off, though, by clarifying in more detail the types of React setup we'll be covering.

What We'll Be Covering

By the end of this tutorial series, you'll be able to set up React apps in four main ways:

• using an online code editor (CodePen)
• basic manual setup, without Node.js or npm
• using create-react-app
• full manual setup and configuration

The first method demonstrates how to use an online code editor such as CodePen to set up a React app very quickly. Using this method, you'll be coding your first app literally in seconds!

Then, we'll move on to setting up React in a local development environment, starting with directly adding scripts to an HTML file using no build tools whatsoever. The next two setup methods focus on how you'd set up a typical React app in your day-to-day development.

As you'll see, using the create-react-app tool makes it extremely easy to spin up React apps with just a single command! Finally, we cover how to set up a React app via the command line completely from scratch, the old-school way.

Each setup method has its place, and there's no single 'better' approach, just alternatives depending on your needs.

React is a fantastic library to build web apps with, and it's a lot of fun too! Let's take a look now at the tutorial prerequisites to make sure you're up to speed.

Prerequisites

The simplest method for setting up a React app requires nothing more than an internet connection. However, as we progress to more complex setups, we'll be moving towards setting up a React app completely from scratch. Therefore, some knowledge of the following topics is recommended.

Command Line

Windows, macOS, and Linux all provide access to command-line tools. These are used heavily in modern web development for completing complex tasks quickly and efficiently. If you don't have any experience working with the command line to perform operations such as managing files/folders, installing tools, running scripts, and so on, then it would be worth your time at least learning the basics.

Node.js and NPM

If you've been doing web development for any amount of time then chances are you've at least heard of Node.js and npm. Node.js was originally created to run JavaScript on the server but is also now widely used for developing web apps, simplifying and automating common tasks, all under a single environment.

There are literally hundreds of thousands of Node.js modules available, and npm was introduced as a dedicated package manager to help install, organize, and manage all the various modules in your web app. Since npm is bundled with Node.js, all you need to do is install the latest version of Node.js on your system to make it available via your command line.

JavaScript

A reasonable level of JavaScript is required to set up and develop React apps. Otherwise, you'll most certainly struggle at some point to create React apps of any depth or complexity. This includes some features of ES6 such as arrow functions, classes, and modules. I recommend brushing up on your JavaScript skills if necessary before attempting to develop a React app.

React

This tutorial series focuses on setting up React apps rather than developing them, and so we won't be delving too deeply into React specific topics such as components, props, and state. It's a good idea, though, to have some basic knowledge of what these are, so in the next section we'll be covering the basic features of React and exploring how all the parts fit together to form a working app.

Structure of a React App

Before we dive into our first setup method, let's take a quick tour of React itself.

At its core there are three fundamental features of React that most apps are comprised of. These are:

• components
• props
• state

These are the key features you need to master in order to write effective React apps. Once you've reached that stage, you'll be very well prepared to dive much deeper into React and develop more complex apps.

You might be pleasantly surprised to find that React components, props, and state are not that difficult to get your head around. My personal experience was that the React setup process was more difficult than learning React itself!

Components

The building blocks of any React app are components. Think of them as reusable blocks of code which encapsulate markup, behaviour, and styles. They can also be nested inside each other, which makes them highly reusable. For example, you might have a <Book /> component which represents data and UI associated with a single book. You could then also have a <BookIndex /> component which renders out multiple <Book /> components, and so on.

To make constructing components easier, JSX was created to give components an HTML-like structure. If you're familiar with HTML or XML then you'll be right at home using JSX to build components. It's worth noting that you are not required to use JSX at all in React, but it's now become the accepted standard way to define components.

Props

Props allow you to pass information between components. And in React, information can only be passed via props from parent components to child components.

If you choose to use JSX in your component definitions (and I highly recommend you do) then defining props on a component is remarkably similar to adding HTML attributes. This is one of the reasons JSX is so popular! Being able to use HTML-like syntax for React components and props makes it very easy to quickly scaffold out your app.

Let's take a closer look at our <BookIndex /> React component example and see how we can define it with multiple nested child <Book /> components. At the same time, we'll pass down information to each individual <Book /> component from <BookIndex />.

First, here's the <BookIndex /> component definition:

class BookIndex extends React.Component {
    render() {
        return (
            <div className="books">
                <h2>List of all books</h2>
                <Book title="Through the Looking-Glass" author="Lewis Carroll" published="1871" />
                <Book title="The Time Machine" author="H. G. Wells" published="1895" />
                <Book title="A Tale of Two Cities" author="Charles Dickens" published="1859" />
            </div>
        )
    }
}

Then, inside each <Book /> component, we can access passed-in props like this:

class Book extends React.Component {
    render() {
        return (
            <div className="book">
                <h2>{this.props.title}</h2>
                <p>Author: {this.props.author}</p>
                <p>Published: {this.props.published}</p>
            </div>
        )
    }
}

If the above syntax for creating React components looks strange, don't worry—it's pretty straightforward. An ES6 class extends the base component class, and then a (required) render method handles the output of the component.

State

State enables us to keep track of all the data in a React app. We need to be able to update the UI whenever something changes, and state handles this for us. Whenever state is changed, React is smart enough to know which parts of your app need updating. This makes React very fast as it will only update the parts that have changed.

State is typically applied to the top-level component in your React app, so that it's available to every child component to consume state data as necessary.

That's it for our whirlwind tour of React. It's by no means comprehensive, and there's a lot more you need to learn before you can create fully fledged complex apps, but understanding components, props, and state will give you a solid head-start.

Conclusion

In this tutorial, we laid the groundwork for learning how to set up a React environment. The rest of this tutorial series focuses on the specific methods needed to do this. We'll cover setup methods ranging from very simple to more complex methods requiring manual configuration.

In the next tutorial, we'll start by taking a look at using CodePen, an online code editor, to set up a React app in just a few mouse clicks. This is by far the simplest and quickest way to get coding in React!

by David Gwyer via Envato Tuts+ Code