Modern React From The Beginning: Creating Your First React App

React is one of the most popular JavaScript front-end frameworks for building web applications in 2020. It is developed by Facebook and a community of individual developers and companies. React is constantly evolving and new features are added constantly.

Starting with React from scratch might be a challenge at first. There are many features and concepts which needs to be covered when starting to learn React. This might be overwhelming at first and it’s hard for new developers to get started in the right way.

This tutorial series is for you if you want to get started with modern React from scratch. By doing so we’ll cover latest concepts like React Hooks, functional components, and many more. No prior knowledge of React is required. However you should already have a basic understanding of web development with HTML, CSS and JavaScript to get going.

Let’s get started and have much fun learning React!

Episodes

Episode 1: Creating Your First React App
Episode 2: Starting With React Components & JSX
Episode 3: Working With Lists
Episode 4: Multiple Components
Episode 5: Introducing Arrow Functions And Object Destructuring

Introduction

Let’s get started and have much fun learning React!

System Setup

Before really starting with React we first need to make sure that the basic system setup is available.

The first prerequisite which needs to be installed on the development system is Node.js and NPM (Node.js Package Manager). NPM comes bundled with Node.js, so you only need to make sure that you have Node.js installed.

You can quickly check if an up-to-date version of Node.js is already installed on your system by executing the following command:

$ node --version

If not you can go to the Node.js website at https://nodejs.org/ and download the installer which is needed for your specific operating system.

In addition you should install a code editor for React development. My recommendation here is to use Visual Studio Code which can be downloaded for free at https://code.visualstudio.com. Visual Studio Code is an all-in-one solution which providers you with a code editor, an extensible plugin system and an integrated terminal. Especially for beginners it’s

Creating A First React Project From Scratch

One of the easiest ways of setting of a new React project is to use the create-react-app script. To execute this script we’re able to simply use the npx command which makes it possible to execute the script without prior downloading the package in a separate step:

$ npx create-react-app my-react-app

As a command line parameter we need to pass over the name of the new project folder, e.g. my-react-app. After having run the command you should see something similar to:

Now we’re ready to enter the newly created project folder by typing in:

$ cd my-react-app

And from within the project folder start Visual Studio Code via:

$ code .

Exploring The Initial Project Structure

Now that we’ve opened the new project folder in Visual Studio Code we’re ready to start exploring the initial project structure:

node_modules/: Folder which contains all project dependencies, e.g. packages that have been downloaded and installed by using the Node.js Package Manager (NPM).
public/: Folder contains static assets of the web application like index.html.
src/: This is the folder where you can find the JavaScript implementation of your React application. E.g. by default you can find the App component implementation in App.js. The corresponding initial unit test case implementations can be found in App.test.js and index.js contains the code which is the starting point of your React application.

Taking A Look Into Package.json

Now that you have a first overview of the project structure we need to take a look into the package.json file to get an overview of defined scripts. Scripts can be executed via npm, e.g. to start the development web server, build for production, etc.

The scripts section of the initial package.json file looks like the following:

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Let’s explore how to make use of those scripts next.

Running The Development Web Server

Running the development web server is done by executing the start script via:

$ npm run start

$ npm start

This should give you the following output:

Here you can see that the development web server has been started on port 3000. The browser is opened automatically and URL http://localhost:3000 is opened automatically, so that you now should be able to see the following output:

Running Tests

By default the initial React project comes with some basic unit test cases defined in src/App.test.js. Executing those tests can be done via:

$ npm run test

The output should then look like the following:

Build The Application For Production

You can also build the application for production. This means that the the React application is build and the result is made available in the build folder of the project. Running the production build is done by using the following command:

$ npm run build

Once the build has been finished successfully you’ll be informed via the following output:

You can then deploy the content of the build folder to any web server.

What’s next

In the next episode we’re going to continue our React journey by taking a look at the main application component App Component, learn more about React components in general and get familiar with JSX code. Hope you’ll be on board again 🙂

#reactjs #javascript #web-development