Develop Single Page Application with React

Hi, guys. This article will explain develop single page application with React. React is most dynamic framework on front-end. Actually the most popular framework vue.js in Japan.
I think to React better than vue.js, because React can develop mobile application too. If you start learning JavaScript framework, you should learn React.

What is React?

To the beginning, I’ll explain about React. The React was developed by Facebook which is front-end framework.
「A JavaScript library for building user interfaces」 wrote by the official site. The React can mainly view development.
It is component-based development which can 「Rugged」 「Scalable」 「Easy to Maintain」. So React suited large scale development project.

Install React

This article uses create-react-app, so please execute this command.
create-react-app suited single-page-application which is very popular toolchain.

$ npm install g create-react-app

use g option, it means a global install.

And create a new project.

$ create-react-app app

Check your site.

$ cd app
$ npm start

If you check your site, install router package to routing.

$ npm i react-router-dom

We finally can prepare SPA project with React then, we will write code.

Develop site

$ vim public/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
   <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
 </body>
</html>

It is base page, then edit index.js that only contents in the root of div are replaced.

$ vim src/index.js
import React from "react";
import ReactDOM from "react-dom";
import Main from "./Main";

ReactDOM.render(
  <Main/>, 
  document.getElementById("root")
);

Then, prepare component in src folder.
Home.js, About.js and Contact.js

import React, { Component } from "react";

class Home extends Component {
  render() {
    return (
      <div>
        <h2>HELLO</h2>
        <p>Hello World!! This page is top page.</p>
     </div>
    );
  }
}

export default Home;
import React, { Component } from "react";

class About extends Component {
  render() {
    return (
      <div>
        <h2>About</h2>
        <p>My hobby is using Arch Linux and sleeping.</p>
      </div>
    );
  }
}

export default About;
import React, { Component } from "react";

class Contact extends Component {
  render() {
    return (
      <div>
        <h2>Contact</h2>
        <p>Please feel free to contact me</p>
        <p>info@example.com</p>
      </div>
    );
  }
}

export default Contact;

Finaly, we create Main.js which file is main router component.
Please, use React-DOM-Router.

$ vim src/Main.js
import React, { Component } from "react";
import {
  Route,
  NavLink,
  BrowserRouter
} from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";

class Main extends Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <h1>Single Page Application</h1>
          <ul className="header">
            <li><NavLink to="/">Home</NavLink></li>
            <li><NavLink to="/about">About</NavLink></li>
            <li><NavLink to="/contact">Contact</NavLink></li>
          </ul>
          <div className="content">
            <Route exact path="/" component={Home}/>
            <Route path="/about" component={About}/>
            <Route path="/contact" component={Contact}/>
          </div>
        </div>
      </BrowserRouter>
    );
  }
}
export default Main;

Import Route,NavLink,BrowserRouter Next, Change link and content path.

Please, check your site.

$ npm start

関連記事