Pagepro Blog

Jump in React #1 – Introduction

Introduction

Norbert Kamienski

Norbert Kamienski


LATEST POSTS

Jump in React #2 – React application structure 21st September, 2017

Stack of books for developers 31st January, 2017

JavaScript

Jump in React #1 – Introduction

Posted on .

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. 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 first app

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

or

$ 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

Basically, in this process, webpack collects all javascript files, translates them to the lowest version (ECMAScript 5) and turns them into single, minified version that the browser and interpret 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.

Application structure

Let’s look at the structure of the application that we created earlier by create-react-app command.

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

That’s 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.

Norbert Kamienski

Norbert Kamienski

There are no comments.
View Comments (0) ...
Navigation