Seleccionar página

React Tutorial: Introduction to React js

There is a big Javascript framework battle taking place on the front end world. In this post we’ll speak about one of the winners: React. We’ll explain what is React and do an introduction to the library and its main features. If you want to learn React, the library that is on every developer’s lips, I’m sure you will enjoy reading this React tutorial for beginners.

What is React?

React is a front end Javascript library developed by Facebook engineers. It is used for building user interfaces based on reusable components. Here are some of the most important features that have made React JS so popular:

  • Great performance: React it’s really fast, specially due to the use of Virtual DOM (we’ll cover later on this React tutorial).
  • Modularity: React beliefs in building apps made of reusable components.
  • Can render in both client and server (Node) side.
  • Big community: some of the most important apps like Facebook or Instagram use React.
  • Open source license.

“React is a declarative, efficient, and flexible JavaScript library for building user interfaces.”-Facebook React Team

What is the Virtual DOM?

The main reason why React is so fast is that it uses a fake DOM called Virtual DOM. When the data is updated, instead of manipulating the DOM directly or rebuilding elements completely, React selectively renders the elements of the Virtual DOM that have been updated. Then it runs a «diffing» algorithm and only updates in the real DOM what has been changed.

What is JSX?

JSX is the Javascript XML syntax used by React that allows us to write components in HTML tag syntax.

</p>
<p>const element = &amp;amp;lt;h1&amp;amp;gt;Hello, world!&amp;amp;lt;/h1&amp;amp;gt;;</p>
<p>

As you can see in the code above, JSX makes it easy to write HTML/XML-like structures together with your Javascript code. Maybe it sounds strange, but mixing your HTML (JSX) code with Javascript code has same advantages like:

  • Easy to read and write: it uses a familiar syntax for developers.
  • Possibility to embed expressions in JSX.
  • Using JavaScript objects
  • There is no need to learn a templating language.

Even though the use of JSX is recommended, you can create DOM elements directly with React:

</p>
<p>//Node without JSX<br />var HTMLLi = React.createElement('li', {className:'bar'}, 'foo');</p>
<p>//Using JSX<br />var HTMLLi = &amp;amp;lt;li className=&amp;quot;bar&amp;quot;&amp;amp;gt;foo&amp;amp;lt;/li&amp;amp;gt;;</p>
<p>

 

React components

A user interface view is commonly divided into different pieces. Components are these reusable blocks (pieces) used by React for building user interfaces.

</p>
<p>//ES5<br />const Welcome = React.createClass({<br />render() {<br />return (<br />return &amp;amp;lt;h1&amp;amp;gt;Hello, Mike&amp;amp;lt;/h1&amp;amp;gt;;<br />);<br />}<br />});<br />//Same usin ES6 class<br />class Welcome extends React.Component {<br />render() {<br />return return &amp;amp;lt;h1&amp;amp;gt;Hello, Mike&amp;amp;lt;/h1&amp;amp;gt;<br />}<br />}</p>
<p>

React 0.14 introduced functional, stateless components

</p>
<p>//ES5 functional component<br />function Welcome(props) {<br />return return &amp;amp;lt;h1&amp;amp;gt;Hello, Tom&amp;amp;lt;/h1&amp;amp;gt;;<br />}<br />//ES6<br />const Welcome = () =&amp;amp;gt; &amp;amp;lt;h1&amp;amp;gt;Hello, Tom&amp;amp;lt;/h1&amp;amp;gt;</p>
<p>

React components can contain other React sub-components, building together a tree of components that represent the UI. This way we can build the UI as a tree of components.

Render a component

React provides ReactDOM.render method to render components.

<br />function Welcome() {<br />return &amp;amp;lt;h1&amp;amp;gt;Hello, Mike&amp;amp;lt;/h1&amp;amp;gt;;<br />}</p>
<p>const element = &amp;amp;lt;Welcome/&amp;amp;gt;;<br />ReactDOM.render(<br />element,<br />document.getElementById(container)<br />);</p>
<p>

In the example above, render function calls Welcome component which returns the element «Hello, Mike» and then updates the DOM.

React Component Properties

JSX attributes can be passed to a component. These properties are passed as a single object called «props» and we can access them using {props.myPropName} (if the React component has been created using React.Component class or React.createClass method, this keyword is needed: {this.props.name}).

See the Pen React example by Jon Vadillo (@jonvadillo) on CodePen.light

Find below another example written in ES5:

See the Pen React example by Jon Vadillo (@jonvadillo) on CodePen.light

React Component state

Dynamic applications that change over time (due to user actions, server requests, …) need to control their changing information and data. Components offer state object to store and manage this information.

On one side, like component props, state is a plain JS object that can have default values. On the other side, unlike props, the state is private and only controlled by the component (state is mutated internally by the component and props are inmutable to the component).

</p>
<p>class Student extends React.Component {<br />constructor(props) {<br />super(props);<br />this.state = {level: 4};<br />}</p>
<p>render() {<br />return (<br />&amp;amp;lt;div&amp;amp;gt;<br />&amp;amp;lt;h1&amp;amp;gt;Hello, world!&amp;amp;lt;/h1&amp;amp;gt;<br />&amp;amp;lt;h2&amp;amp;gt;It is student is on level {this.state.level}.&amp;amp;lt;/h2&amp;amp;gt;<br />&amp;amp;lt;/div&amp;amp;gt;<br />);<br />}<br />}</p>
<p>ReactDOM.render(<br />&amp;amp;lt;Student /&amp;amp;gt;,<br />document.getElementById('root')<br />);</p>
<p>

React components lifecycle

Components follow a specific lifecycle and React provide a set of methods to perform some actions when lifecycle events occur.

Mount and unmount events methods:

  • getInitialState
  • componentWillMount
  • componentDidMount
  • componentWillUnmount

Updating Phase During components life

  • componentWillReceiveProps(object nextProps)
  • shouldComponentUpdate(object nextProps, object nextState)
  • componentWillUpdate(object nextProps, object nextState)
  • componentDidUpdate(object prevProps, object prevState)

Stateless Function Components

This type of object don’t have any state object, they only have props object. What it makes them so special is that the can be defined as a function instead of using React component instances.

</p>
<p>var MyComponent = function(props){<br />return &amp;amp;lt;div&amp;amp;gt;{props.name}&amp;amp;lt;/div&amp;amp;gt;</p>
<p>};</p>
<p>ReactDOM.render(&amp;amp;lt;MyComponent name=&amp;quot;Tom&amp;quot; /&amp;amp;gt;, app);</p>
<p>

Handling Events in React

Handling events shouldn’t be difficult for those developers used to work with DOM events. Have a look to the differences between HTML and JSX syntax:

Syntax in HTML:

</p>
<p>&amp;amp;lt;button onclick=&amp;quot;activateSensor()&amp;quot;&amp;amp;gt;<br />Activate Sensor<br />&amp;amp;lt;/button&amp;amp;gt;</p>
<p>

Syntax in JSX:

</p>
<p>&amp;amp;lt;button onClick={activateSensor}&amp;amp;gt;<br />Activate Sensor<br />&amp;amp;lt;/button&amp;amp;gt;</p>
<p>

You can add onXXX to the nodes you want. Find below a complete example:

</p>
<p>var ButtonItem = React.createClass({<br />onButtonClick: function(evt) {<br />// your code<br />},</p>
<p>render: function() {<br />// Render the div with an onClick prop (value is a function)<br />return &amp;amp;lt;div onClick={this.onButtonClick}&amp;amp;gt;Clicked!&amp;amp;lt;/div&amp;amp;gt;;<br />}<br />});</p>
<p>

React Hello World

Before finishing the React tutorial, it’s a must to build our React Hello World app:

See the Pen React ES6 example Hello World by Jon Vadillo (@jonvadillo) on CodePen.0

Summary

In this React tutorial we have seen what is React and the basics to get started in React. I hope you liked the article and now have a starting point to learn React. As always, if you have any question, suggestion or just want to talk about the topic you can write a comment. I’ll be really happy to hear from you!

Sources