react-configure

Necessary configure 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, ...

Vietnamese version here

Table of contents:

• Start with create-react-app
• Config environment variables
• Post-Processing CSS:
• CSS Preprocessor (Sass, Less, etc.)
• Create Node.JS server
  • Use express to initialization
  • Configuration
  • Install dependencies package
  • Install package cors
  • Start server-client
• Environment for react app
• Organize src react app
  • Styles
  • Library and packages
  • Utility service
  • Reducers - Actions
  • Components
    • Layout Components
    • Common Components
    • Pages Components
• jQuery
  • Installation
  • How to use?
  • Recommend
• Bootstrap 3, 4
  • Use along with jQuery
    • Installation
    • How to use?
  • Use via React Component - reactstrap
    • Installation and Usage
  • Recommend
• Font Awesome
  • Add via index.html
  • Add via npm package
• Animate.css
  • Install and configure
  • Custom duration time
  • How to use
  • Demo
• react-router-dom (router)
• react-loadable (code-splitting)
  • Installation, Usage
  • Test Loadable Components - code-splitting
• react-intl - API to format date, number and string
  • Features
  • Document
  • Usage in this tutorial
• Redux: redux, react-redux, redux-thunk
  • Installation
  • Usage
• Fetch Data API to server node
  • Create services to get API
• UI Awesome with React Component
  • Reveal Component on scroll: use react-reveal
    • Installation
    • Support
      • Reveal with React
      • Animated.css with React
    • How to use?
  • Scroll animated to target - react-scrollchor
    • Installation
    • How to use?
• Datatable with react-table
• VS Code Extensions
  • Icons, Colors, View
  • Snippets
  • Intellisence
  • Lint Code, Formater
  • Edit, Preview README - Markdown files
• VS Code User Settings

Start with create-react-app

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

1. Create a 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/",
  }
}

3. In file .gitignore:

# auto generated files (sass, less, ...)
src/**/*.css

Create Node.JS server

Optional if you need a 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, except 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 the server.

1. Create environment files: In your terminal:

mkdir src/environments
cd src/environments
touch env.development.js env.production.js index.js

2. 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 are below sections

Reducers - Actions

Create actions, reducers to do with redux. Guides are 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 are 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 the 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 reactstrap@next
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 to use some component in react, with event handlers.
2. If you need some style in bootstrap, you can use directly and don't need to 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

• View demo at component DemoAnimateCss
• View Demo here
• View Implementation here

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. The Document 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 speeds up your Single Page App (SPA).
• create-react-app will bundle a 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 the 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 the document 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')
);

2. 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 demos).

import { combineReducers } from 'redux';

import Items from './items';
import Users from './users';

const reducers = combineReducers({
  Items,
  Users
});

export default reducers;

4. View Demo here
5. View Implementation here

Fetch Data API to the 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 animated to target - react-scrollchor

Animation to scroll to a component when user clicks to the link.

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 packages here:
   • react-select - Demo
   • react-select - Docs
   • react-datepicker - Demo
   • react-datepicker - Docs

VS Code Extensions

I think the following extensions are helpful for development:

Icons, Colors, View

• vscode-icons
• Bracket Pair Colorizer

Snippets

• ES7 React/Redux/GraphQL/React-Native snippets
• JavaScript (ES6) code snippets
• Bootstrap 3 Snippets
• Bootstrap 4 & Font awesome snippets
• Font-awesome codes for html
• Font-awesome codes for css
• HTML Snippets
• HTML CSS support

Intellisence

• npm
• npm Intellisence
• Path Intellisense
• SCSS IntelliSence
• Auto Close Tag
• Auto Rename Tag
• IntelliSense for CSS class names

Lint Code, Formater

• Prettier - Code formatter
• EditorConfig for VS Code
• ESLint
• TSLint
• Sass
• Sass Formatter
• Beautify css/sass/scss/less

Edit, Preview README - Markdown files

• Markdown All in One
• Markdown Preview Enhanced
• Markdown PDF

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,
}