React.js: 14 Tools & Tài Nguyên Lập Trình Web

Từ lần đầu được Facebook ra mắt hồi 2013, React.js đã và đang phát triển mạnh mẽ. Đây là dự án nguồn mở được giới thiệu nhiều thứ 5 trên Github. React là framework JavaScript gọn ngẹ dùng để xây dựng giao diện người dùng — ví dụ rõ nết nhất là Facebook và Instagram.

React còn là công cụ có thể thay thế cho các framework MVC, như Angular hoặc Backbone, với cấu trúc rõ ràng hơn và tập trung vào tối ưu hiệu năng. Trong bài viết này, chúng tôi sẽ giới thiệu với các bạn một bộ developer toolkit để giúp bạn đặt chân vào mảnh đất lập trình React.

Tài liệu React.js chính thức từ Facebook

Facebook mang đến cho lập trình viên một bộ tài liệu chi tiết về các khái niệm chính trong React. Bên cạnh tài liệu, bạn còn có thể tìm thấy rất nhiêu hướng dẫn cho công cụ này, và cả một forum riêng cho lập trình viên React. Vì tài liệu này là nguồn mở, bạn có thể edit chúng nếu bạn muốn.

React.js Github repo

Trong React Github repo, bạn luôn có thể xem thử mã nguồn của React bất cứ khi nào cần. Nếu muốn liên tục cập nhật với hiện trạng phát triến hiện nay của công cụ, bạn cũng có thể nhìn vào phần issues, milestones, và latest pull requests. Nếu “bí cách”, bạn cũng có thể nghiên cứu Trouble Shooting Guide một chút.

Hello World starter code

Nếu muốn dùng thử nhanh React, bạn có thể bắt đầu với demo “Hello World” tương tác này trên Codepen. Demo bao gồm tất cả các tất cả các tài nguyên cần thiết và cả starter code nữa. Với sự ra đời của Babel, bạn có thể dùng cả ECMAScript 6 và JSX syntax. Chỉ việc fork pen này, và bạn có thể làm việc thẳng một mạch mà không cần phải tự set up cả môi trường.

React Starter Kit

React Starter Kit là isomorphic web app boilerplate được phát triển từ Node.js, Express, GraphQL, React, và một loạt công cụ phát triển web khác, như Webpack, Babel, và Browsersync. Công cụ cho bạn cùng một nền tảng công nghệ dùng cho frontend stack Facebook và cho phép bạn nhảy ngay vào lập trình React full-stack mà không phải gặp quá nhiều rắc rối.

ReactCSS

ReactCSS giúp bạn thêm style CSS nội dòng trong JavaScript. ReactCSS có hỗ trợ cho React, Redux, React Native (framework để xây dựng native mobile apps với React), autoprefixing, hover, pseudo-elements, và media queries. Bạn có thể nhanh chóng cài npm.

React JSFiddle integration (có và không có JSX)

Đây là sân chơi rất hay cho những ai đang thực hành với React. React JSFiddle integration được host trên JSFiddle, và có hai phiên bản: one with JSX và one without JSX, hãy chọn phiên bản nào phù hợp với bạn.

React style guide generator

Có thể nhanh chóng tạo style guide cho dự án React của mình với React style guide generator dễ sử dụng này. Bạn chỉ việc thêm một chút doc vào file, và generator sẽ lo hết toàn bộ. Công cụ đi kèm readme file chi tiết.

Belle configurable React components

Belle là thư viện React component trang bị cho bạn một bộ React component có thể áp dụng vào project của mình, như “Button”, “Card”, “Spinner”, “Toggle”, “Rating”, nhiều dạng components,… Các components tùy chỉnh được, và hoạt động trên cả di động lẫn destop.

Belle không phải là thư viện React component duy nhất cho bạn, bạn còn có thể tìm được rất nhiều thư viện hay trên Github, như React widgets hoặc Elemental.

React Storybook UI Development Environment

Nếu không dùng thư viện component của người khác mà muốn tự xây dựng cho riêng mình, bạn nên thử React StoryBook, môi trường phát triển UI cho React components. Storybook cho phép bạn phát triển components một cách tương tác. Công cụ đi kèm elaborate documentation, và bạn có thể bắt đầu quá trình phát triển trong Storybook Hub.

React-Bootstrap

React-Bootstrap tích hợp Bootstrap 3 frontend framework mạnh mẽ vào trong React. Đội ngũ phát triển về cơ bản đã xây dựng lại Bootstrap components với React.js. Từ đó cho ra đời code base sạch hơn, lặp lại ít hơn, và hiệu năng cao hơn.

Chú ý rằng repo này vẫn đang được phát triển liên tục, và API sẽ thay đổi trong tương lai. Để xem tình hình phát triện hiện nay, hãy xem thử roadmap của dự án.

React Developer Tools for Chrome

React DevTools for Chrome là tiện ích mở rộng cho Chrome Developer Tools và cho phép bạn kiểm tra bậc cấp của component. Công cụ được facebook xây dựng với nỗ lực hỗ trợ cộng đồng lập trình viên xây dựng ứng dụng React mới. Bạn chỉ cần đơn giản thêm công cụ dưới dạng extension vào trình duyệt của mình. Source code của mã nguồn liên tục được cập nhật trên Github.

React Developer Tools for Firefox

Đây là bộ React Developer Tools do Facebook xây dựng dành riêng cho Firefox, add-on này tương đồng với tiện ích (gần) cùng tên cho Chrome.

React.js Package for Atom

Với Atom React package này, bạn có thể thêm hỗ trợ React vào Atom code editor của mình. Công cụ có các tính năng highlight cú pháp, autocomplete, code snippets, chuyển đổi HTML sang JSX,…

React.js Fundamentals – free online course

Có khá nhiều khóa học hay và tiếp kiệm dạy bạn cách lập trình với React. Tuy nhiên, với khóa React.js Fundamentals, bạn sẽ được học hoàn toàn miễn phí. Khóa học gồm 12 bài, bắt đầu với basics of React, cùng giáo trình khoa học phủ hầu hết tất cả kiến thức quan trọng.