A beginner's guide to developing with React

7 great open source tools to power your marketing stack

Image by:

Opensource.com

React is a JavaScript user interface (UI) library that was built and is maintained by Facebook. React helps JavaScript developers think logically and functionally about how they want to build a UI.

With React, you can build:

Single-page applications
Applications that are easy to understand
Scalable applications
Cross-platform applications

React allows developers to build applications declaratively and offers a unidirectional flow of data.

React's advantages

The following features explain why React is one of the most popular web frameworks.

It is declarative: React makes it extremely painless to build interactive user interfaces, design basic views for your application based on various states, and update and render new views when the data in your application changes.
It is component-based: React gives you the ability to build encapsulated components that can manage their own state, then puts them together to build complex UIs. The logic of these components is written in JavaScript instead of templates, so you easily pass actual data and keep state out of the document object model (DOM).
You can learn once, write anywhere: React gives you the ability to build for both mobile (React Native) and the web. There's no need to rewrite your existing codebase; you can just integrate React with your existing code.
The virtual DOM: React introduced a wrapper around the regular DOM called the virtual DOM (VDOM). This allows React to render elements and update its state faster than the regular DOM.
Performance: React has great performance benefits due to the VDOM and one-way flow of data.

The virtual DOM

React's VDOM is like a virtual copy of the original DOM. It offers one-way data binding, which makes manipulating and updating the VDOM quicker than updating the original DOM. The VDOM can handle multiple operations in milliseconds without affecting the general page performance.

This VDOM supports React's declarative API: You basically tell React what state you want the UI to be in, and it ensures that the DOM matches that state.

Prerequisites for learning React

Learning React requires basic knowledge of JavaScript, HTML, and CSS. To use React's power effectively, it helps to be familiar with ECMAScript 6 (ES6) and functional and object-oriented programming.

You also need the following things installed on your computer:

NodeJS
npm (comes bundled with NodeJS)
Yarn (an alternative to NPM)

Basic React concepts

It also helps to have an understanding of React's concepts.

Components

Components are standalone, reusable pieces of code. They have the same purpose as JavaScript functions but work alone and return HTML via a built-in render function. They are two main types of components:

Class components offer more control in the form of lifecycle hooks, managing and handling state, and API calls. For example:
```
class MyComponent extends React.Component {
  render() {
    return <div>This is a class component</div>;
  }
}
```
Functional components were used for rendering just views without any form of state management or data request until React Hooks was introduced. For example:
```
Function myComponent() {
  return (
      <div>A functional Component</div>
  )
 }
```

Props

React props are like function arguments in JavaScript and attributes in HTML. They are read-only. For example:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

State

React components have a built-in object called state, which is where you store property values that belong to a particular component. If a component's state changes at any point in time, the component re-renders. For example:

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = { brand: 'Ford' };
  }
  render() {
    return (
      <div>
        <h1>My Car</h1>
      </div>
    );
  }
}

JSX

JSX is a syntax extension to JavaScript. It is similar to a template language but has the full power of JavaScript. JSX is compiled to React.createElement() calls, which return plain JavaScript objects called React elements. For example:

return (
  <div>
    <h1>My Car</h1>
  </div>
);

The code between the return method that looks like HTML is JSX.

How to use React

Ready to get started? I'll go step-by-step through two options for using React in your app:

Adding its content delivery network (CDN) to your HTML file
Starting a blank React app with Create React App

Add its CDN to your HTML file

You can quickly use React in your HTML page by adding its CDN directly to your HTML file using the following steps:

Step 1: In the HTML page you want to add React to, add an empty <div> tag to create a container where you want to render something with React. For example:

<!-- ... old HTML ... -->

<div id="button_container"></div>

<!-- ... old HTML ... -->

Step 2: Add three <script> tags to the HTML page just before the closing </body> tag. For example:

<!-- ... Some other HTML ... -->
  <!-- Initiate React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->

 <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
 <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

  <!-- Load our React component. -->

 <script src="https://opensource.com/button.js"></script>

</body>

The first two script tags load React, and the last one loads your React component code.

Step 3: Create a file called button.js in the same folder as your HTML page to hold the code for your React component. Paste the following code inside your button.js file:

'use strict';
const e = React.createElement;
class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = { clicked: false };
  }
  render() {
    if (this.state.clicked) {
      return 'You clicked this button.';
    }
    return e(
      'button',
      { onClick: () => this.setState({ clicked: true }) },
      'Click Me'
    );
  }
}

This code creates a button component that returns a message when the button is clicked.

Step 4: To use this component in your HTML page, add the code snippet below at the end of your button.js file:

const domContainer = document.querySelector('#button_container');
ReactDOM.render(e(Button), domContainer);

The code snippet above targets the <div> you added to your HTML in the first step and render your React button component inside it.

Start a blank React app with Create React App

If you want to start with a blank React app, use Create React App. This is the recommended way to quickly create single-page React applications, as it provides a modern build setup without any configuration.

To generate a new React app using Create React App, enter one of the following commands in your terminal. This will create a new React app called my-app:

npx (this is the recommended way to use create-react-app):
```
npx create-react-app my-app
```

npm:

npm i -g create-react-app && npm create-react-app my-app

Yarn:

yarn add create-react-app && yarn create-react-app my-app

To run your newly created app, navigate into the app folder (by typing cd my-app into your terminal) and enter one of the following commands:

npm:
```
npm start
```
Yarn:
```
yarn start
```

These will run the app you just created in development mode. You can open http://localhost:3000 to view it in the browser.

When you navigate to http://localhost:3000, you should see a page like the one below. Any change you make in the React code will automatically render here.

I hope this guide to getting started with React has been helpful. There are many more things to discover in the world of JavaScript, so please explore on your own and share what you learn.

This article originally appeared on Shedrack Akintayo's blog and is republished with his permission.