Configure ReactJS with create-react-app



  • This is post about necessary configures for create-react-app with redux,
    react-redux,
    redux-thunk,
    react-router,
    react-router-dom,
    sass,
    code spliting,
    jQuery,
    bootstrap,
    react-loadable,
    react-scrollchor,
    react-intl,
    react-select,
    react-datepicker,
    react-table,
    moment,
    ...

    My GitHub Source Code here: https://github.com/huynhsamha/create-react-app-config

    My Demo here: https://huynhsamha.github.io/create-react-app-config/

    Start with create-react-app

    In this step, you should have create-react-app is installed global.

    1. Create new app: create-react-app react-app
    2. use npm start or yarn start to start development
    3. use npm build or yarn build to build production

    In this tutorial, I will use yarn, you can also use npm.

    Config environment variables

    Create environment files, create-react-app will use them.

    1. In terminal at root: touch .env .env.development .env.production
    2. In .env.development: REACT_APP_ENV=development
    3. In .env.production : REACT_APP_ENV=production

    You can also set new environment variable.
    Note: only variable with prefix REACT_APP_ can use in create-react-app

    Post-Processing CSS:

    As create-react-app said:

    This project setup minifies your CSS and adds vendor prefixes to it automatically through Autoprefixer so you don’t need to worry about it.

    CSS Preprocessor (Sass, Less etc.)

    1. In terminal: yarn add node-sass-chokidar npm-run-all
    2. In file package.json:
    {
        "scripts": {
        -   "start": "react-scripts start",
        -   "build": "react-scripts build",
        +   "start": "npm-run-all -p watch-css start-js",
        +   "build": "npm-run-all build-css build-js",
        +   "start-js": "react-scripts start",
        +   "build-js": "react-scripts build",
        +   "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
        +   "build-css": "node-sass-chokidar src/ -o src/",
      }
    }
    
    1. In file .gitignore:
    # auto generated files (sass, less, ...)
    src/**/*.css
    

    Create Node.JS server

    Use express to initialization

    mkdir server
    cd server
    express
    

    Configuration

    1. Rename app.js to server.js
    2. Join server.js and ./bin/www
    3. Move server.js to root app
    4. Insert dependencies in package.json (which is generated by express) to package.json in root (which is generated by create-react-app)
    5. Remove dependencies not use (serve-favicon, jade, ejs, etc.)
    6. Remove all file in server, execpt routes/index.js
    7. Correct and customize file server.js

    Install dependencies package

    yarn

    Install package cors

    For development, use package cors to cross localhost:3000 (client-side, is react app) to localhost:4200 (server-side, is node express)

    yarn add cors

    Start server-client

    yarn start or npm start: start client side (react): localhost:3000

    node server: start server-side (node express): localhost:4200

    Environment for react app

    In development, because we use node server at port 4200, but client side is port 3000, so we should check out environment variable REACT_APP_ENV (which created in above steps) to fetch data from server.

    1. Create environment files:
      In your terminal:
    mkdir src/environments
    cd src/environments
    touch env.development.js env.production.js index.js
    
    1. Edit the files as source code. baseUrl is url to server.

    Organize src react app

    Styles

    Create styles in src/ to contain variables, mixins, classes, common styles, or theme, etc. for your app:
    + _variables.scss: declare variables for style.
    + _mixins.scss: declare mixins for style
    + _classes.scss: declare some util classes for style
    + index.scss: import _ files to this file, you should move index.scss (in root) to this folder, and in index.js, you only import ./styles/index.css
    + You also override some theme (such as AdminLTE, Bootstrap, Material, Angular, Datatables, Charts, ...) with files _ and import to index.scss

    Library and packages

    Create lib in src to contain some library or package you use in this app, or config something with these packages (such as jQuery, Bootstrap, Font-Awesome, Ionicons, Material, ...):
    + You also create index.js in lib to import these files in folder.
    + In index.js in root, you only import by one line: import './lib';

    Utility service

    Create services to contain your services for app. Guides is below sections

    Reducers - Actions

    Create actions, reducers to do with redux. Guides is below sections

    Components

    Create components to contain components in app:
    Guides for these components is below sections

    Layout Components

    • Create layout in components to contain layout of app (flow).
    • Your App.js, App.scss also in here, which import Header, Footer, Sidebar, Menu, Body,... for Navigations and Router

    Common Components

    Create common in components to contain some components which is used a lot of times. Such as Loading, Modal, Alert, Notification, Box, ...

    Pages Components

    Create pages in components to contain some pages in app, which is route in component Body, such as Home, Dashboard, Profile, Form, Terms of Service, Support, Page not found, Error page,...

    jQuery

    Installation

    1. In terminal: yarn add jquery
    2. In terminal: touch src/lib/jquery.js
    3. Edit created file by following lines:
    import $ from 'jquery';
    
    // config jquery variables for other lib use jQuery (such as bootstrap)
    window.$ = $;
    window.jQuery = $;
    

    How to use?

    1. In lib/index.js, import by: import './jquery';
    2. In index.js at root, import './lib'; (if you don't have).
    3. In the component, to use jQuery, you should import: import $ from 'jquery';
    4. To use jquery function, only use from componentDidMount() in Lifecycle React components:
    5. View Demo here
    6. View Implementation here
      componentDidMount() {
        // jQuery should declare at here
        $(document).ready(() => {
          $('#alert').click(() => alert('This is alert be jQuery'));
        });
      }
    

    Recommend

    Not use jQuery if it's not needed

    Bootstrap 3, 4

    Use along with jQuery

    Installation

    1. In terminal: yarn add bootstrap (add @version you choose)
    2. In terminal: mkdir src/lib (if you have lib, skip this step)
    3. In terminal: touch src/lib/bootstrap.js
    4. Edit created file as lines (In this tutorial, I use bootstrap 4):
    import 'bootstrap/dist/css/bootstrap.min.css';
    import 'bootstrap/dist/js/bootstrap.bundle.min.js';
    

    How to use?

    1. In lib/index.js, import by: import './bootstrap';
    2. In index.js at root, import './lib'; (if you don't have).
    3. In the component, you can use bootstrap 3, 4 as document available
    4. View demo with component DemoBootstrap.
    5. View Demo here
    6. View Implementation here

    Use via React Component - reactstrap

    Installation and Usage

    1. In terminal: yarn add [email protected]
    2. Only import Component to use as reactstrap document
    3. View demo with component DemoReactstrap.
    4. View Demo here
    5. View Implementation here

    Recommend

    1. I think you should use reactstrap if you want use some component in react, with event handle.
    2. If you need some style in bootstrap, you can use directly, and don't need use jQuery

    Font Awesome

    Add via index.html

    You can include via file index.html in folder public via cdn or download and link stylesheet

    Add via npm package

    1. In terminal: yarn add font-awesome
    2. Create file lib/font-awesome.js and add line import 'font-awesome/css/font-awesome.min.css';
    3. In lib/index.js, import by: import './font-awesome';
    4. In index.js at root, import './lib'; (if you don't have).

    Animate.css

    Install and configure

    1. yarn add animate.css
    2. In lib/ create file animate-css.js and add import 'animate.css';
    3. In index.js, also import by line import './animate-css';

    Custom duration time

    1. Custom duration of animation by file scss config in style/:
    2. Create file _animate.scss as source code
    3. In index.scss: @import './animate.scss';
    4. This file will create classes style to custom time duration:
    .animated.duration-100
    .animated.duration-200
    ...
    .animated.duration-1100
    .animated.duration-1200
    ...
    .animated.duration-3000
    

    How to use

    Example:

    <!-- In/Out default -->
    <div class="animated slideInUp">ABCDEFGHIJKLMNOP</div>
    <div class="animated slideOut" >ABCDEFGHIJKLMNOP</div>
    <div class="animated fadeInDown" >ABCDEFGHIJKLMNOP</div>
    <!-- In/Out custom duration -->
    <div class="animated fadeInUp duration-500" >ABCDEFGHIJKLMNOP</div>
    <div class="animated flipIn duration-1000" >ABCDEFGHIJKLMNOP</div>
    <div class="animated slideOutDown duration-700" >ABCDEFGHIJKLMNOP</div>
    <!-- Infinite default/custom duration -->
    <div class="animated flash infinite" >ABCDEFGHIJKLMNOP</div>
    <div class="animated flash infinite duration-1200" >ABCDEFGHIJKLMNOP</div>
    

    Demo

    react-router-dom (router)

    react-router-dom is used for route Single Page Application (SPA), not loading again page.

    1. In terminal: yarn add react-router-dom

    2. You can view implement in components/layout/body

    3. You also view implement in components/pages/demo-react-router

    4. Documents is available at React Router Dom

    5. View Demo here

    6. View Implementation here

    react-loadable (code-splitting)

    Installation, Usage

    react-loadable is useful for code-splitting:

    • Lazy load components until it's called by user, it speed up your Single Page App (SPA).
    • create-react-app will bundle new script file, when it's called, it will import this file to app.
    1. In terminal: yarn add react-loadable react-router-dom
    2. Create Loading component (view components/common/loading/)
    3. When use Loadable with loading component, it will add props to this component, such as:
      { isLoading: true, pastDelay: false, timedOut: false, error: null }
    4. View components/page/demo-loadable-component to sample implement.
    5. Component DemoLoadableComponent (is not loadable) and LoadableDemoComponent (is loadable)

    Test Loadable Components - code-splitting

    1. Inspect element in browser
    2. Choose tab network
    3. Click filter JS
    4. Refresh page
    5. First only bundle.js and some js file
    6. Click component which loadable, you see *.chunk.js is loaded. That is lazy loading component
    7. View Demo here
    8. View Implementation here

    react-intl - API to format date, number and string

    Internationalize React apps. This library provides React components and an API to format dates, numbers, and strings, including pluralization and handling translations.

    Features

    • Display numbers with separators.
    • Display dates and times correctly.
    • Display dates relative to "now".
    • Pluralize labels in strings.
    • Support for 150+ languages.
    • Runs in the browser and Node.js.
    • Built on standards.

    Document

    You can view document at here: https://github.com/yahoo/react-intl

    Usage in this tutorial

    1. In index.js, we import and use provider for App component:
    import { IntlProvider } from 'react-intl';
    
    ReactDOM.render(
    
      <Provider store={store}>
        <IntlProvider locale="en">
          <App />
        </IntlProvider>
      </Provider>,
    
      document.getElementById('root')
    );
    
    1. In specific component, you can import component of react-intl to use. You can view 1 demo about this in demo redux with format date.

    Redux: redux, react-redux, redux-thunk

    Installation

    yarn add redux react-redux redux-thunk

    Usage

    1. In src, create dir and files:

      • actions/action-types.js: declare action name as const
      • actions/index.js: declare actions for redux
      • reducers/: declare reducers
      • reducers/[name].js: declare action for a specific object.
      • reducers/index.js: to combine reducer with redux, after that is to createStore.
    2. In index.js:

      • import { Provider } from 'react-redux';: use Provider to store redux
      • import { createStore, applyMiddleware } from 'redux';: use createStore and middleware thunk with createStore
      • import thunk from 'redux-thunk';: middleware for createStore, support async function
      • import allReducers from './reducers';: reducers after combined
      • const store = createStore(allReducers, applyMiddleware(thunk));: createStore with combined reducer, and apply middleware thunk
      • You don't care about other reducers, such as Users
    3. In reducers/index.js: combine reducers:

      • In this tutorial, I demo with Items and Users (users is used for other section demo).
    import { combineReducers } from 'redux';
    
    import Items from './items';
    import Users from './users';
    
    const reducers = combineReducers({
      Items,
      Users
    });
    
    export default reducers;
    
    1. View Demo here
    2. View Implementation here

    Fetch Data API to server node

    Create services to get API

    1. mkdir src/services (if you have not)
    2. touch db-service.js auth-service.js (db- to get database, auth- to authentication user)
    3. Example with db-service.js:
      • import Env from './../environments';: to get baseUrl with environments
      • export default class DbService as static class
      • set baseUrl to get API:
    static baseUrl() { return Env.baseUrl; }
    static parseUrl(url) { return DbService.baseUrl() + url; }
    

    Example get API:

    static getItems = () => {
        let url = DbService.parseUrl('/api/items');
        console.log(url);
        return fetch(url).then(res => res.json());
    }
    

    Example Post API:

     static addItem = (item) => {
        let url = DbService.parseUrl('/api/items');
        return fetch(url, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(item)
        }).then(res => res.json());
    }
    

    UI Awesome with React Component

    Reveal Component on scroll: use react-reveal

    Animation to show component when user scroll to view.

    Installation

    yarn add react-reveal

    Support

    Reveal with React

    Fade
    Flip
    Rotate
    Zoom
    Bounce
    Slide
    Roll
    
    left/right/top/bottom
    fadeOut
    

    Animated.css with React

    Jump
    Flash
    HeadShake
    Jello
    Pulse
    RubberBand
    Shake
    Spin
    Swing
    Tada
    

    How to use?

    1. Use http://www.react-reveal.com/examples/.

    2. View demo with component DemoReactReveal.

    3. View Demo here

    4. View Implementation here

    Scroll animted to target - react-scrollchor

    Animation to scoll to component when user click link to.

    Installation

    yarn add react-scrollchor

    How to use?

    1. Use https://github.com/bySabi/react-scrollchor

    2. View demo with component DemoReactScrollchor.

    3. View Demo here

    4. View Implementation here

    Datatable with react-table

    1. View demo for this guide here: Demo
    2. View implementation in demo-react-table - Implementation
    3. In this guide, we use react-table with features:
      • Lightweight at 11kb (and just 2kb more for styles)
      • Fully customizable (JSX, templates, state, styles, callbacks)
      • Client-side & Server-side pagination
      • Multi-sort
      • Filters
      • Pivoting & Aggregation
      • Minimal design & easily themeable
      • Fully controllable via optional props and callbacks
    4. In this guide, we also use react-select and react-datepicker with moment. You can view docs for these package here:

    VS Code Extensions

    I think following extensions is helpful for development:

    Icons, Colors, View

    Snippets

    Intellisence

    Lint Code, Formater

    Edit, Preview README - Markdown files

    VS Code User Settings

    I think you also setting your VSCode by following steps:

    1. Enter Ctrl + Shift P
    2. Search user settings
    3. Choose Preferences: Open User Settings and enter.
    4. Edit your file User Settings by following lines:
      (you can search in Default Settings and customize your style)
    {
        "workbench.iconTheme": "vscode-icons",
        "workbench.startupEditor": "newUntitledFile",
        "window.zoomLevel": 0,
        "editor.fontSize": 13,
        "eslint.autoFixOnSave": true,
        "tslint.autoFixOnSave": true,
        "editor.formatOnSave": false,
        "editor.renderWhitespace": "boundary",
        "editor.quickSuggestions": {
            "other": true,
            "comments": true,
            "strings": true
        },
        "terminal.integrated.cursorStyle": "line",
        "terminal.integrated.fontSize": 13,
        "terminal.integrated.fontFamily": "",
        "vsicons.projectDetection.autoReload": true,
    }
    

    Nguồn: Viblo



Có vẻ như bạn đã mất kết nối tới LaptrinhX, vui lòng đợi một lúc để chúng tôi thử kết nối lại.