React JS Quick Start Guide

The article will give you a brief overview of how interfaces are built with React JS.
You can write code in parallel using the starter kit , or just keep reading.

Concepts

React has a small API, it is easy to learn use. First, however, let's take a look at a few concepts.

Elements are JavaScript objects that represent HTML elements. They do not exist in the browser. they describe DOM elements like h1, div, or section.

Components are React elements written by the developer. Usually these are parts of the user interface that contain their structure and functionality. For example, such as NavBar, LikeButton, or ImageUploader.
')
JSX is a technique for creating React elements and components. For example, this is a React element written in JSX:

<h1>Hello</h1> 

The same element can be written in JavaScript:

 React.DOM.h1(null, 'Hello'); 

Since JSX requires much less effort, it transforms into JavaScript before running in a browser.

Virtual DOM is a tree of React elements in JavaScript. React renders the Virtual DOM in the browser to make the interface visible. React monitors changes in Virtual DOM and automatically changes the DOM in the browser so that it matches the virtual one.

With an understanding of these concepts, we can continue to use React. We will write a series of user interfaces, each of which will add a layer of functionality to the previous one. As an example, we will write a photo tape like Instagram.

Rendering

First of all, the virtual element (element, or React component) is rendered. Remember, while the virtual element is only in javascript memory. we must explicitly tell React to draw it in the browser.

 React.render(<img src='http:tinyurl.comlkevsb9' />, document.body); 

The render function takes two arguments: a virtual element and a real DOM node. React takes a virtual item and adds it to the specified node. Now the image can be seen in the browser.

Components

Components are the soul and heart of React. These are custom items. Usually, they have their own unique structure and functionality.

 var Photo = React.createClass({ render: function() { return <img src='http:tinyurl.comlkevsb9' /> } }); React.render(<Photo />, document.body); 

The createClass function accepts an object that implements the render function.
The Photo component is created and rendered in the body of the document.

This component does no more than the line in the previous example, but now it can be supplemented with functionality.

Properties

Properties can be understood as component options. They are provided as component arguments and look the same as HTML attributes.

 var Photo = React.createClass({ render: function() { return ( <div className='photo' /> <img src={this.props.src}> <span>{this.props.caption}</span> </div> ) } }); React.render(<Photo imageURL='http:tinyurl.comlkevsb9' caption='New York!' />, document.body); 

In the render function, the Photo component has 2 properties: imageURL and caption .

Inside the custom render function, the imageURL property is used as the src for the image. The caption property is used as the text of the span element.

It is worth noting that the properties of the component are immutable. If the component has mutable properties, use the state.

condition

A state is a special object inside a component. It stores data that may change over time.

 var Photo = React.createClass({ toggleLiked: function() { this.setState({ liked: !this.state.liked }); }, getInitialState: function() { return { liked: false } }, render: function() { var buttonClass = this.state.liked ? 'active' : ''; return ( <div className='photo'> <img src={this.props.src} /> <div className='bar'> <button onClick={this.toggleLiked} className={buttonClass} /> </button> <span>{this.props.caption}</span> </div> </div> ) } }); React.render(<Photo src='http:tinyurl.comlkevsb9' caption='New York!' />, document.body); 

The presence of the state of the object brings a little complexity.
The component has a new function getInitialState . React calls it after initializing the component. It sets the initial state (which implies the name of the function).

The component also has a toggleLiked function. Using the setState function, it switches the liked state.

Inside the render function, the variable buttonClass is assigned the value “active”, or an empty string, depending on the liked state.

buttonClass is used as the element's button class. The button also has an onClick event handler that calls the toggleLiked function.

Here is what happens after the component is drawn:

- After pressing the button, toggleLiked is called .
- Like state changes
- React redraws a component in Virtual DOM
- New Virtual DOM is compared with the previous one.
- React isolates changes and updates them in the browser DOM

In this case, React will change the class name of the button.

Composition

Composition means the combination of smaller components during the formation of a larger one. For example, the Photo component can be used inside the PhotoGallery component. Something like this:

 var Photo = React.createClass({ toggleLiked: function() { this.setState({ liked: !this.state.liked }); }, getInitialState: function() { return { liked: false } }, render: function() { var buttonClass = this.state.liked ? 'active' : ''; return ( <div className='photo'> <img src={this.props.src} /> <div className='bar'> <button onClick={this.toggleLiked} className={buttonClass}> </button> <span>{this.props.caption}</span> </div> </div> ) } }); var PhotoGallery = React.createClass({ getDataFromServer: function() { return [{ url: 'http:tinyurl.comlkevsb9', caption: 'New York!' }, { url: 'http:tinyurl.commxkwh56', caption: 'Cows' }, { url: 'http:tinyurl.comnc7jv28', caption: 'Scooters' }]; }, render: function() { var data = this.getDataFromServer(); var photos = data.map(function(photo) { return <Photo src={photo.url} caption={photo.caption} /> }); return ( <div className='photo-gallery'> {photos} </div> ) } }); React.render(<PhotoGallery />, document.body); 

The Photo component is exactly the same as it was.

There is a new component PhotoGallery , which generates components of the Photo . The example uses fake server data, which returns an array of 3 objects with a url and a header.

The loop creates 3 Photo components, which are then substituted into the return value of the render function.

Conclusion

This is quite enough to start building user interfaces using React. A more detailed description is in the documentation and it is highly recommended reading.
The manual also did not have details on setting up the local environment. You can learn this from the documentation, or use my boilerplate .

Original article: The React Quick Start Guide