Getting Started with React.js

React.js is a flexible and component-based JavaScript library for building interactive user interfaces. It was created and open-sourced by Facebook and is used by many heading tech companies such as Dropbox, AirBnB, PayPal, and Netflix. React allows developers to create data-heavy apps that can be painlessly updated by re-rendering usually a compulsory components.

React is a View covering from a MVC program pattern pattern, and it especially focuses on DOM manipulation. As these days everybody talks about React, in this post we are holding a demeanour during how we can get started with it.

React Home PageReact Home Page

Install React

You can implement React possibly with a npm package manager or by adding a compulsory libraries manually to your HTML page. It’s endorsed using React with Babel that allows we to use a ECMAScript6 syntax and JSX in your React code.

If we wish to install React manually, a central docs suggest to use this HTML file. You can download a page by clicking a File Save Page As... menu in your browser. The scripts you’ll need (React, React DOM, Babel) will also get downloaded into a react-example_files/ folder. Then, supplement a following book tags to a head territory of your HTML document:

 book src="react-example_files/react.js"/script
 book src="react-example_files/react-dom.js"/script
 book src="react-example_files/babel.js"/script

Instead of downloading them, we can supplement a React scripts from CDN as well.

script src="https://unpkg.com/react@15/dist/react.js"/script
script src="https://unpkg.com/react-dom@15/dist/react-dom.js"/script

You can also use a minified versions of a above JavaScript files:

script src="https://unpkg.com/react@15/dist/react.min.js"/script
script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"/script

If you’d rather install React with npm, a best approach is to use a Create React App Github repo combined by Facebook Incubator — this is also a resolution that a React docs recommend. Apart from React, it also contains Webpack, Babel, Autoprefixer, ESLint, and other developer tools. To get started, use a following CLI commands:

npm implement -g create-react-app
create-react-app my-app
cd my-app
npm start

When you’re ready, we can access your new React app on a localhost:3000 URL:

NPM starter appNPM starter app

If we wish to review some-more on how to implement React, check out a installation guideline of a docs.

React and JSX

Although it’s not compulsory, we can use a JSX syntax in your React apps. JSX stands for JavaScript XML, and it transpiles into unchanging JavaScript. The large advantage of JSX is that it lets we embody HTML in your JavaScript files, therefore it creates defining React elements easier.

Here are a many critical things to know about JSX:

  1. Tags that start with lowercase (lower camel case) are rendered as unchanging HTML elements.
  2. Tags that start with uppercase (upper camel case) are rendered as React components.
  3. Any formula written within curly braces {…} are interpreted as verbatim JavaScript.

If we wish to know some-more about how to use JSX with React check out this page from a docs, and for a default JSX documentation we can take a demeanour during a JSX wiki.

Create React elements

React has a component-based architecture in that developers emanate reusable components in sequence to solve opposite problems. A React member is built adult of some or many React elements that are the smallest units of React apps.

Below, we can see a elementary instance of a React element that adds a Click me symbol to an HTML page. In a HTML, we supplement a div enclosure with a "myDiv" ID that will be populated with a React element. We emanate a React member within a script tag, right before a finale /body tag. Note that if we wish to use a JSX syntax, we need to supplement a type="text/babel" charge in sequence to make Babel perform a compiling.

body
 div id="myDiv"/div

 book type="text/babel"
   ReactDOM.render(
     buttonClick me/button,
     document.getElementById('myDiv')
   );
 /script
/body

We describe a React member with a ReactDOM.render() method that takes dual compulsory parameters, a React element (buttonClick me/button) and its container (document.getElementById('myDiv')). You can review some-more on how React elements work in a “Rendering Elements” section of a docs.

Create components

React components are reusable, eccentric UI units in that we can simply refurbish a data. A member can be done of one or many React elements. Props are arbitrary inputs we can use to pass information to a component. A React member works identical to JavaScript functions—every time it’s invoked, it generates some kind of output.

You can use possibly a classic duty syntax or a new ES6 category syntax to define a React component. In this article, I’ll use a latter, as Babel allows us to use ECMAScript 6. If we are meddlesome in how to emanate a member but ES6, take a demeanour during a Components and Props page of a docs.

Below, we can see a simple React component we are going to emanate as an example. It’s a simple presentation that a user sees after logging into a site. There are 3 pieces of information that will change from box to case: a name of a user, a series of messages, and a series of notifications, we will pass these as props.

React member exampleReact member example

Each React member is a JavaScript category that extends a React.Component bottom class. Our member will be called Stats as it provides a user with a simple statistic. First, we create a Stats class with a class Stats extends React.Component{…} syntax, afterwards we render it to a screen by job a ReactDOM.render() process (we’ve already used a latter in a prior section).

class Stats extends React.Component {
  render() {
    return(
       p className="summary"
         Hi {this.props.name}, we have {this.props.notifications}
         new notifications and {this.props.messages} new messages.
       /p
    );
  }
}

ReactDOM.render(
  Stats name="John Doe" notifications={5} messages={2} /,
  document.getElementById("myStats")
);

The initial evidence of a ReactDOM.render() process consists of the name of a React component (Stats /), and its props (name, notifications, and messages) with their values. When we announce a values of a props, strings are to be enclosed in selection marks (like "John Doe") and numeric values within curly brackets (like {3}).

Note that since of JavaScript, we used className instead of class in sequence to pass a category charge to an HTML tab (className="summary").

The relating HTML page is a following:

html
 head
  meta charset="utf-8"
  book src="vendors/react.js"/script
  book src="vendors/react-dom.js"/script
  book src="vendors/babel.js"/script
 /head
 body
   div id="myStats"/div
   book type="text/babel" src="component.js"/script
 /body
/html

In a React docs, there are many other cold examples on how to build conduct React components, and what else to know about props.

Further reading

With React, Facebook introduced a new kind of framework into front-end growth that challenges a MV* pattern pattern. If we wish to know improved how it works and what we can and can't grasp with it, here are some engaging articles that can help:

Add Comment