[React] Overview & Setup

React is a JavaScript library that is created by Facebook in 2011 in order to create a component in web applications(React DOM). It has expanded to other systems, such as mobile apps (React Native) or virtual reality (React VR).

Features

Working with React means you are creating a web application through components. Each page does not contain everything in a single file anymore. Many components are combined together. This approach might be confusing to you at first. But in the end, you will create a new page with existing components, which work consistently across many pages.

Before React, two-way binding was very popular (ex. Angular), which magically syncs the data state and UI. React adopts the one-way binding, which requires the explicit change-handler to set the new state. However, this additional overhead has some benefits too. Two-way binding seems good, but it makes really hard to debug when things do not work correctly. Also, one-way binding makes you control how the state flows.

React is JavaScript-centric. Rather than inventing new conventions, it integrates HTML and JavaScript in a natural way.

In the following example, the submit is just a JavaScript function.

<button onClick={submit}>submit</button>

Why React?

React is a very lightweight and non-opinionated library that is very flexible. There are many React renders that can be used in many echo systems (react-dom, react-native, etc…).

Unlike Angular or Ember, which has a unique extension to HTML (such as ‘ngFor’), React just uses JavaScript. This simplicity of React is a good thing. There is a lower learning curve for developers.

There are other reasons why we might want to use React; for example, its community support and popularity. But the most important factor is its performance to update the DOM. React minimizes DOM changes with virtual DOM.

Related Libraries

React is usually used with other libraries. The choice can be overwhelming, but there are popular options.

• Type Enforcement: PropTypes, TypeScript
• State Management: Redux, Flux

All but Goodies?

React is simple and straightforward, so it is easy to learn. But don’t be fooled. Note that React is a library specifically designed to create components rather than a full framework (like Angular). React needs other libraries to create the whole solution. You need Redux for data, React-Router for Routing, etc.

In my experience, React is a great tool to create reusable components but interacting with Redux is not as simple as you might guess. There require quite a lot of plumbing code you need to tackle. However, with careful design and coding, you can create consistent component web applications with React and Redux, which work like magic.

Setup React Development Environment

It is quite complex to set up the React development environment. The “create-react-app” package is the best bet to start the React App for a simple project.

This post shows how to modify the default “create-react-app” setups.

Create an Application with the “create-react-app” package

• Use the npx (npm package runner).

> npx create-react-app my-app
> cd my-app
> npm start

Open http://localhost:3000/, and if you can see the starting page, you are ok to go.

Add Bootstrap

There are many ways to use Bootstrap, and I like to install all low-level packages and use the bootstrap classes directly. – Version 5 –

> npm install @popperjs/core
> npm install bootstrap
> npm install bootstrap-icons

In the “/src/index.js” file, add the Bootstrap dependencies, and you are ready to use Bootstrap.

import 'bootstrap/dist/css/bootstrap.css';

import 'popper.js/dist/esm/popper.js';
import 'bootstrap/dist/js/bootstrap.js';

Semantic UI

In the “/public/index.html”, add the “semantic-ui” css link. Check the reference Semantic UI (semantic-ui.com)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />    

Setup Home Page

The “App” component will be used as a layout component as a single-page application. So let’s create the simple “Home” component. Create the “/src/components/Home/Home.js” file.

import React from 'react';

const Home = (props) => {
  return (
    <div>
      <h2>My App</h2>
    </div>
  );
};

export default Home;

Delete the “/src/logo.svg” file and delete all content in the “/src/App.css,” which you can put some styles later. Modify the “App.js” like this.

import React, { Component } from 'react';
import Home from './components/Home/Home';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Home />
      </div>
    );
  }
}

export default App;

Setup some More Components

Create two more simple components.

• “/components/About/About.js”
• “/components/Errors/PageNotFound.js”

import React from 'react';

const About = (props) => {
  return (
    <div>
      <h2>My App Page</h2>
    </div>
  );
};

export default About;

import React from 'react';

const PageNotFound = (props) => {
  return (
    <div className="alert alert-warning">
      <h3>Page Not Found</h3>
      <p>404</p>
    </div>
  );
};

export default PageNotFound;

Setup Routing and Menus

It is time to set up the Routing with the “react-router-dom” package.

> npm install react-router-dom

Create the MenuBar component:

• “/src/components/Menu/MenuBar.js”

import React from 'react';
import {Link, NavLink} from 'react-router-dom';

const MenuBar = (props) => {
    return (
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
          <Link className="navbar-brand" to="#">MyReactApp</Link>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <NavLink className="nav-link" activeClassName="active" aria-current="page" to="/" exact>Home</NavLink>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  Links
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <li><NavLink className="dropdown-item" activeClassName="active" to="/" exact>Action 1</NavLink></li>
                  <li><hr class="dropdown-divider" /></li>
                  <li><NavLink className="dropdown-item" activeClassName="active" to="/bogus">Not Found</NavLink></li>
                </ul>
              </li>
              <li class="nav-item">
                <NavLink className="nav-link" activeClassName="active" to="/about">About</NavLink>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    );
  };
  
  export default MenuBar;

Finally, add the routing information into the “App” component.

import React, { Component } from 'react';
import { Route, Switch, BrowserRouter } from 'react-router-dom';

import Home from './components/Home/Home';
import About from './components/About/About';
import MenuBar from './components/Menu/MenuBar';
import PageNotFound from './components/Errors/PageNotFound';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <BrowserRouter>
        <div className="container">
          <header className="App-header">
            <MenuBar />
          </header>
          <div className="mainArea">
            <Switch>
              <Route path="/" component={Home} exact />
              <Route path="/about" component={About} />
              <Route component={PageNotFound} />
            </Switch>
          </div>
        </div>
        </BrowserRouter>
      </div>
    );
  }
}

export default App;