Tree

Top 100 Documentaries App with Create React App and Material-UI.

Overview

<p align='center'> <img src='https://github.com/ValleyZw/tree/blob/master/static/Tree.jpeg' width='600' alt='App Overview'> </p>

Project structure

tree
  ├── .gitignore               git ignore configuration
  ├── jsconfig.json            baseUrl configuration
  ├── README.md                Documentation
  ├── package.json             npm configuration
  ├── public/                  public resources folder
  └── src                      Main scripts folder
       ├── components/         React basic components folder
       ├── data/               Public data folder
       ├── page/               React routes folder
       ├── utils/              Helper functions folder
       ├── index.css           Global style
       ├── index.js            Main js file
       └── serviceWorker.js    Service worker configuration

State Management

React Hooks, an awesome feature which is available in React v16.7.0-alpha, is able to simplify React state and lifecycle features from function components.

<p align='center'> <img src='https://github.com/ValleyZw/tree/blob/master/static/Hooks.png' width='600' alt='React Hooks'> </p>

Install

yarn add react@next react-dom@next

Usage

import { useState, useEffect, useContext, useReducer } from 'react'

Lazy loading

The React.lazy function enables dynamic import components and routes.

Component

const Child = React.lazy(() => import('./components'));

const Main = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <Child />
  </Suspense>
)

Routes

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense, lazy } from 'react';

const Home = lazy(() => import('./page/Home'));
const About = lazy(() => import('./page/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
      </Switch>
    </Suspense>
  </Router>
);

Performance

<p align='center'> <img src='https://github.com/ValleyZw/tree/blob/master/static/Audits.png' width='600' alt='Lighthouse Report'> </p>

Reference

• Introducing Hooks
• Code-Splitting
• Making Sense of React Hooks
• Manage global state with React Hooks
• Why React Hooks, and how did we even get here?
• Rehooks
• Replacing Redux with the new React context API
• How to use React.lazy and Suspense for components lazy loading
• Lazy Loading Routes in React