reactjs

1. Cách sử dụng

1.1. Tạo project

1.1.1. create-react-app <name project>

2. router

2.1. Định nghĩa

2.1.1. Cho phép làm SPA - sigle webpage application

2.1.2. Thao tác trên một trang loac các nội dung thay đổi không load lại cả trang

2.1.3. Định nghĩa

2.1.3.1. Cho phép làm SPA - sigle webpage application

2.1.3.2. Thao tác trên một trang loac các nội dung thay đổi không load lại cả trang

2.2. Cách dùng

2.2.1. npm i react-router-dom --save

2.2.2. import { Browser as Router, Route, Link, NavLink} from 'react-router-dom';

2.2.3. Tạo Component điều hướng URL

2.2.3.1. render(){ return( <Router> <div> <Router exact path=“/“ component={Home}/> /*Home là 1 component*/ <Router exact path=“/Detail“ component={Detail}/> /*Detail là 1 component*/ <div> </Router> ) }

2.2.3.2. <NavLink activeClassName="selected" to "/home">Home </NavLink>/*Nếu không có thuộc tính activeClassName thì mặc định sẽ là active*/

2.2.4. Truyền nhận dữ liệu qua URL

2.2.4.1. Dữ liệu hoá

2.2.4.2. Mapping dữ liệu và trong html

2.2.4.3. Xử lý url

2.2.4.3.1. <Route exact path ="/news/:slug.:id" component={NewDetail}>

2.2.4.3.2. :slug là nội dung của đường dẫn thân thiện

2.2.4.3.3. :id là giá trị id của NewDetail

2.2.4.3.4. Giá trị của :slug và :id sẻ được lưu trong props.match

2.2.4.3.5. Chú ý: Phải đặt pattern ở Route phù hợp với đường dẫn

2.2.4.3.6. redirect trong component: return <Redirect to ="/Home" />

2.2.4.3.7. import Redirect from 'react-router-dom/Redirect';

2.2.5. Đường dẫn thân thiện: Slug

2.3. history trong react-route

2.3.1. Định nghĩa

2.3.1.1. Cho phép project dễ dàng thêm location dựa vào điều hướng trên client-side, và rất cần thiết cho quá trình phát triển Single Page Applications.

2.3.2. Các thuộc tính quan trọng

2.3.2.1. Location

2.3.2.1.1. - Phản ánh vị trí hiện tại của app

2.3.2.1.2. - Các thuộc tính

2.3.2.1.3. - history object lưu giữ một loạt các location. history cho phép thêm location, di chuyển giữa các location. Nếu history chỉ biết về location hiện tại, nó được gọi là present.

2.3.2.2. Navigation

2.3.2.2.1. - Các method củanavigationcho phép thay đổilocation` hiện tại.

2.3.2.3. Push

2.3.2.3.1. - Thêm một location mới vào array sau location hiện tại

2.3.2.3.2. history.push({ pathname: '/new-place' }) =>1 location có pathname = /new-place sẽ được thêm vào location( nằm ở sau location hiện tại)

2.3.2.4. Replace

2.3.2.4.1. - Thay thế location ở index hiện tại

2.3.2.4.2. - Redirect là thời điểm tốt nhất để sử dụng replace. Đó là phương thức mà React Router sử dụng trong component <Redirect>.

2.3.2.4.3. Ví dụ: bạn đang ở trang thứ nhất và click vào link trỏ tới trang thứ hai, ở trang thứ hai có thể sẽ redirect về trang thứ ba

2.3.2.5. Go

2.3.2.5.1. - Giúp dịch con trỏ (pointer) trong history stack đi n entry

2.3.2.5.2. goBack() = go(-1)

2.3.2.5.3. goForward() = go(1)

2.3.3. Các loại history

3. component

3.1. JSX

3.1.1. classNameCss

3.1.2. id

3.1.3. Convert html to link: HTML to JSX

3.2. props

3.2.1. định nghĩa

3.2.2. cách sử dụng

3.2.2.1. this.prop.key = vaule

3.3. state

3.3.1. định nghĩa

3.3.2. cách sử dụng

3.3.2.1. thay đổi giá trị cho state: this.setState(oject)

3.4. Refs

3.4.1. định nghĩa

3.4.1.1. Không cần phải re-render component mà có thể hiện thị nội dung thay đổi của component một cách trực tiếp

3.4.2. cách sử dụng

3.4.2.1. <input ref ={(data) => {this.mediate = dataInput}} > console.log(this.mediate.value);

3.5. LifeCycle

3.5.1. định nghĩa

3.5.1.1. Lifecycle là vòng đời của một component

3.5.1.2. Lifecycle là tập hợp các hàm mà reactjs đã dựng sẵn

3.5.1.3. Danh sách các hàm chia làm 4 phần tương ứng với quá trình hoạt động

3.5.1.3.1. Init

3.5.1.3.2. Mounting

3.5.1.3.3. Update

3.5.1.3.4. UnMounting

3.5.1.3.5. Minh hoạ

3.5.2. cách sử dụng

3.5.2.1. Initalization

3.5.2.1.1. constructor(props)

3.5.2.2. Mounting

3.5.2.2.1. compornentWilMount(){console.log("compornentWilMount");}

3.5.2.2.2. render(){console.log("render");}

3.5.2.2.3. componentDidMount

3.5.2.3. Updation

3.5.2.3.1. shouldComponentUpdate(nextProps, nextState){console.log("shouldComponentUpdate")}

3.5.2.3.2. componentWilUpdate

3.5.2.3.3. render

3.5.2.3.4. componentDidUpdate(prevProps, prevState){console.log("componentDiđUpate")}

3.5.2.4. Unmounting

3.5.2.4.1. componentWilUnmount

4. Redux

4.1. Định nghĩa

4.1.1. Quản lý các trạng thái state của ứng dụng application

4.2. Nguyên tắc hoạt động

4.2.1. Single source of truth

4.2.1.1. State của application được lưu trong 1 Store duy nhât

4.2.2. State is read-only

4.2.2.1. Cách duy nhất để thay đổi state là tạo ra 1 action

4.2.3. Changes are made with pure functions

4.2.3.1. Để chỉ rõ state được thay đổi bởi action=> ta phải viết 1 pure reducers

4.2.3.1.1. pure function: là function luôn trả về kết quả giống nhau với tham số truyền vào giống nhau

4.2.3.1.2. pure function: không phụ thuộc vào dữ liệu, trạng thái hay thay đổi nào mà chương trình chạy. Chỉ phụ thuộc vào tham số truyền vào

4.3. Middleware

4.3.1. Định nghĩa

4.3.1.1. Là lớp nằm giữa Reducers và Dispath Action. Thường được dùng để xử lý Async Action (API Request)

4.3.1.2. Một số middleware: Loggging, Crash Report

4.3.1.3. VỊ trí hoạt động:

4.3.1.3.1. Trước khi Reducer nhận được action

4.3.1.3.2. Sau khi action đã được dispatch

4.3.1.4. Một số thư viện

4.3.1.4.1. Redux-saga

4.3.1.4.2. Redux- thunk

4.3.1.4.3. Redux-promise

4.3.1.4.4. Redux-observable

4.4. Các thành phần

4.4.1. Stores

4.4.1.1. Một store đơn giản là một state container. Đây là nơi lưu trữ state và nơi những action được phát đi và xử lí. Khi bạn bắt đầu xây dựng ứng dụng bằng Redux, bạn phải nghĩ bạn muốn model ứng dụng của bạn như nào và các state sẽ được lưu trữ như nào. Đây là điều rất quan trọng, bởi vì với Redux bạn chỉ nên có 1 store và state thì được chia sẻ, nên bạn cần phải suy nghĩ kĩ trước khi bắt đầu.

4.4.2. Action

4.4.2.1. Action là những đối tượng mô tả cách chúng ta muốn thay đổi state. Bạn có thể hình dung action như là những API cho state của bạn.

4.4.2.2. Là một object mô tả những gì chúng ta muốn thay đổi state.Để làm cho mọi thứ rõ ràng và dễ dàng tái sử dụng hơn, convention được sử dụng để xây dựng nên action object. Trong ví dụ trên, bạn có thể tạo một function như addUser(name, email, password). Như bạn thấy, action bản chất không gọi bất cứ thứ gì. Một action chỉ đơn giản là một object mô tả về cách chúng ta muốn thay đổi state.

4.4.2.2.1. type: <tự define>

4.4.2.2.2. data: <object>

4.4.2.2.3. Ví dụ: { type: 'ADD_USER', data: { name: 'Foo', email: '[email protected]', password: 'Foobar123_' } }

4.4.3. Reducer

4.4.3.1. Là action handle. Gọi action và thay đổi state thông qua hàm dispatch

4.4.3.2. Trường hợp có nhiều reducer trong app thì chúng ta sử dụng function combindReducer

4.4.3.3. Action rất tuyệt vời, nhưng tự bản thân nó không thể làm nên được điều gì. Đấy là lí do chúng ta có reducer. Reducer là những action handler, nó hoạt động kết nối giữa action và store và biến thành những thay đổi trong state. Nếu chúng ta dispatch một action là ADD_USER vào trong store, chúng ta có thể có một reducer nhận action đó và thêm user mới vào trong state.

5. Webpack

5.1. Công dụng

5.1.1. Dành cho các dựng án lớn, dễ dàn phát triển, customize

5.1.2. Tăng tốc động của ứng dụng

5.1.3. Phân tách các module và chỉ thực hiện load khi cần

5.1.4. Đóng gói các file nguồn thành 1 file duy nhất, nhờ vào loader mà có thể biên dịch những loại file định dạng khác nhau

5.1.5. Biến các tài nguyên tĩnh thành module( hình ảnh, css)

5.1.6. Biến đổi các mã nguồn: js, less, sass thành js, css, ... ES6 -> ES5 thông qua babel Transpiler

5.2. Phân chia công việc cho từng module cụ thể

5.3. Webpack - Reactjs

5.3.1. Đóng gói thành các module => giải quyết được vấn đề đường dẫn

5.3.2. Browser không hiểu JSX => chuyển thành JS

5.3.3. Áp dụng CSS Preprocessor để xây dựng stylesheet

5.4. Webpack: Phân tách module

5.4.1. Nội dung

5.4.1.1. Cấu hình webpack với: webpack.config.js

5.4.1.2. Cài đặt webpack: npm i --save-dev webpack

5.5. Webpack: Loader

5.5.1. Babel-loader: hướng dẫn babel làm thế nào làm viêc được với webpack

5.5.2. Babel-core: Lấy và phân tích mã, output ra số file

5.5.3. Babel-preset-env: Bộ quy tắc để nói, giải thích với babel về cú pháp ES6, ES7 cần tìm và làm thế nào để chuyển đổi thành ES5 code

5.5.4. Babel-preset-react: chuyển đổi code JSX thành JS

5.5.5. webpack.config.js: config:{ module:{ rules : [ { use : 'babel-loader', test: /\.js$/ } ] } }

5.5.6. Tạo file .babelrc

5.5.6.1. { "presets" : ["babel-preset-env"] }

5.5.7. Thay các cú pháp: const a = require('b') => import a from 'b'; module.export a => export default a;

5.5.8. extract-text-webpack-plugin

5.5.8.1. tách nội dung file css ra 1 file riêng

5.5.8.2. webpack.config.js const ExtractTextPlugin = require('extract-text-webpack-plugin'); const config = { module : { rule: [ { use : ExtractTextPlugin.extract({ use : "css-loader", falback: "style-loader" }), test : /\.css$/ } ] }, plugins: [ new ExtractTextPlugin("style.css") ] }

5.5.9. babel-preset-stage-2

5.5.9.1. Dùng để chuyển đổi các kiểu viết ES2016, ES2017 ...

5.5.10. file-loader

5.5.10.1. Dùng để load các file có những đuôi đặc biệt

5.5.10.2. webpack.config.js: config:{ module:{ rules : [ { loader : 'file-loader', test: /\.jpe?g$|\.png$|\.gif$/ } ] } }

5.5.11. provide-plugin

5.5.11.1. webpack.config.js const webpack = require('webpack'); module.export = { plugins : [ new webpack,ProvidePlugin({ '$' : 'jquery', 'jQuery' : 'jquery', 'window.$' : 'jquery', 'window.jQuery' : 'jquery', }) ] }

5.5.12. HtmlWebpackPlugin

5.5.12.1. Nội dung:

5.5.12.1.1. Xuất file html ra thư mục dist

5.5.12.2. webpack.config.js const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { plugins : [ new HtmlWebpackPlugin({ template : 'src/index.html' }) ] }

5.6. Webpack: Vendor

5.6.1. Ý nghĩa

5.6.1.1. Cấu trúc src sau khi gồm 2 phần: - Bundle: Chứ nội dung của các component - Vendor: Chứ nội dung của các lib được dependency

5.6.1.2. Lần dầu vào trang web: Tiến hành tải bundle.js và vendor.js về => lưu vào cache

5.6.1.3. Các lần sau: - Bundle.js: chứa các component, nội dung thay đổi liên tục -> luôn tải về để cập nhật lại nội dung - Vendor: Luôn giữ nguyên. Đã lưu ở cache nên không cần tải về. Chỉ cần lấy từ cache ra xài

5.6.2. Cách dùng

5.6.2.1. webpack.config.js const VENDOR_LIBS = [ 'react', 'axios'. ... ] module.exports = { entry: { bundle: './src/index.js', vendor: VENDOR_LIBS }, output: { path : path.join(__dirname, 'dist'), filename : '[name].js' } .... }

5.6.3. Code Splitting

5.6.3.1. Dùng để loại bỏ các thư viện bị lặp lại trong bundle

5.6.3.2. Hiên tại Bundle chứa cả các thư viện có trong vendor. Cần phải tách ra 2 phần riêng biệt

5.6.3.3. CommonsChunkPlugin

5.6.3.3.1. webpack.config.js module.exports = { plugins : [ new webpack.optimize.CommonsChunkPlugin({ names : ['vendor', 'manifest'] }) ] } // mainfest dùng để quản lý sự thay đổi của các file khi bundle // mainfest dùng dể khi build lại thì không thực hiện rebuild file vendor nếu không có sự thay đổi dependency

5.6.3.3.2. Nhúng file vendor,js vào trong file index.html

5.6.3.4. Encrypt

5.6.3.4.1. webpack.config.js module.exports = { output: { path : path.join(__dirname, 'dist'), filename: '[name].[chuckhash].js' } }

5.6.3.5. Clen folder dist

5.6.3.5.1. npm i rimraf --save-dev

5.6.3.5.2. package,json { "script" : { "clean" : "rimraf dist" //xóa các file trong thư mục dist "build" : "npm run clean && webpack" } }

5.7. Webpack: webpack-dev-server

5.7.1. Công dụng:

5.7.1.1. Để build lại dist khi có thay đổi code

5.7.1.2. webpack.config.js const devServer = { port : 4000. open: true, disableHostCheck: true, historyApiFallback: true, overlay: true, stats: 'minimal', inline: true, compress: true. contentBase: '/' } module.export = { devServer }