Getting Started with React

17th May 2017

React is a a JavaScript library developed by Facebook for building user interfaces. Getting started with React on your local environment requires the following scripts included within your document.

<script src="https://unpkg.com/react@latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

The building blocks used to create the UI are split into components that are rendered using React’s render() function.

The advantages of this approach include ensuring readability and makes maintainability easier. Code is therefore much easier to debug.

React, like other frameworks you come across, provides a simple Hello World example of its basic usage.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@latest/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('root')
      );

    </script>
  </body>
</html>

Here ReactDOM.render() is rendering a React element into a root DOM node.

Getting Started with React

JSX

You may notice that within the render() method above, the parameter is neither a string (no quotes around the value) or raw HTML.

This syntax is known as JSX, which is an XML syntax extension provided to JavaScript. It is advised to use this syntax as it makes the React code easier to read.

You can also embed expressions in JSX by wrapping values within a pair of curly braces.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@latest/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

      const name = 'John Doe';

      const greeting = (
          <h1>
             Hello, {name}!
          </h1>
      );

      ReactDOM.render(
          greeting,
          document.getElementById('root')
      );

    </script>
  </body>
</html>

Components

Components let you split the user interface into reusable pieces of code. These are the fundamental building blocks of the React framework.

React components can be defined using the JavaScript ES6 class syntax.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}. I'm a {this.props.role}.</h1>;
  }
}

props are input arguments that a component can accept. The name and role props are user-defined that originate from attributes defined in JSX.

const element = <Welcome name="John" role="Developer" />;

This can be shown by creating the following document.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@latest/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

      class Welcome extends React.Component {
          render() {
            return <h1>Hello, {this.props.name}. I'm a {this.props.role}.</h1>;
          }
      }
      
      const element = <Welcome name="John" role="Developer" />;

      ReactDOM.render(
          element,
          document.getElementById('root')
      );

    </script>
  </body>
</html>

Components and other features helps keep React code lightweight and allows it to efficiently update the UI. Getting Started with React doesn’t require extensive reading of documentation, so you’ll be able to learn quickly and write efficient code.