Những điều người mới học Reactjs nên biết

24104

Trong bài này mình sẽ giới thiệu cho ai mới học Reactjs về những điều cần biết khi bắt đầu học.

Đầu tiên chúng ta sẽ tìm hiểu React là gì?

  • React là 1 thư viện của Facebook giúp render ra phần view, nó không phải là 1 framework js nào hết.
  • React hỗ trợ việc xây dựng những thành phần (components) UI có tính tương tác cao, có trạng thái và có thể sử dụng lại được.
  • React được xây dựng xung quanh các component.
  • React không chỉ hoạt động trên phía client, mà còn được render trên server và có thể kết nối với nhau…

Có thể bạn quan tâm:

Một vài khái niệm nâng cao trong React.js

Bí kíp toàn thư về React mà bạn cần phải biết (phần 1)

Phần cơ bản

  • Thành phần cơ bản của React được gọi là components . Syntax để viết HTML sử dụng Javascript để render:

JSX

  • Đoạn Javascript trên được gọi là JSX và nó là syntax chuyển từ Javascript XML. JSX cho phép bạn viết Javascript theo phong cách HTML.
  • Nếu không sử dụng jsx trên thì js sẽ là thế này:

Component & Props

Ví Dụ:

  • Phương thức createClass nhận vào 1 tham số, nó là đối tượng mô tả đặc tính của component và nó gồm tất cả các phương thức để hình thành nên component.
  • Phương thức quan trọng nhất là render, phương thức này được trigger khi component đã sẵn sàng để được render lên trên page.
  • Khi sử dụng components của mình, chúng ta có thể thêm attributes gọi là props. Những attributes này được gọi ra trong components bằng this.props và có thể được sử dụng trong method render để render dữ liệu động.

State

  • State được thiết lạp sử dụng method setState, gọi setState kích hoạt cập nhật UI và gắn liền với hoạt động của React . Nếu chúng ta muốn thiết lập một trạng thái ban đầu trước khi có tương tác thì ta có thể sử dụng method getInitialState.

Ví Dụ:

Events

  • Danh sách các SyntheticEvent trong reactjs
    1. boolean bubbles
    2. boolean cancelable
    3. DOMEventTarget currentTarget
    4. boolean defaultPrevented
    5. number eventPhase
    6. boolean isTrusted
    7. DOMEvent nativeEvent
    8. void preventDefault()
    9. boolean isDefaultPrevented()
    10. void stopPropagation()
    11. boolean isPropagationStopped()
    12. DOMEventTarget target
    13. number timeStamp
    14. string type
  • Chúng ta có thể sử dụng các event preventDefault, stopPropagation. Từ Reactjs v0.12 thì không dùng cách return false ở event handler để stop event propagation. Thay vào đó ta dùng e.stopPropagation() hoặc e.preventDefault() để thực hiện
  • Đây là ví dụ về event handler:

  • onClick={this.onClick} : bind event click với event handler là onClick. Bên trong onClick, Reactjs bind this với Component instance.

Kết hợp với Redux

React chỉ là View, nên việc kết hợp với Redux, Flux, hay bất cứ mô hình luồng dữ liệu là cần thiết. Các bạn có thể tìm hiểu rất nhiều tài liệu về Redux là gì? tại đây.

Việc làm Reactjs giờ lương toàn nghìn đô không. Anh em vào tham khảo thêm.

 

CHIA SẺ