Reactjs + Best Practices

Jan, 2018 - SaiGon - @TheDevBand

Frontend Picture
● Lot of technologies
● Lot of frameworks
Yarn vs NPM

● Yarn thật sự tốt

○ Ra đời sau nên khắc phục các nhược điểm của NPM
○ Tốc độ install packages nhanh hơn.
● Một số câu lệnh
○ yarn link
○ yarn why jest
Folder Structure
Folder Structure import React from 'react';
import classnames from 'classnames';
import styles from './loading.css';
// import withStyles from '../../helpers/withStyles';

● Van de relative import, import withStyles from 'helpers/withStyles';

tránh phải ../.. dẫn đến khó export const Loading = props => {

copy & paste const loadingClass = classnames({

loading: true,
});
return (
<div className={loadingClass}>
<span className="loader" />
</div>
);
};

export default withStyles(styles)(Loading);

Environment
● .env
● for local
● for production
● avoid conflict
● only use for build
Lazyload
● Về hàm import
● Về component: Loadable
● Chú ý:
○ Server side thì không cần chiến lược khác và nên load sync (sẽ bàn trong buổi giới thiệu về
SRR, Webpack)
CSS
● bootstrap

● css-loader

● postcss

○ Postcss-simple-vars

○ postcss-nested

○ postcss-import

○ autoprefix
Javascript
● UglifyJSPlugin

○ Remove console

○ Remove debugger

○ Remove comment

● DefinePlugin
Variable: this
● What is this?
● .bind(this)
● Syntax => ES6
Fonts, Images, Files
● import “logo.png”
● import “logo.csv”
● lazysize
Proxy
● JWT modify header
○ Why not just cookie
● CORS
○ Prefight Request với Options method
● Local Development:
○ Locahost:3000
○ Simple Proxy (alternative to nginx)
Components Communication
Redux
● Action
● Reducer
● Connect
● Dispatcher
● API
● Init
○ Cookie
○ Local Storage
○ Server Side
React Cycle
● construct

● componentDidMount

● componentWillUnmount

● componentWillReceiveProps

● shouldComponentUpdate

● render
State vs Props vs Context
● State
● Props
● Context
Composition vs Inheritance: HOC
● Inheritance

● Composition

● HOC
React Modules
● redux-form

● helmet

● fbemitter

● lodash

● query-string

● react-router
Unit Testing
● Jest - Test runner
● Enzym
○ mount
○ shallow
● Sinon
○ mock test
● Chú ý:
○ Test chỉ một file
○ Vượt qua nổi sợ khi viết test
Service worker
● Workbox plugin
● Runtime Caching
Performance
● Cơ chế render nhanh với thuật toán cho phép cập nhật lại thay đổi
● Thiết
Thinking in React
● vs Angular
● vs jQuery
Demo

https://thedevband.com/
● Online Unix Timestamp Converter

● Online JSON Editor

● Online CSS Autoprefixer

Resources:

● https://github.com/enaqx/awesome-react
● https://github.com/brillout/awesome-react-
components
● https://thedevband.com/