React JS Quick Start Guide

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

Of the concept


React has a small API; it is easy to learn to use. However, first, 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 such as h1, div, or section.

Components are React elements written by a 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:

Hello


The same element can be written in JavaScript:

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

With JSX, much less effort is required; 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 the 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 in the likeness of Instagram.

Rendering


The first thing that happens is the rendering of the virtual element (element, or React component). Remember, while the virtual element is only contained in JavaScript memory. we must explicitly tell React to render it in the browser.

React.render(, document.body);


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

Components


The components are the soul and heart of React. These are custom elements. Usually, they have their own unique structure and functionality.

var Photo = React.createClass({
  render: function() {
    return 
  }
});
React.render(, document.body);


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

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

The properties


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

var Photo = React.createClass({
  render: function() {
    return (
      
{this.props.caption}
) } }); React.render(, document.body);


In the render function, the Photo component is passed 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 should be noted that the properties of the component are immutable. If the component has mutable properties, use 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 (
      
{this.props.caption}
) } }); React.render(, document.body);


The presence of a state in an object introduces little complexity.
The component has a new function getInitialState . React calls it after the component is initialized. It sets the initial state (which implies the name of the function).

The component also has the toggleLiked function . She, using the setState function , switches the liked state .

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

buttonClassUsed as the button class of the item. The button also has an onClick event handler that calls the toggleLiked function .

Here's what happens after the component

is rendered : - toggleLiked
is called after the button is pressed - the liked state changes
- React redraws the component in the Virtual DOM
- The new Virtual DOM is compared to the previous one
- React isolates the changes and updates them in the browser DOM

In this case, React will change the class name buttons.

Composition


Composition means combining smaller components to form a larger one. For example, the Photo component can be used inside the PhotoGallery component . In approximately this way:

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 (
      
{this.props.caption}
) } }); 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 }); return (
{photos}
) } }); React.render(, document.body);


The Photo component remained exactly the same as it was.

A new PhotoGallery component has appeared that generates Photo components . The example uses fake server data that returns an array of 3 objects with url and header.

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

Conclusion


This is enough to start building user interfaces using React. A more detailed description is in the documentation and it is highly recommended for reading.
The manual also lacked details on setting up a local environment. You can find out from the documentation, or use my boilerplate .

Original article: The React Quick Start Guide

Also popular now: