21 July 2018

ReactJS: Chia sẻ kinh nghiệm

By  at  1:09:00 PM     No comments
Chào mọi người, đây là bài viết chia sẻ kinh nghiệm của bản thân mình khi tìm hiểu về công cụ create-react-app cho việc lập trình ReactJS trở nên dễ dàng hơn. Trong bài viết này, mình sẽ nói về những điều có thể cần thiết cần phải tinh chỉnh trước khi bắt đầu 1 dự án React của các bạn, cụ thể là sử dụng create-react-app với các thư viện 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, ...
Đây là source GitHub của mình: https://github.com/huynhsamha/create-react-app-config
Còn đây là demo về 1 số phần mình làm: https://huynhsamha.github.io/create-react-app-config/

Bắt đầu với create-react-app

Nếu bạn mới bắt đầu sử dụng react hoặc chưa biết đến create-react-app thì mình nghĩ bạn nên sử dụng thằng này để làm quen với react, vì nó đã làm sẵn mọi thứ giúp ta, ta chỉ cần làm theo những gì ta muốn với công cụ này.
Trước tiên, bạn nên cài package create-react-app mức global từ npm . npm install create-react-app -g hoặc nếu bạn dùng Ubuntu hay một số hệ điều hành khác, nó yêu cầu quyền root, bạn thêm sudo vào trước lệnh để thực thi.
  1. Tạo mới project: create-react-app react-app
  2. npm start or yarn start: start môi trường dev.
  3. npm build or yarn build build production.
Trong bài này, mình sử dụng yarn, các bạn có thể sử dụng npm cũng được theo đúng cú pháp của npm.

Thiết lập biến môi trường (environment variables)

Tạo các file lưu trữ biến môi trường, những file này theo như create-react-app nói nó sẽ nhận ra các biên được khai báo trong các file này.
  1. Trong terminal tại root của project: touch .env .env.development .env.production
  2. In .env.development: REACT_APP_ENV=development
  3. In .env.production : REACT_APP_ENV=production
Note: chỉ mầy biến với prefix là REACT_APP_ thì thằng create-react-app mới hiểu và đọc được, còn sử dụng nó thì mình nói sau.

Post-Processing CSS

Khi viết CSS, ta thường quan tâm đến các thuộc tính hỗ trợ trên nhiều trình duyệt . Tuy nhiên create-react-app sẽ lo cho ta việc này, do đó ta có thể yên tâm khi viết CSS 1 cách đơn giản. Đây là lời trích từ document của react:
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.)

Nếu bạn nào đã dùng qua SASS , LESS, SCSS thì cũng biết sự lợi hại và tiện ích của những thằng này. Do đó nếu có thể tích hợp vào React thì khá thú vị. create-react-app cũng hỗ trợ ta việc này, bằng cách thực hiện các bước sau:
  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
Lúc này khi ta start de lên, khi có thay đổi gì ở file sass, thì nó sẽ tự build lại các file css cho ta và browser tự động được refresh.
Còn trong file .gitignore, ta thêm các file tự động sinh ra do sass để tránh gây conflict không cần thiết khi nhiều người commit.

Tạo server Node.JS

Nhiều lúc, ta cũng muốn sử dụng node cho thằng react 😃

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

Ta install package cors để cross từ port 3000 localhost tới port 4200 localhost.
  • localhost:3000 (client-side, là port thằng react)
  • localhost:4200 (server-side, là port của 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 cho react app

Lúc ta phát triển (dev), ta sử dụng node ở port 4200, còn react ở port 3000, do đó để react có thể gọi request đến port 4200, ngoài sử dụng cors như ở trên, ta cũng cần sử dụng biên môi trường (đã thiết lập ở bước trên) để lấy dữ liệu từ server node. Ngoài ra ta cũng có thể dùng proxy (tham khảo thêm google cách này).
Như đã nói ở trên, chỉ các biến REACT_APP_ được khai báo trong các file tương ứng thì react mới biết được. Cụ thể ta dùng biến REACT_APP_ENV để phân biệt môi trường của server, nếu là production thì không cần phinh phức.
  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.

Cấu trúc thư mục src trong react app

Styles

Tạo thư mục styles trong src/ để chứa các biến variables, mixins, classes, common styles, or theme, etc. cho app react: + _variables.scss: khai báo các variables . + _mixins.scss: khai báo các mixins (dùng sass hoặc less) + _classes.scss: khai báo 1 số class hữu ích. + index.scss: import các file _ vào file này, để file index.scss ở ngoài thư thư mục tương ứng, còn trong file index.js, ta import style này vào ./styles/index.css + Nếu app của bạn sử dụng theme (như AdminLTE, Bootstrap, Material, Angular, Datatables, Charts, ...), ta ghi đề những style cần với file prefix là _ và import vô index.scss

Library and packages

Trong thư mục src, ta tạo thư mục lib để chứa các thư viện và package ta dùng trong app, chẳng hạn như jQuery, Bootstrap, Font-Awesome, Ionicons, Material, ...
  • Tạo file index.js trong lib để import các file trong thư mục này
  • Trong file index.js ngoài thư mục app của ta, ta import thư mục lib vừa tạo chỉ bằng dòng import './lib';

Utility service

Ta cũng tạo thư mục services để chứa các tiện ích của app. Việc triển khai thư mục này ta sẽ bàn sau.

Reducers - Actions

Nếu ta sử dụng redux, ta cũng cần tạo 2 thư mục actions và reducers. Cụ thể triển khai ta sẽ bàn sau.

Components

Ta tạo components để chứa các components của app, trong đó ta chia ra thành:

Layout Components

Tạo thư mục layout để chứa luồng thực thi của app. Trong layout ta tạo hai file App.js và App.scss, ngoài ra còn chứa các thư mục Header, Footer, Sidebar, Menu, Body tương ứng cho việc điều hướng app.

Common Components

Ta tạo common để chứa các components dùng chung được sử dụng nhiều lần như Loading, Modal, Alert, Notification, Box, ...

Pages Components

Tạo pages để chứa các trang của 1 single page app, như 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: tạo file jquery config
  3. COnfig file này như sau:
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 ngoài app, import './lib'; (nếu như bạn chưa import).
  3. Trong mỗi component, để sử dungj jquery mà react không báo lỗi, ta cần import: import $ from 'jquery';
  4. jquery chỉ sử dụng kể từ componentDidMount() trong vòng đời của 1 component react:
  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

Chỉ nên dùng jquery khi thực sự cần thiết. vì react đã hỗ trợ khá đủ.

Bootstrap 3, 4

Sử dụng cùng với jquery

Installation

  1. In terminal: yarn add bootstrap (thêm @version cho version bạn sử dụng)
  2. In terminal: mkdir src/lib (nếu đã tạo thì bỏ qua)
  3. In terminal: touch src/lib/bootstrap.js
  4. Cấu hình file này như sau (mình đang dùng 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. Trong component, ta có thể sử dụng bootstrap 3, 4 như document của bootstrap.
  4. View demo with component DemoBootstrap.
  5. View Demo here
  6. View Implementation here

Sử dụng thông qua React Component - reactstrap

reactstrap là một package react cho bootstrap, tương đối ổn so với bootstrap nhưng không phải là hoàn thiện. Bạn có thể google package này để xem qua doc của nó.
Cũng có nhiều framework khác cho react, xây dụng sẵn các component cần thiết cho react, bạn có thể google các framewro hoặc package tương ứng.

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

Font Awesome

Thông qua index.html

Ta có thể include trực tiếp thông qua index/html bằng cdn, hoặc download rồi include vào.

Sử dụng 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/ tạo animate-css.js và thêm import 'animate.css';
  3. In index.js, import bằng import './animate-css';

Custom duration time

  1. Tùy chỉnh thời gian animation bằng scss config trong style/:
  2. Tạo file _animate.scss như source code
  3. In index.scss: @import './animate.scss';
  4. File này sẽ tạo ra các class sau:
.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 được sử dụng cho 1 Single Page Application (SPA).
  1. In terminal: yarn add react-router-dom
  2. Bạn xem implement trong components/layout/body
  3. Cũng có thể xem ở components/pages/demo-react-router
  4. Documents is available at React Router Dom

react-loadable (code-splitting)

code-splitting là một kỹ thuật tăng tốc độ của single page app. Nó sẽ lazy loading, tức chờ cho điến khi người dùng click vào component đó nó mới thực sự load component đó lên. Điều này giúp ứng dụng của ta load nhanh ở lần chạy đầu tiên khi người dùng chưa cần vào các component này.
create-react-app cũng hỗ trợ ta trong việc code-splitting, do đó ta không nên bỏ qua kỹ thuật này,

Installation, Usage

react-loadable hỗ trợ code-splitting:
  • create-react-app sẽ bundle script file mới, khi được gọi, nó mới load file này.
  1. In terminal: yarn add react-loadable react-router-dom
  2. Tạo 1 Loading component (view components/common/loading/)
  3. Khi sử dụng Loadable với loading component, các thuộc tính cần quan tâm cho component này: { 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 trong trình duyệt
  2. Chọn tab network
  3. Click filter JS
  4. Refresh page
  5. lúc đầu chỉ thấy file bundle.js và 1 số file js khác.
  6. Click component hỗ trợ loadable, ta sẽ thấy *.chunk.js is loaded. Đây là lazy loading component
  7. View Demo here
  8. View Implementation here

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

Internationalize React apps. Thư viện này cung cấp các React components and API để format dates, numbers, and strings, bao gồm pluralization (số nhiều) và handling translations (chuyến đổi).

Features - các tính năng

  • 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, ta import và dùng provider cho App component:
import { IntlProvider } from 'react-intl';

ReactDOM.render(

  <Provider store={store}>
    <IntlProvider locale="en">
      <App />
    </IntlProvider>
  </Provider>,

  document.getElementById('root')
);
  1. Trong tứng component, ta import component of react-intl để sử dụng. Bạn có thể xem demo sử dụng ở demo phần redux.

Redux: redux, react-redux, redux-thunk

Redux là 1 kỹ thuật ta không thể bỏ qua khi làm việc với react.

Installation

yarn add redux react-redux redux-thunk

Usage

  1. In src, tạo:
    • actions/action-types.js: định nghĩa tên action
    • actions/index.js: định nghĩa các action
    • reducers/: khai báo các reducer
    • reducers/[name].js: định nghĩa các action cụ thể.
    • reducers/index.js: combine các reducer của redux, sau đó sẽ được createStore.
  2. In index.js:
    • import { Provider } from 'react-redux';: dùng Provider để store redux
    • import { createStore, applyMiddleware } from 'redux';: dùng createStore và middleware thunk cho createStore
    • import thunk from 'redux-thunk';: middleware cho createStore, support async function
    • import allReducers from './reducers';: reducers sau khi combined
    • const store = createStore(allReducers, applyMiddleware(thunk));: createStore với combined reducer, và apply middleware thunk
    • Hiện tại bạn không cần quan tâm reducers Users, ta sẽ sử dụng cái này sau.
  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

Tạo animation khi người dụng scroll tới element. Khá hữu ích.

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?

  2. View demo with component DemoReactReveal.

Scroll animted to target - react-scrollchor

Tạo animation khi người dùng click và chuyên tới 1 element nào đó.

Installation

yarn add react-scrollchor

How to use?

  2. View demo with component DemoReactScrollchor.

Datatable with react-table

  1. Xem demo: Demo
  2. Xem implementation trong demo-react-table - Implementation
  3. Ta dùng 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. Mình cũng dùng thêm react-select và react-datepicker với moment. You can view docs for these package here:

VS Code Extensions

Làm việc với react thì không thể thiếu các extension cần thiết nếu bạn đang sử dụng visual studio code (VS Code)
Các bạn chỉ đơn giản install extension và config nếu cần thiết.

Icons, Colors, View

Snippets

Intellisence

Lint Code, Formater

Edit, Preview README - Markdown files

VS Code User Settings

Cũng nên setting một số config cho VS Code, tạo nên coding style chuẩn:
  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,
}
By: viblo.asia

0 nhận xét:

Post a Comment

 

BACK TO TOP

Xuống cuối trang