Bắt đầu với React.js

React.js là một linh hoạt và dựa trên thành phần Thư viện JavaScript cho xây dựng giao diện người dùng tương tác. Đó là được tạo và mở nguồn bởi Facebook và được sử dụng bởi nhiều công ty công nghệ hàng đầu như Dropbox, AirBnB, PayPal và Netflix. React cho phép các nhà phát triển tạo các ứng dụng nặng dữ liệu có thể được cập nhật một cách dễ dàng bởi chỉ hiển thị lại các thành phần cần thiết.

Phản ứng là Xem lớp từ MVC mẫu thiết kế phần mềm, và nó chủ yếu tập trung vào thao tác DOM. Vì ngày nay mọi người đều nói về React, trong bài đăng này, chúng tôi đang xem xét làm thế nào bạn có thể bắt đầu với nó.

Cài đặt React

Bạn có thể cài đặt React với người quản lý gói npm hoặc bằng cách thêm các thư viện cần thiết bằng tay đến trang HTML của bạn. Đó là khuyến cáo sử dụng React với Babel cho phép bạn sử dụng cú pháp ECMAScript6 và JSX trong mã React của bạn.

Nếu bạn muốn cài đặt React bằng tay, các tài liệu chính thức đề nghị sử dụng tệp HTML này. Bạn có thể tải xuống trang bằng cách nhấp vào Tập tin> Lưu trang dưới dạng đào menu trong trình duyệt của bạn. Các tập lệnh bạn sẽ cần (React, React DOM, Babel) cũng sẽ được tải xuống phản ứng-example_files / thư mục. Sau đó, thêm các thẻ script sau vào phần tài liệu HTML của bạn:

Thay vì tải chúng xuống, bạn có thể thêm tập lệnh React từ CDN cũng.

Bạn cũng có thể sử dụng phiên bản rút gọn trong số các tệp JavaScript trên:

Nếu bạn thích cài đặt React với npm, cách tốt nhất là sử dụng Tạo ứng dụng React Github repo được tạo bởi Facebook Incubator - đây cũng là giải pháp mà các tài liệu React khuyên dùng. Ngoài React, nó cũng chứa Webpack, Babel, Autoprefixer, ESLint và các công cụ dành cho nhà phát triển khác. Để bắt đầu, sử dụng các lệnh CLI sau:

 npm cài đặt -g tạo-Reac-app tạo-Reac-app my-app cd my-app npm start

Khi bạn đã sẵn sàng, bạn có thể truy cập ứng dụng React mới của bạn trên lưu trữ nội bộ: 3000 URL:

Nếu bạn muốn đọc thêm về Cách cài đặt React, kiểm tra hướng dẫn cài đặt của các tài liệu.

Phản ứng và JSX

Mặc dù nó không bắt buộc, bạn có thể sử dụng cú pháp JSX trong ứng dụng React của bạn. JSX là viết tắt của JavaScript XML, và nó chuyển mã thành JavaScript thông thường. Ưu điểm lớn của JSX là nó cho phép bạn đưa HTML vào các tệp JavaScript của mình, do đó, nó làm cho việc xác định các phần tử React dễ dàng hơn.

Dưới đây là những điều quan trọng nhất cần biết về JSX:

Thẻ đó bắt đầu bằng chữ thường (trường hợp lạc đà thấp hơn) được hiển thị như các phần tử HTML thông thường.
Thẻ đó bắt đầu bằng chữ hoa (trường hợp lạc đà trên) được hiển thị như các thành phần React.
Mã nào được viết trong vòng cung xoăn được giải thích như JavaScript theo nghĩa đen.

Nếu bạn muốn biết thêm về Cách sử dụng JSX với React kiểm tra trang này từ các tài liệu và cho tài liệu JSX mặc định bạn có thể xem wiki wiki.

Tạo các phần tử React

Phản ứng có một kiến trúc dựa trên thành phần trong đó các nhà phát triển tạo ra linh kiện tái sử dụng để giải quyết các vấn đề khác nhau. Một thành phần React được tạo thành từ một số hoặc nhiều Yếu tố phản ứng đó là các đơn vị ứng dụng React nhỏ nhất.

Dưới đây, bạn có thể thấy một ví dụ đơn giản về phần tử React có thêm nút Click me vào trang HTML. Trong HTML, chúng tôi thêm một

container với "myDiv" ID sẽ là cư trú với phần tử React. Chúng tôi tạo phần tử React của mình trong vòng một

   Chúng tôi kết xuất phần tử React của mình với ReactDOM.render () phương pháp mà mất hai tham số cần thiết, các Yếu tố phản ứng () và thùng chứa của nó (document.getEuityById ('myDiv')). Bạn có thể đọc thêm về Các phần tử React hoạt động như thế nào bên trong “Yếu tố kết xuất” phần của tài liệu.
 Tạo thành phần
 Thành phần phản ứng là các đơn vị UI độc lập, có thể tái sử dụng trong đó bạn có thể dễ dàng cập nhật dữ liệu. Một thành phần có thể được tạo thành từ một hoặc nhiều thành phần React. Đạo cụ là đầu vào tùy ý bạn có thể sử dụng để truyền dữ liệu đến một thành phần. Một thành phần React hoạt động tương tự như các hàm JavaScript - mỗi khi nó được gọi, nó tạo ra một số loại đầu ra.
 Bạn có thể sử dụng một trong hai cú pháp hàm cổ điển hoặc mới Cú pháp lớp ES6 đến định nghĩa một thành phần React. Trong bài viết này, tôi sẽ sử dụng cái sau, vì Babel cho phép chúng tôi sử dụng ECMAScript 6. Nếu bạn quan tâm đến cách tạo một thành phần không có ES6, hãy xem trang Thành phần và Đạo cụ của tài liệu.
 Dưới đây, bạn có thể thấy thành phần phản ứng đơn giản chúng tôi sẽ tạo ra một ví dụ. Đó là một thông báo cơ bản mà người dùng nhìn thấy sau khi đăng nhập vào một trang web. Có ba phần dữ liệu sẽ thay đổi từ trường hợp này sang trường hợp khác: tên người dùng, số lượng tin nhắn và số lượng thông báo, chúng tôi sẽ chuyển những làm đạo cụ.
  
Mỗi thành phần React là một lớp JavaScript mở rộng Phản ứng. lớp cơ sở. Thành phần của chúng tôi sẽ được gọi là Số liệu thống kê vì nó cung cấp cho người dùng một thống kê cơ bản. Đầu tiên, chúng tôi tạo ra Số liệu thống kê lớp học với Chỉ số lớp mở rộng React.Component Lành cú pháp, sau đó chúng tôi đưa nó ra màn hình bằng cách gọi ReactDOM.render () phương thức (chúng ta đã sử dụng phương thức sau trong phần trước).
  Chỉ số lớp mở rộng React.Component render () return (  Xin chào this.props.name, bạn có this.props.notifying thông báo mới và this.props.messages tin nhắn mới. 
 );  ReactDOM.render ( , document.getEuityById ("myStats")); 
 Đối số đầu tiên của ReactDOM.render () phương pháp bao gồm tên của thành phần React của chúng tôi () và đạo cụ của nó (Tên, thông báo, và tin nhắn) với các giá trị của họ. Khi chúng ta khai báo các giá trị của các đạo cụ, các chuỗi sẽ là kèm theo dấu ngoặc kép (như "John Doe") và các giá trị số trong dấu ngoặc nhọn (như 3).
 Lưu ý rằng vì JavaScript, chúng tôi đã sử dụng tên lớp thay vì lớp học để chuyển một thuộc tính lớp cho thẻ HTML (className = "tóm tắt").
 Trang HTML phù hợp như sau:
          
    
 Trong tài liệu React, có nhiều ví dụ thú vị khác về Cách xây dựng & quản lý các thành phần React, và những gì khác để biết về đạo cụ.
 đọc thêm
 Với React, Facebook đã giới thiệu một loại khung mới vào phát triển front-end mà thách thức mẫu thiết kế MV *. Nếu bạn muốn hiểu rõ hơn về cách thức hoạt động của nó và những gì bạn có thể và không thể đạt được với nó, đây là một số bài viết thú vị có thể giúp:
 Bài đăng trên blog của Facebook trên Tại sao họ xây dựng React.
 Bài viết tuyệt vời của Andrew Ray về mặt tốt và mặt xấu của React.
 Codementor trên Làm thế nào so sánh React và AngularJS.
 FreeCodeCamp nghĩ về việc liệu MVC đã chết trên front-end.
 Bài viết của HackerNoon về Làm thế nào để tối ưu hóa hiệu suất liên quan đến React.