Foreword

To begin, I will introduce myself, my name is Edward , I am Full Stack Web Developer. The main directions of Laravel & React.js, Vue.js. I study GoLang and Swift.

Although there are already many other sources of information, the books remain one of the most common, but there is a lot of water in them and I decided not to invent another crutch, but just take notes.

To structure the data information will be presented in the form of a series of articles divided into chapters .

I write these notes for myself and decided to share them with the world. So don't be harsh. And so, let's go!

Chapter 1. Welcome to React

React is a popular library used to create user interfaces . It was created in Facebook to solve a number of problems associated with large-scale sites.

React as a library

It is worth noting that the library is not large in size and is used for only one part of the entire work. The main decisions about which ecosystem tools to use are made by developers. React is only “V” in the MVC world .

New ECMAScript syntax

React uses ECMAScript new features . If you are not familiar with the latest specification, then viewing the React code may cause self-doubt.

Popularity javascript function

JavaScript script is not a functional language, but functional methods can be used in its code. React emphasizes the prioritization of functional programming over object-oriented . This shift in thinking can lead to significant benefits in areas such as testing and productivity.

Before you start working with React, I recommend that you familiarize yourself with the basics of the functional programming paradigm.

Tedious javascript

To work with React you need to master the basics of Webpack . Webpack will allow testing the code, breaking it into modules, compressing it for production, etc.

Future React Library

The next version of the library will include Fiber, a new implementation of the basic React algorithm, the aim of which is to increase the speed at which an image is displayed on the screen . Many changes are related to target devices. Do not forget that React is still used in React Native.

Work with files

React Developer Tools

There are several tools that can be installed as extensions or additional modules of the browser and are of particular interest to us:

react-detector - Chrome browser extension, allows you to find out which sites are using React .

show-me-the-react is another React detection tool .

React Developer Tools is an add- on that extends the functionality of the browser toolkit . He creates a new tab in the developer’s tools where he can view React elements in detail .

React Developer Tools is a great tool that saves a lot of time when debugging. If you want to write professionally using React, this module will be very useful for you.

Installing Node.js

Node.js - JavaScript-language without a browser (server-side JS). This is the runtime used to create JavaScript applications on the client and server side . It can be installed on Windows, MacOS, Linux and other platforms.

Installation details can be found on the official Node.js website .

To use React, Node is not needed. But when working with React to install the dependencies will need to use the package manager called NPM. It is installed automatically with Node.

To check whether Node is installed in the terminal type node -v. You should see a version of your Node.

$ node -v
v.10.13.0

NPM alternative

An additional alternative to NPM is Yarn . This tool was released by Facebook in collaboration with Exponent, Google & Tilde. It helps to more reliably manage application dependencies . When working with Yarn, you can see that it is faster than NPM.

Install Yarn is very easy. After installing Node, enter:

$ npm install -g yarn

Installation details can be found on the official Yarn website .

And after that, everything will be ready to install packages. When installing dependencies from packege.json, npm installyou can run the command instead yarn.

Adding a package with Yarn:

$ yarn add [имя_пакета]

Removing a package with Yarn:

$ yarn remove [имя_пакета]