React Development Tutorial #1 – Introduction
This is the first part of tutorial for people who want to start their adventure with React.
The requirements to setup 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 boilerplate by yourself is very hard and programmers spend a lot of time on it. Facebook created a special command to build the app in easy way. The create-react-app command provides a canonical manner for initiating a new React app for programmers who want to have benefits from 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 terminal:
$ npm install -g create-react-app
$ yarn global add create-react-app
When installation is over and 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 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
$ 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.
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 application 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.