{"id":13403830,"url":"https://github.com/huynhsamha/react-configure","last_synced_at":"2025-03-14T08:32:14.571Z","repository":{"id":74245243,"uuid":"119691314","full_name":"huynhsamha/react-configure","owner":"huynhsamha","description":"Necessary configure for create-react-app 🤣🤣🤣","archived":false,"fork":false,"pushed_at":"2020-07-23T01:44:48.000Z","size":6150,"stargazers_count":15,"open_issues_count":0,"forks_count":17,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-07-31T19:42:15.367Z","etag":null,"topics":["code-splitting","create-react-app","moment","react","react-datepicker","react-intl","react-loadable","react-redux","react-router","react-router-dom","react-scrollchor","react-select","react-table","reactjs","redux","redux-thunk","sass"],"latest_commit_sha":null,"homepage":"https://huynhsamha.github.io/react-configure/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/huynhsamha.png","metadata":{"files":{"readme":"README.VN.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-01-31T13:33:29.000Z","updated_at":"2023-06-26T15:36:54.000Z","dependencies_parsed_at":"2024-01-16T10:36:51.003Z","dependency_job_id":"41654891-3323-4b35-81b0-451c38574d51","html_url":"https://github.com/huynhsamha/react-configure","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huynhsamha%2Freact-configure","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huynhsamha%2Freact-configure/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huynhsamha%2Freact-configure/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huynhsamha%2Freact-configure/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/huynhsamha","download_url":"https://codeload.github.com/huynhsamha/react-configure/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243547525,"owners_count":20308718,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code-splitting","create-react-app","moment","react","react-datepicker","react-intl","react-loadable","react-redux","react-router","react-router-dom","react-scrollchor","react-select","react-table","reactjs","redux","redux-thunk","sass"],"created_at":"2024-07-30T19:01:35.198Z","updated_at":"2025-03-14T08:32:14.219Z","avatar_url":"https://github.com/huynhsamha.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-configure\n\nChà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.\nTrong 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](https://github.com/facebook/create-react-app) với các thư viện [redux](https://redux.js.org/docs/basics/UsageWithReact.html), \nreact-redux, \nredux-thunk, \nreact-router, \nreact-router-dom,\nsass, \ncode spliting, \njQuery, \nbootstrap, \nreact-loadable, \nreact-scrollchor, \nreact-intl, \nreact-select, \nreact-datepicker, \nreact-table, \nmoment, \n...\n\n\nĐây là demo về 1 số phần mình làm: [https://huynhsamha.github.io/react-configure/](https://huynhsamha.github.io/react-configure/)\n\n\n\u003c!-- TOC --\u003e\n\n- [Bắt đầu với `create-react-app`](#bắt-đầu-với-create-react-app)\n- [Thiết lập biến môi trường (environment variables)](#thiết-lập-biến-môi-trường-environment-variables)\n- [Post-Processing CSS](#post-processing-css)\n- [CSS Preprocessor (Sass, Less etc.)](#css-preprocessor-sass-less-etc)\n- [Tạo server Node.JS](#tạo-server-nodejs)\n    - [Use `express` to initialization](#use-express-to-initialization)\n    - [Configuration](#configuration)\n    - [Install dependencies package](#install-dependencies-package)\n    - [Install package `cors`](#install-package-cors)\n    - [Start server-client](#start-server-client)\n- [Environment cho react app](#environment-cho-react-app)\n- [Cấu trúc thư mục `src` trong react app](#cấu-trúc-thư-mục-src-trong-react-app)\n    - [Styles](#styles)\n    - [Library and packages](#library-and-packages)\n    - [Utility service](#utility-service)\n    - [Reducers - Actions](#reducers---actions)\n    - [Components](#components)\n        - [Layout Components](#layout-components)\n        - [Common Components](#common-components)\n        - [Pages Components](#pages-components)\n- [jQuery](#jquery)\n    - [Installation](#installation)\n    - [How to use?](#how-to-use)\n    - [Recommend](#recommend)\n- [Bootstrap 3, 4](#bootstrap-3-4)\n    - [Sử dụng cùng với jquery](#sử-dụng-cùng-với-jquery)\n        - [Installation](#installation-1)\n        - [How to use?](#how-to-use-1)\n    - [Sử dụng thông qua React Component - `reactstrap`](#sử-dụng-thông-qua-react-component---reactstrap)\n        - [Installation and Usage](#installation-and-usage)\n- [Font Awesome](#font-awesome)\n    - [Thông qua `index.html`](#thông-qua-indexhtml)\n    - [Sử dụng npm package](#sử-dụng-npm-package)\n- [Animate.css](#animatecss)\n    - [Install and configure](#install-and-configure)\n    - [Custom duration time](#custom-duration-time)\n    - [How to use](#how-to-use)\n    - [Demo](#demo)\n- [`react-router-dom` (router)](#react-router-dom-router)\n- [`react-loadable` (code-splitting)](#react-loadable-code-splitting)\n    - [Installation, Usage](#installation-usage)\n    - [Test Loadable Components - code-splitting](#test-loadable-components---code-splitting)\n- [`react-intl` - API cho format date, number and string](#react-intl---api-cho-format-date-number-and-string)\n    - [Features - các tính năng](#features---các-tính-năng)\n    - [Document](#document)\n    - [Usage in this tutorial](#usage-in-this-tutorial)\n- [Redux: `redux, react-redux, redux-thunk`](#redux-redux-react-redux-redux-thunk)\n    - [Installation](#installation-2)\n    - [Usage](#usage)\n- [Fetch Data API to server node](#fetch-data-api-to-server-node)\n    - [Create `services` to get API](#create-services-to-get-api)\n- [UI Awesome with React Component](#ui-awesome-with-react-component)\n    - [Reveal Component on scroll: use `react-reveal`](#reveal-component-on-scroll-use-react-reveal)\n        - [Installation](#installation-3)\n        - [Support](#support)\n            - [Reveal with React](#reveal-with-react)\n            - [Animated.css with React](#animatedcss-with-react)\n        - [How to use?](#how-to-use-2)\n    - [Scroll animted to target - react-scrollchor](#scroll-animted-to-target---react-scrollchor)\n        - [Installation](#installation-4)\n        - [How to use?](#how-to-use-3)\n- [Datatable with `react-table`](#datatable-with-react-table)\n- [VS Code Extensions](#vs-code-extensions)\n    - [Icons, Colors, View](#icons-colors-view)\n    - [Snippets](#snippets)\n    - [Intellisence](#intellisence)\n    - [Lint Code, Formater](#lint-code-formater)\n    - [Edit, Preview README - Markdown files](#edit-preview-readme---markdown-files)\n- [VS Code User Settings](#vs-code-user-settings)\n\n\u003c!-- /TOC --\u003e\n\n\n\n# Bắt đầu với `create-react-app`\nNế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.\n\nTrước tiên, bạn nên cài package `create-react-app`  mức global từ npm .\n`npm install create-react-app -g` \nhoặ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.\n\n1. Tạo mới project: `create-react-app react-app`\n2. `npm start` or `yarn start`: start môi trường dev. \n3. `npm build` or `yarn build`  build production.\n\nTrong 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`.\n\n\n\n\n# Thiết lập biến môi trường (environment variables)\nTạ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.\n\n1. Trong terminal tại root của project: `touch .env .env.development .env.production`\n2. In `.env.development`: `REACT_APP_ENV=development`\n3. In `.env.production` : `REACT_APP_ENV=production`\n\n**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.\n\n\n\n\n\n\n\n# Post-Processing CSS\nKhi 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.\nĐây là lời trích từ document của react:\n\n\u003e This project setup minifies your CSS and adds vendor prefixes to it automatically through Autoprefixer so you don’t need to worry about it.\n\n\n\n\n\n\n\n# CSS Preprocessor (Sass, Less etc.)\nNế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ị.\n`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:\n\n1. In terminal: `yarn add node-sass-chokidar npm-run-all`\n2. In file `package.json`:\n```json\n{\n    \"scripts\": {\n    -   \"start\": \"react-scripts start\",\n    -   \"build\": \"react-scripts build\",\n    +   \"start\": \"npm-run-all -p watch-css start-js\",\n    +   \"build\": \"npm-run-all build-css build-js\",\n    +   \"start-js\": \"react-scripts start\",\n    +   \"build-js\": \"react-scripts build\",\n    +   \"watch-css\": \"npm run build-css \u0026\u0026 node-sass-chokidar src/ -o src/ --watch --recursive\",\n    +   \"build-css\": \"node-sass-chokidar src/ -o src/\",\n  }\n}\n```\n3. In file `.gitignore`:\n\n```\n# auto generated files (sass, less, ...)\nsrc/**/*.css\n```\n\nLúc này khi ta start 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. \n\nCò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.\n\n\n\n\n\n\n\n\n\n# Tạo server Node.JS\nNhiều lúc, ta cũng muốn sử dụng node cho thằng react :)\n## Use `express` to initialization\n\n```bash\nmkdir server\ncd server\nexpress\n```\n\n## Configuration\n\n1. Rename `app.js` to `server.js`\n2. Join `server.js` and `./bin/www`\n3. Move `server.js` to root app\n4. Insert dependencies in `package.json` (which is generated by `express`) to `package.json` in root (which is generated by `create-react-app`)\n5. Remove dependencies not use (`serve-favicon`, `jade`, `ejs`, etc.)\n6. Remove all file in `server`, execpt `routes/index.js`\n7. Correct and customize file `server.js`\n\n\n## Install dependencies package\n\n`yarn`\n\n## Install package `cors`\n\nTa install package `cors` để cross từ port 3000 localhost tới port 4200 localhost.\n+ `localhost:3000` (client-side, là port thằng react)\n+ `localhost:4200` (server-side, là port của node express)\n\n`yarn add cors`\n\n## Start server-client\n\n`yarn start` or `npm start`: start client side (react): `localhost:3000`\n\n`node server`: start server-side (node express): `localhost:4200`\n\n\n\n\n\n\n\n\n\n# Environment cho react app\nLú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).\n\nNhư đã 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.\n\n1. Create environment files:\nIn your terminal:\n```bash\nmkdir src/environments\ncd src/environments\ntouch env.development.js env.production.js index.js\n```\n2. Edit the files as source code. `baseUrl` is url to server.\n\n\n\n\n\n\n\n# Cấu trúc thư mục `src` trong react app\n\n## Styles\nTạo thư mục `styles` trong `src/`  để chứa các biến variables, mixins, classes, common styles, or theme, etc. cho app react:\n\t+ `_variables.scss`: khai báo các variables .\n\t+ `_mixins.scss`: khai báo các  mixins (dùng sass hoặc less)\n\t+ `_classes.scss`: khai báo 1 số class hữu ích.\n\t+ `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\t+ 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`\n\n## Library and packages\nTrong 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, ...\n+ Tạo file `index.js` trong `lib` để import các file trong thư mục này\n+ 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';`\n\n\n## Utility service\nTa 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.\n\n## Reducers - Actions\nNế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.\n\n## Components\nTa tạo `components` để chứa các components của app, trong đó ta chia ra thành:\n\n### Layout Components\nTạ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.\n\n\n### Common Components\nTa 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`, ...\n\n### Pages Components\nTạ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`,..\n\n\n\n\n\n\n\n# jQuery\n\n## Installation\n1. In terminal: `yarn add jquery`\n2. In terminal: `touch src/lib/jquery.js`: tạo file jquery config\n3. COnfig file này như sau:\n\n```js\nimport $ from 'jquery';\n\n// config jquery variables for other lib use jQuery (such as bootstrap)\nwindow.$ = $;\nwindow.jQuery = $;\n```\n\n## How to use?\n1. In `lib/index.js`, import by: `import './jquery';`\n2. In `index.js` at ngoài app,  `import './lib';` (nếu như bạn chưa import).\n3. Trong mỗi component, để sử dungj jquery mà react không báo lỗi, ta cần import: `import $ from 'jquery';`\n4. jquery chỉ sử dụng kể từ `componentDidMount()` trong vòng đời của 1 component react:\n5. [View Demo here](https://huynhsamha.github.io/react-configure/jquery)\n6. [View Implementation here](https://github.com/huynhsamha/react-configure/blob/master/src/components/pages/demo-jquery/DemoJquery.jsx)\n\n\n```javascript\n  componentDidMount() {\n    // jQuery should declare at here\n    $(document).ready(() =\u003e {\n      $('#alert').click(() =\u003e alert('This is alert be jQuery'));\n    });\n  }\n```\n\n\n## Recommend\nChỉ nên dùng jquery khi thực sự cần thiết. vì react đã hỗ trợ khá đủ.\n\n\n\n\n\n\n# Bootstrap 3, 4\n\n\n## Sử dụng cùng với jquery\n### Installation\n1. In terminal: `yarn add bootstrap` (thêm @version cho version bạn sử dụng)\n2. In terminal: `mkdir src/lib` (nếu đã tạo thì bỏ qua)\n3. In terminal: `touch src/lib/bootstrap.js`\n4. Cấu hình file này như sau (mình đang dùng bootstrap 4):\n\n```javascript\nimport 'bootstrap/dist/css/bootstrap.min.css';\nimport 'bootstrap/dist/js/bootstrap.bundle.min.js';\n```\n\n### How to use?\n1. In `lib/index.js`, import by: `import './bootstrap';`\n2. In `index.js` at root, `import './lib';` (if you don't have).\n3. Trong component, ta có thể sử dụng bootstrap 3, 4 như document của bootstrap.\n4. View demo with component `DemoBootstrap`.\n5. [View Demo here](https://huynhsamha.github.io/react-configure/bootstrap)\n6. [View Implementation here](https://github.com/huynhsamha/react-configure/blob/master/src/components/pages/demo-bootstrap/DemoBootstrap.jsx)\n\n\n\n\n## Sử dụng thông qua React Component - `reactstrap`\n`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. \nBạn có thể google package này để xem qua doc của nó.\n\nCũ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.\n\n### Installation and Usage\n1. In terminal: `yarn add reactstrap@next`\n2. Only import Component to use as reactstrap document\n3. View demo with component `DemoReactstrap`.\n4. [View Demo here](https://huynhsamha.github.io/react-configure/reactstrap)\n5. [View Implementation here](https://github.com/huynhsamha/react-configure/blob/master/src/components/pages/demo-reactstrap/DemoReactstrap.jsx)\n\n\n\n\n\n\n\n\n# Font Awesome\n## Thông qua `index.html`\nTa có thể include trực tiếp thông qua `index/html` bằng cdn, hoặc download rồi include vào.\n\n## Sử dụng npm package\n\n1. In terminal: `yarn add font-awesome`\n2. Create file `lib/font-awesome.js` and add line `import 'font-awesome/css/font-awesome.min.css';`\n3. In `lib/index.js`, import by: `import './font-awesome';`\n4. In `index.js` at root, `import './lib';` (if you don't have).\n\n\n\n\n\n\n\n\n# Animate.css\n## Install and configure\n1. `yarn add animate.css`\n2. In `lib/` tạo `animate-css.js` và thêm `import 'animate.css';`\n3. In `index.js`, import bằng `import './animate-css';`\n\n## Custom duration time\n1. Tùy chỉnh thời gian animation bằng scss config trong  `style/`:\n2. Tạo file  `_animate.scss` như source code\n3. In `index.scss`: `@import './animate.scss';`\n4. File này sẽ tạo ra các class sau:\n```\n.animated.duration-100\n.animated.duration-200\n...\n.animated.duration-1100\n.animated.duration-1200\n...\n.animated.duration-3000\n```\n\n## How to use\nExample:\n```html\n\u003c!-- In/Out default --\u003e\n\u003cdiv class=\"animated slideInUp\"\u003eABCDEFGHIJKLMNOP\u003c/div\u003e\n\u003cdiv class=\"animated slideOut\" \u003eABCDEFGHIJKLMNOP\u003c/div\u003e\n\u003cdiv class=\"animated fadeInDown\" \u003eABCDEFGHIJKLMNOP\u003c/div\u003e\n\u003c!-- In/Out custom duration --\u003e\n\u003cdiv class=\"animated fadeInUp duration-500\" \u003eABCDEFGHIJKLMNOP\u003c/div\u003e\n\u003cdiv class=\"animated flipIn duration-1000\" \u003eABCDEFGHIJKLMNOP\u003c/div\u003e\n\u003cdiv class=\"animated slideOutDown duration-700\" \u003eABCDEFGHIJKLMNOP\u003c/div\u003e\n\u003c!-- Infinite default/custom duration --\u003e\n\u003cdiv class=\"animated flash infinite\" \u003eABCDEFGHIJKLMNOP\u003c/div\u003e\n\u003cdiv class=\"animated flash infinite duration-1200\" \u003eABCDEFGHIJKLMNOP\u003c/div\u003e\n```\n\n\n## Demo\n+ View demo at component `DemoAnimateCss`\n+ [View Demo here](https://huynhsamha.github.io/react-configure/animate-css)\n+ [View Implementation here](https://github.com/huynhsamha/react-configure/blob/master/src/components/pages/demo-animate-css/DemoAnimateCss.jsx)\n\n\n\n\n\n\n\n\n# `react-router-dom` (router)\n`react-router-dom` được sử dụng cho 1  Single Page Application (SPA).\n\n1. In terminal: `yarn add react-router-dom`\n2. Bạn xem implement trong `components/layout/body`\n3. Cũng có thể xem ở `components/pages/demo-react-router`\n4. Documents is available at [React Router Dom](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-dom)\n\n4. [View Demo here](https://huynhsamha.github.io/react-configure/react-router)\n5. [View Implementation here](https://github.com/huynhsamha/react-configure/blob/master/src/components/pages/demo-react-router/DemoReactRouter.jsx)\n\n\n\n\n\n\n\n# `react-loadable` (code-splitting)\n`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.\n\ncreate-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,\n## Installation, Usage\n\n`react-loadable` hỗ trợ code-splitting:\n+ `create-react-app` sẽ bundle script file mới, khi được gọi, nó mới load file này.\n\n1. In terminal: `yarn add react-loadable react-router-dom`\n2. Tạo 1 Loading component (view components/common/loading/)\n3. Khi sử dụng Loadable với loading component, các thuộc tính cần quan tâm cho component này:\n    `{ isLoading: true, pastDelay: false, timedOut: false, error: null }`\n4. View `components/page/demo-loadable-component` to sample implement.\n5. Component `DemoLoadableComponent` (is not loadable) and `LoadableDemoComponent` (is loadable)\n\n## Test Loadable Components - code-splitting\n1. Inspect element trong trình duyệt\n2. Chọn tab network\n3. Click filter JS\n4. Refresh page\n5. lúc đầu chỉ thấy file `bundle.js` và 1 số file js khác.\n6. Click component hỗ trợ loadable, ta sẽ thấy `*.chunk.js` is loaded. Đây là lazy loading component\n4. [View Demo here](https://huynhsamha.github.io/react-configure/react-loadable)\n5. [View Implementation here](https://github.com/huynhsamha/react-configure/blob/master/src/components/pages/demo-react-router/DemoReactRouter.jsx)\n\n\n\n\n\n\n\n\n\n# `react-intl` - API cho format date, number and string\nInternationalize 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).\n\n## Features - các tính năng\n+ Display numbers with separators.\n+ Display dates and times correctly.\n+ Display dates relative to \"now\".\n+ Pluralize labels in strings.\n+ Support for 150+ languages.\n+ Runs in the browser and Node.js.\n+ Built on standards.\n\n## Document\nYou can view document at here: [https://github.com/yahoo/react-intl](https://github.com/yahoo/react-intl)\n\n\n## Usage in this tutorial\n1. In `index.js`, ta import và dùng provider cho App component:\n\n```jsx\nimport { IntlProvider } from 'react-intl';\n\nReactDOM.render(\n\n  \u003cProvider store={store}\u003e\n    \u003cIntlProvider locale=\"en\"\u003e\n      \u003cApp /\u003e\n    \u003c/IntlProvider\u003e\n  \u003c/Provider\u003e,\n\n  document.getElementById('root')\n);\n```\n\n2. 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.\n\n\n\n\n\n\n\n\n\n# Redux: `redux, react-redux, redux-thunk`\nRedux là 1 kỹ thuật ta không thể bỏ qua khi làm việc với react.\n## Installation\n`yarn add redux react-redux redux-thunk`\n\n## Usage\n1. In `src`, tạo:\n    + `actions/action-types.js`: định nghĩa tên action\n    + `actions/index.js`: định nghĩa các action\n    + `reducers/`: khai báo các reducer\n    + `reducers/[name].js`: định nghĩa các action cụ thể.\n    + `reducers/index.js`: combine các reducer của redux, sau đó sẽ được createStore.\n\n2. In `index.js`: \n    + `import { Provider } from 'react-redux';`: dùng Provider để store redux\n    + `import { createStore, applyMiddleware } from 'redux';`: dùng createStore và middleware `thunk` cho createStore\n    + `import thunk from 'redux-thunk';`: middleware cho createStore, support async function\n    + `import allReducers from './reducers';`: reducers sau khi combined\n    + `const store = createStore(allReducers, applyMiddleware(thunk));`: createStore với combined reducer, và apply middleware thunk\n    + 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.\n\n3. In `reducers/index.js`: combine reducers:\n\t+ In this tutorial, I demo with Items and Users (users is used for other section demo).\n```js\nimport { combineReducers } from 'redux';\n\nimport Items from './items';\nimport Users from './users';\n\nconst reducers = combineReducers({\n  Items,\n  Users\n});\n\nexport default reducers;\n```\n\n4. [View Demo here](https://huynhsamha.github.io/react-configure/redux)\n5. [View Implementation here](https://github.com/huynhsamha/react-configure/blob/master/src/components/pages/demo-redux/DemoRedux.jsx)\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n# Fetch Data API to server node\n## Create `services` to get API\n1. `mkdir src/services` (if you have not)\n2. `touch db-service.js auth-service.js` (db- to get database, auth- to authentication user)\n3. Example with `db-service.js`:\n    + `import Env from './../environments';`: to get `baseUrl` with environments\n    + `export default class DbService` as static class\n    + set baseUrl to get API:\n```jsx\nstatic baseUrl() { return Env.baseUrl; }\nstatic parseUrl(url) { return DbService.baseUrl() + url; }\n```\n\nExample `get` API:\n```js\nstatic getItems = () =\u003e {\n    let url = DbService.parseUrl('/api/items');\n    console.log(url);\n    return fetch(url).then(res =\u003e res.json());\n}\n```\n\nExample `Post` API:\n```js\n static addItem = (item) =\u003e {\n    let url = DbService.parseUrl('/api/items');\n    return fetch(url, {\n        method: 'POST',\n        headers: {\n            'Accept': 'application/json',\n            'Content-Type': 'application/json'\n        },\n        body: JSON.stringify(item)\n    }).then(res =\u003e res.json());\n}\n```\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n# UI Awesome with React Component\n\n\n## Reveal Component on scroll: use `react-reveal`\n\nTạo animation khi người dụng scroll tới element. Khá hữu ích.\n\n### Installation\n`yarn add react-reveal` \n\n### Support\n\n#### Reveal with React\n```\nFade\nFlip\nRotate\nZoom\nBounce\nSlide\nRoll\n\nleft/right/top/bottom\nfadeOut\n```\n#### Animated.css with React\n```\nJump\nFlash\nHeadShake\nJello\nPulse\nRubberBand\nShake\nSpin\nSwing\nTada\n```\n\n### How to use?\n1. Use http://www.react-reveal.com/examples/.\n2. View demo with component `DemoReactReveal`.\n\n4. [View Demo here](https://huynhsamha.github.io/react-configure/react-reveal)\n5. [View Implementation here](https://github.com/huynhsamha/react-configure/blob/master/src/components/pages/demo-react-reveal/DemoReactReveal.jsx)\n\n\n\n\n\n\n\n\n\n## Scroll animted to target - react-scrollchor\n\nTạo animation khi người dùng click và chuyển tới 1 element nào đó.\n\n### Installation\n`yarn add react-scrollchor` \n\n\n### How to use?\n1. Use https://github.com/bySabi/react-scrollchor\n2. View demo with component `DemoReactScrollchor`.\n\n4. [View Demo here](https://huynhsamha.github.io/react-configure/react-scrollchor)\n5. [View Implementation here](https://github.com/huynhsamha/react-configure/blob/master/src/components/pages/demo-react-scrollchor/DemoReactScrollchor.jsx)\n\n\n\n\n\n\n\n# Datatable with `react-table`\n1. Xem demo: [Demo](https://huynhsamha.github.io/react-configure/react-table)\n2. Xem implementation trong  [`demo-react-table` - Implementation](https://github.com/huynhsamha/react-configure/blob/master/src/components/pages/demo-react-table/DemoReactTable.jsx)\n3. Ta dùng [`react-table`](https://react-table.js.org/#/story/readme) with features:\n\t+ Lightweight at 11kb (and just 2kb more for styles)\n\t+ Fully customizable (JSX, templates, state, styles, callbacks)\n\t+ Client-side \u0026 Server-side pagination\n\t+ Multi-sort\n\t+ Filters\n\t+ Pivoting \u0026 Aggregation\n\t+ Minimal design \u0026 easily themeable\n\t+ Fully controllable via optional props and callbacks\n4. Mình cũng dùng thêm `react-select` và `react-datepicker` với `moment`. You can view docs for these package here:\n\t+ [`react-select` - Demo](http://jedwatson.github.io/react-select/)\n\t+ [`react-select` - Docs](https://github.com/JedWatson/react-select)\n\t+ [`react-datepicker` - Demo](https://reactdatepicker.com/)\n\t+ [`react-datepicker` - Docs](https://github.com/Hacker0x01/react-datepicker)\n\n\n\n\n\n\n\n\n\n\n# VS Code Extensions\nLà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)\n\nCác bạn chỉ đơn giản install extension và config nếu cần thiết.\n\n## Icons, Colors, View\n- [vscode-icons](https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons)\n- [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)\n\n## Snippets\n- [ES7 React/Redux/GraphQL/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)\n- [JavaScript (ES6) code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)\n- [Bootstrap 3 Snippets](https://marketplace.visualstudio.com/items?itemName=wcwhitehead.bootstrap-3-snippets)\n- [Bootstrap 4 \u0026 Font awesome snippets](https://marketplace.visualstudio.com/items?itemName=thekalinga.bootstrap4-vscode)\n- [Font-awesome codes for html](https://marketplace.visualstudio.com/items?itemName=medzhidov.font-awesome-codes-html)\n- [Font-awesome codes for css](https://marketplace.visualstudio.com/items?itemName=medzhidov.font-awesome-codes-css)\n- [HTML Snippets](https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets)\n- [HTML CSS suppport](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css)\n\n## Intellisence\n- [npm](https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script)\n- [npm Intellisence](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense)\n- [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)\n- [SCSS IntelliSence](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss)\n- [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)\n- [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)\n- [IntelliSense for CSS class names](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion)\n\n## Lint Code, Formater\n- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)\n- [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)\n- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)\n- [TSLint](https://marketplace.visualstudio.com/items?itemName=eg2.tslint)\n- [Sass](https://marketplace.visualstudio.com/items?itemName=robinbentley.sass-indented)\n- [Sass Formatter](https://marketplace.visualstudio.com/items?itemName=sasa.vscode-sass-format)\n- [Beautify css/sass/scss/less](https://marketplace.visualstudio.com/items?itemName=michelemelluso.code-beautifier)\n\n\n## Edit, Preview README - Markdown files\n- [Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)\n- [Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)\n- [Markdown PDF](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf)\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n# VS Code User Settings\nCũng nên setting một số config cho VS Code, tạo nên coding style chuẩn:\n\n1. Enter `Ctrl + Shift P`\n2. Search `user settings`\n3. Choose `Preferences: Open User Settings` and enter.\n4. Edit your file `User Settings` by following lines:\n(you can search in `Default Settings` and customize your style)\n\n```json\n{\n    \"workbench.iconTheme\": \"vscode-icons\",\n    \"workbench.startupEditor\": \"newUntitledFile\",\n    \"window.zoomLevel\": 0,\n    \"editor.fontSize\": 13,\n    \"eslint.autoFixOnSave\": true,\n    \"tslint.autoFixOnSave\": true,\n    \"editor.formatOnSave\": false,\n    \"editor.renderWhitespace\": \"boundary\",\n    \"editor.quickSuggestions\": {\n        \"other\": true,\n        \"comments\": true,\n        \"strings\": true\n    },\n    \"terminal.integrated.cursorStyle\": \"line\",\n    \"terminal.integrated.fontSize\": 13,\n    \"terminal.integrated.fontFamily\": \"\",\n    \"vsicons.projectDetection.autoReload\": true,\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuynhsamha%2Freact-configure","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhuynhsamha%2Freact-configure","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuynhsamha%2Freact-configure/lists"}