React Development Tutorial #1 – Introduction

This is the first part of the tutorial for people who want to start their adventure with React by Pagepro, an expert React Development Company.
The requirements to set up a first react application are nodejs/npm and terminal.

Let’s do this!

After the installation of the requirements, you’ll be ready to create your first application.

There are many boilerplates and libraries to get started with React development. Building a boilerplate by yourself is very hard and programmers spend a lot of time on it, so sometimes it’s easier to contact an experienced React js agency. Facebook created a special command to build the app in an easy way. The create-react-app command provides a canonical manner for initiating a new React app for programmers who want to have benefited from a more complex setup but don’t want to deal with the configuration.

Installing Create-React-App and creating the first app

In this React tutorial, the first step is to install create-react-app globally via node/npm or yarn. Please run this command in the terminal:

$ npm install -g create-react-app

or

$ yarn global add create-react-app

When the installation is over and the terminal doesn’t show us any errors, we can make our first React application. Go to the folder with your projects and type this in the terminal:

$ create-react-app shopping_app

Yeah, you just created your first react app and it’s called shopping_app. The application will be expanded through the next tutorials. We are going to make a tool for preparing a shopping list.

Console output of some commands that we can use:

$ npm start

This will start a simple development web server and will allow us to work on our new application. Server is running at http://localhost:3000/ and is showing us the starter template:

$ npm build

Basically, in this process, webpack collects all javascript files, translates them to the lowest version (ECMAScript 5) and turns them into a single, minified version that the browser and interpreter understand. It shrinks the file down as much as possible to reduce the download time. In short, it’s a file that contains all of the javascript code and is running on production.

$ npm test

It’s a command to run tests in our app. It’s a good habit to write tests for our app. It helps us to manage the application and easily change the app mechanism. When we will make a mistake, tests will tell us what’s wrong. Programmers have to spend more time on writing tests but in return they’re saving time on fixing the bugs in the future.

$ npm run eject

This command pulls the application out of the create-react-app context, turns on the standard webpack build and reveals the webpack config file. This allows you to tweak the basic create-react-app framework, add/remove dependencies, and perform more advanced manipulations of your app if needed.

React JS Application structure

Readme.md file is a very helpful guide for the app. This file contains a set of properties, extensions and commands. There is an example favicon, gitignore and package.json files, too. Our app is in the src folder but we will focus more on it in next part of the tutorial.

Conclusion

In this React tutorial, you have learned the beginning of creating our react app. Facebook developers invented create-react-app to make creating an application easier than ever. Programmers don’t have to deal with the configuration and can write applications immediately. This command sets up the application with testing environment, options to bundle the app in one file and to eject basic configuration so that a programmer have more control over what’s going on in the app.