React JS hay React là một thư viện Javascript mã nguồn mở rất phổ biến hiện nay. Nó được maintained và phát triển thường xuyên bởi Facebook và một cộng đồng cực kỳ hùng hậu. React được coi như là một trong những thư viện tốt nhất trong những năm gần đây để phát triển GUI dựa trên component. Dưới đây là tổng quan về lộ trình trở thành React developer
Video chi tiết lộ tr trở thành React developer
Những thứ cơ bản
HTML
Đầu tiên và cũng là kỹ năng quan trọng nhất mà mọi lập trình viên web phải biết. Nó sẽ giúp chúng ta tạo cấu trúc cho trang web.
CSS
Nền móng thứ 2 và cũng rất quan trọng là CSS, nó sẽ giúp trang web của bạn trở nên đẹp đẽ hơn.
Javascript
JS cũng là một phần không thể thiếu, nó sẽ giúp trang web của bạn có tính tương tác nhiều hơn.
- Làm quen với các cú pháp, thao tác cơ bản trên DOM.
- Học các cơ chế cơ bản của JS (Hoisting, Event Bubbling, Prototyping).
- Tạo vài hàm AJAX, học các tính năng mới (ECMA Script 6+)
- Làm quen với thư viện JQuery
Kỹ năng lập trình chung
- Hãy học về GIT, tạo một vài repo trên github, chia sẻ code vói những người khác.
- Hiểu về giao thức HTTP(S), các phuơng thức Request (GET, POST, PUT, PATCH, DELETE, OPTIONS).
- Search Google thật nhiều (bạn không nhìn nhầm đâu, tìm kiếm cũng là một kỹ năng raats quan trọng nếu muốn trở thành một lập trình viên tốt đó và không có gì tốt hơn để cải thiện kỹ năng bằng việc thực hành)
- Làm quen với terminal và học cách configure shell (bash, zsh, fish).
- Đọc vài cuốn sách về thuật toán và cấu trúc data.
- Thêm vài cuốn nữa về design patterns.
Reactjs
Nên học ở trên trang chủ của Reactjs
Làm quen với các công cụ
Để trở thành lập trình viên React, bạn nên dành thời gian để học và làm quen với một số công cụ mà bạn sẽ sử dụng trong quá trình lập trình web như công cụ built, unit test, debugg,…
Package Managers
- npm
- yarn
- pnpm
Task Runner
- npm script
- gulp
- Webpack
- Rollup
- Parcel
Styling
CSS Preprocessor
CSS Preprocessor sẽ giúp bạn tạo CSS từ cú pháp của chính Preprocessor đó. Preprocessor sẽ giúp CSS có tổ chức, trật tự hơn nhiều
- Sass/CSS
- PostCSS
- Less
- Stylus
CSS FrameWorks
CSS FrameWorks là thư viện code giúp tóm tắt các thiết kế web phổ biến và giúpchúng ta triển khai các thiết kế này dễ dàng hơn. Nói một cách dễ hiểu, CSS framework là một tập hợp các style-sheet CSS đã được chuẩn bị sẵn và sẵn sàng để sử dụng.
- Bootstrap
- Materialize, Material UI, Material Design Lite
- Bulma
- Semantic UI
CSS Architecture
- BEM * CSS Modules
- Atomic
- OOCSS
- SMACSS
- SUITCSS
CSS trong JS
- Styled Components
- Radium
- Emotion
- JSS
- Aphrodite
Quản lý State
- Component State/Context API
- Redux
- MobX
- Recoil
Type Checker
- PropTypes
- TypeScript
- Flow
Thư viện Form helper
- Redux Form
- Formik
- Formsy
- Final Form
Routing
Component là nhân tố chính cho sự mạnh mẽ của React và Routing component là một phần thiết yếu của bất kỳ ứng dụng web nào.
- React-Router
- Router5
- Redux-First Router
- Reach Router
API clients
- REST
- GraphQL
Một số thư viện hữu dụng
- Lodash
- Day.js
- Moment
- classnames
- Numeral
- RxJS
- ImmutableJS
- Ramda
Thư viện và Framworks ReactJS UI
- Material UI
- React Bootstrap
- ReactStrap
- Ant Design
- Blueprint JS
- Evergreen
- Storybook
Testing
Testing luôn là kỹ năng thiết yếu cho mọi lập trình viên
Unit testing
- Jest
- React testing library
- Enzyme
- Sinon
- Mocha
- Chai
- AVA
- Tape
End to End test
- Selenium
- Webdriver
- Cypress
- Puppeteer
- Cucumber.js
- Nightwatch.js
Integration test
- Karma
Internationalization
Cả 2 thử viện này đều cung cấp cho React component và API khả năng format lại ngày tháng, chuỗi, số và cả việc chuyển đổi ngôn ngữ,…
- React Intl
- React i18next
Server side rendering
React component bây giờ sẽ được render ở phía server và output HTML sẽ được chuyển đến cho client hoặc brower.
- Next.js
- After.js
- Rogue
- Frotinity
Thư viện giúp tạo static site
Bạn có thể sử dụng Gatsby để tạo một trang web trải ngiệm đựoc cá nhân hóa và đã đựoc đăng nhập. Chúng kết hợp dữ liệu của bạn với JavaScript và tạo ra nội dung HTML có định dạng khá chuẩn.
- Jamstack
- Gatsby