Introducing React - Dayan Perez

React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies.

React can be used as a base in the development of single-page or mobile applications. However, React is only concerned with rendering data to the DOM, and so creating React applications usually requires the use of additional libraries for state management and routing. Redux and React Router are respective examples of such libraries.

Why React?

React allows developers to create large web applications that can change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple. It works only on user interfaces in application. This corresponds to view in the MVC template. It can be used with a combination of other JavaScript libraries or frameworks, such as Angular JS in MVC.

React Features

JSX

React uses a syntax extension of JavaScript called JSX, which allows you to mix HTML with JavaScript. This is not a requirement; you can still write in plain JavaScript but JSX makes the code more readable. The syntax is intended to be used by preprocessors (i.e., transpilers like Babel) to transform HTML-like text found in JavaScript files into standard JavaScript objects that a JavaScript engine will parse.

Components

React is all about components. You need to think of everything as a component. This will help you maintain the code when working on larger scale projects.

Hooks

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

Unidirectional data flow and Flux

React implements one-way data flow which makes it easy to reason about your app. Flux is a pattern that helps keeping your data unidirectional.

Conditional rendering

You can render different components depending on the state of your application. This is done using if statements and conditional operators.

License

React is licensed under the Apache License 2.0.

React Installation

You can include React from a CDN like so:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      class Hello extends React.Component {
        render() {
          return <h1>Hello World!</h1>
        }
      }

      ReactDOM.render(<Hello />, document.getElementById('root'))
    </script>
  </body>
</html>

You can also use npm to install React:

npm install react

Or using yarn:

yarn add react

React Example

Here is a small example of React component that displays "Hello World!" using Class Component.

import React from 'react'
import ReactDOM from 'react-dom'

class Hello extends React.Component {
  render() {
    return <h1>Hello World!</h1>
  }
}

ReactDOM.render(<Hello />, document.getElementById('root'))

Also you can use a functional component to achieve the same result:

import React from 'react'
import ReactDOM from 'react-dom'

function Hello() {
  return <h1>Hello World!</h1>
}

ReactDOM.render(<Hello />, document.getElementById('root'))

Both examples will render the same result.

Conclusion

React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications. However, React is only concerned with rendering data to the DOM, and so creating React applications usually requires the use of additional libraries for state management and routing. Redux and React Router are respective examples of such libraries.

In the next article, we will learn about React components.