Top 100 Documentaries App with React Hooks and Material-UI
Branch: master
Clone or download
Latest commit 54c829c Jan 12, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public add app screenshots Jan 12, 2019
src optimized menus layout Jan 12, 2019
static add app screenshots Jan 12, 2019
.env first commit Jan 11, 2019
.gitignore first commit Jan 11, 2019
LICENSE Create LICENSE Jan 12, 2019
README.md add app screenshots Jan 12, 2019
package.json init readme Jan 12, 2019
yarn.lock init readme Jan 12, 2019

README.md

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

Overview

App Overview

Project structure

tree
  ├── .env                     Environment variables configuration
  ├── .gitignore               git ignore 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
       ├── bootstrap.js        Material-UI stytle initialization
       ├── 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.

React Hooks

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

Lighthouse Report

Reference