Scribd
Upload
142 views25 pages

Reactjs - Best Practices in Actions

This document discusses best practices for using Reactjs including folder structure, environment variables, lazy loading, CSS handling, JavaScript optimizations, component communication, Redux, the React component lifecycle, state vs props vs context, higher order components, React modules, unit testing, service workers, performance, and compares React to other frameworks. It also provides some example React applications and lists resources for learning more about React best practices.

Uploaded by

vietean
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
Download as pptx, pdf, or txt
142 views25 pages

Reactjs - Best Practices in Actions

This document discusses best practices for using Reactjs including folder structure, environment variables, lazy loading, CSS handling, JavaScript optimizations, component communication, Redux, the React component lifecycle, state vs props vs context, higher order components, React modules, unit testing, service workers, performance, and compares React to other frameworks. It also provides some example React applications and lists resources for learning more about React best practices.

Uploaded by

vietean
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
Download as pptx, pdf, or txt
Download as pptx, pdf, or txt
You are on page 1/ 25

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/

You might also like