The book "React.js. Fast start"

Hi, Habrozhiteli! Earlier we published an irreplaceable introductory book on React technology for demanding JavaScript developers. The most interesting about superpopular tool from the company Facebook. The book covers the basic concepts of high-performance programming with React, real code examples and available flowcharts. After reading it, you will learn:

• Create and use your own React components along with generic DOM components.
• Write components for data tables, allowing you to edit, sort the table, search in it and export its contents.
• Use additional JSX syntax as an alternative to function calls.
• Run a low-level, flexible build process that will free you time and help you focus on working with React.
• Work with ESLint, Flow and Jest tools, allowing you to test and test code as you develop an application.
• Communicate between components using Flux.

What is this book about

The book is devoted to the study of React from the perspective of a web developer. In the first three chapters, the study begins with the use of an empty HTML file, on the basis of which the rest of the code is built. This allows you to focus on learning React, without being distracted by new syntax or by using additional tools.

Chapter 4 introduces JSX, a separate additional technology commonly used in conjunction with React.
')
Next, we turn to the study of the development of a real application and the development of additional tools that can assist in this matter. These include tools for creating JavaScript packages (Browserify), for block testing (Jest), for checking code (ESLint), checking type conformity (Flow), for organizing data flow in an application (Flux) and for using immutable data (Immutable. js) Consideration of additional technological tools is minimized so that the focus is on React, and familiarity with these tools will help you consciously choose them to solve your problems.

Excerpt from a book. Installing Required Tools

Before you download index.html and see it in work, you must do the following:

• create bundle.css file. This is a simple association that does not require the use of required tools;
• make the code understandable for browsers. You need Babel for transpilation;
• create bundle.js file. To do this, we use a tool such as Browserify.

The Browserify tool is needed not only for combining scripts, but also for:
• enable and enable all dependencies. You simply give it the path name of the app.js file, and then it calculates all the dependencies (React, Logo.js, etc.);
• enabling the CommonJS implementation so that the require () calls work. Babel turns all import statements into require () functions.

In general, you need to install Babel and Browserify. They are installed using npm (Node Package Manager - Node Package Manager), a tool that comes with the Node.js software platform.

Node.js

To install Node.js, go to http://nodejs.org and get the installer appropriate for your operating system. Follow the instructions of the installer (they will help to cope with the task). Now you can use the services provided by the npm utility.

To check, enter the following command in your terminal:

$ npm --version 

If you do not have experience with the terminal (command line), now is the time to get it! If you have Mac OS X, click on the Spotlight search (the magnifying glass icon in the upper right corner) and type Terminal. If you have Windows, locate the Start menu (right-click on the window icon in the lower left corner of the screen), select Run and type in powershell.

Browserify

The Browserify tool is installed using npm by typing the following command in your terminal:

 $ npm install --global browserify 

To test the functionality of the tool, type the following command:

 $ browserify --version 

Babel

To install the Babel CLI, type the following command:

 $ npm install --global babel-cli 

To check the performance type the following command:

 $ babel --version 

Got an idea?

React and others

It remains to use a few more packages (and everything will be ready):

• react, of course;
• react-dom (distributed separately);
• babel-preset-react (provides Babel support for JSX and other useful options related to React);
• babel-preset-es2015 (provides you with the support of the latest JavaScript features).

To install these packages locally, first go to your application directory (for example, using the cd ~ / reactbook / reactbook-boiler command):

 $ npm install --save-dev react $ npm install --save-dev react-dom $ npm install --save-dev babel-preset-react $ npm install --save-dev babel-preset-es2015 

It should be noted that your application now has a node_modules directory with local packages and their dependencies. The two global modules (Babel, Browserify) are located in the node_modules directory, located somewhere else defined by your operating system (for example, / usr / local / lib / node_modules or C: \ Users {your_name} \ AppData \ Roaming \ npm \).

Let's build

The build process performs three actions: combining CSS, JS transpiling, and creating a JS package. This is no more difficult than running three commands.

Javascript transpilation

We first translate the JavaScript code using Babel:

 $ babel --presets react,es2015 js/source -d js/build 

This command means that you need to take all the files from the js / source directory, transfer them using the capabilities of React and ES2015, and copy the result into js / build. The command will display the following information:

 js/source/app.js -> js/build/app.js js/source/components/Logo.js -> js/build/components/Logo.js 

Creating a JavaScript Package

Now it’s time to create a package:

 $ browserify js/build/app.js -o bundle.js 

The Browserify tool is instructed to start with the app.js file, consider all the dependencies, and write the result to the bundle.js file, which completes the inclusion instruction in your index.html file. To verify that the file was actually recorded, type the command less bundle.js.

Create CSS Package

Creating a CSS package is done (at this stage) so simply that you don’t even need to use any special tools; you just need to merge all the CSS files into one (using the cat command). But since the file is moved to another location, the links to the images will lose their performance, so rewrite them by calling the sed command:

 cat css/*/* css/*.css | sed 's/..\/..\/images/images/g' > bundle.css 

about the author

Stoyan Stefanov (Stoyan Stefanov) works as an engineer in the company of Facebook. Previously at Yahoo! He was the creator of the online smush.it image optimization tool, as well as a tool for identifying YSlow 2.0 performance problems. Stoyan is the author of JavaScript Patterns books (O'Reilly, 2010) and Object-Oriented JavaScript (Packt Publishing, 2008), co-author of Even Faster Web Sites and High-Performance JavaScript publications, blogger and frequent speaker at many conferences, including Velocity, JSConf and Fronteers.

»More information about the book can be found on the publisher's website.
» Table of Contents
» Excerpt

For Habrozhiteley a 25% discount on the coupon - React