lazarus2019 / learn-reactjs

ReactJS 2021 & 2022

Boilerplate

Create React App (trang đơn)

Dễ dàng upgrade khi có các tính năng mới

• Standard

Vite

react-boilerplate

• Comunity

Gatsby (nội dung tĩnh)

Next.js (NodeJS)

Syntax

Class Component + Life cyles (ngày XƯA)

Function Component + Hooks (>v16.8-2019)

Ui Libs

Reactstrap

• Bootstrap

Marterial UI

Ant Design

Kích thước lớn

React Toolbox

React + Foundation

Semantic UI React

Bit

Custom

Others...

https://viblo.asia/p/15-thu-vien-ui-components-tot-nhat-cho-reactjs-maGK7pDMZj2

https://ehkoo.com/bai-viet/10-thu-vien-ui-components-cho-react

Styles

SCSS + BEM

CSS Modules

Styled Components

UI Lib styles

RebassJS

TailwindCSS

Routing

React Router DOM

React Location

SEO

https://www.youtube.com/watch?v=v49midf_QTI

Add link có

thumbnail + description

• YES --> NextJS
• NO --> ReactJS

Form

Formik

Vấn đề về performance -> render nhiều quá khi form có nhiều controls -> lag (trên mobile)

React Hook Form

• Đi theo hướng uncontrolled components, fix được nhiều vấn đề performance khi form có nhiều controls.

Validation

• Yup

  Phổ biến nhất

• Joi

• Custom

React select

State Management

https://viblo.asia/p/top-5-thu-vien-quan-ly-state-cho-react-3P0lP3EoZox

Redux - Redux Toolkit

RecoilJS

Cách tiếp cận đơn giản

Zustand

Mobx

Akita

API

axios

Hỗ trợ nhiều tiện ích: Interceptor (request & response)

fetch

ReactJS

Create React App | Vite

Functional Component + Hook

UI Lib

Form

• React Hook Form
• Yup

State management

• Redux Toolkit

API

• axios

Ebooks ReactJS

https://blog.freec.asia/tai-lieu-react-js/

Useful React Library (source)

https://www.niemvuilaptrinh.com/article/24-thu-vien-react-cho-phat-trien-website

Xử lý form + validation

• React Hook Form

  https://react-hook-form.com/

• Formik

  https://formik.org/

Drag n Drop

• react-beautiful-dnd

  https://github.com/atlassian/react-beautiful-dnd

• React DnD

  https://react-dnd.github.io/react-dnd/about

Form

• React Datepicker

  https://reactdatepicker.com/

• React Select

  https://react-select.com/home

• React Autosuggest

  http://react-autosuggest.js.org/

Tools

• Recharts

  https://recharts.org/en-US/

• React-pdf

  https://react-pdf.org/

• React Color

  https://casesandberg.github.io/react-color/

• ReactPlayer

  https://github.com/CookPete/react-player

Icons

• React Icons

  https://react-icons.github.io/react-icons

Layout

• React Bootstrap

  https://react-bootstrap.github.io/

• react-burger-menu

  https://github.com/negomi/react-burger-menu

Design

• ReactAdmin

  https://marmelab.com/react-admin/

Management

• React Helmet

  https://github.com/nfl/react-helmet

Testing & Checking

• React Testing Library

  https://testing-library.com/docs/react-testing-library/intro/#this-solution

• Enzyme

  https://enzymejs.github.io/enzyme/

Animtaion Loading

• React Content Loader

  https://skeletonreact.com/

Diagram

• React Flow

  https://reactflow.dev/

Data

• React window

  https://github.com/bvaughn/react-window

Others

• React Markdown

  https://remarkjs.github.io/react-markdown/