reactJS,JSX
reactjs
44
redux
14
JSX
1
White

Nguyen The Vinh viết ngày 01/02/2019

alt
ReactJS là một thư viện của javaScript, nó được xây dựng và phát triển bởi facebook, được dùng phổ biến để tạo xậy dựng giao diện người dùng. Năm 2013 nó được xây dựng bởi facebook, nó sẽ giúp chúng ta giải thích các vấn đề về các cái trang web có quy mô lớn và xử lý dữ liệu của các trang web. Thì lần đầu triển khai của facebook là 2011 sau đó là đến intergram, sau đó nó open soure tại năm 2013. nó giúp ta xây dựng ứng dụng single page application. đối với các loại web truyền thông như php, .NET ,.. Mỗi lần các bạn request thì nó sẽ trả về toàn bộ trăng web bằng HTML, Còn đối với single page application thì chỉ request lần đầu và trong các lần sau nó chỉ sữa lại những phần nào cần thiết thôi, nó giúp ta giảm thời gian chuyển tải. ReactJS không đi kèm với thư viện nào khác , cách viết mã của nó khá giống HTML . code của reactJS rất là dễ đọc và dễ bảo trì . ReactJS hỗ trợ chúng ta xây dựng các cái components có các thuộc tính tương tác cao , và có thể sử dụng nhiều lần

1. dùng state state,props,LifeCycle

State
Về state ,nó là một nơi lữu trữ những dữ liệu tạm thời , khi refesh tại web thì data sẽ bị xóa đi,những nó cho phép chugns ta truy cập nó mọi nơi trong file react đó.
=>State là một nơi lưu trữ được sử dụng rất thường xuyên trong việc lữu trữ biến, nó có thể thay đổi giá trị của biến rát hay. đây là VD về cách dùng state
alt text
nguồn reactjs.org

  • State còn có thể lữu trữ nhiều thể loại biến như sau : alt text
  • Ngoài ra chúng ta có thể thay đổi dữ liệu bằng setState()???
  • alt text
  • khi kết hợp state vào dự án chúng ta thì rất dễ nhưng để quản lý cũng như sử dụng state là cả vấn đề với mình =)) vì nó khá là loạn khi mình tiếp xúc với nhiều biến. cái đấy là mình cần phải làm quen khi mình làm dự án

props
Đến phấn thú vị rồi nè ! props được mình coi như là cái để mình có thể chuyển data từ file này sang file khác , nó là cái phương tiện giúp ta lưu thông code .Nó rất quạn trong các dự án lớn, vì thường trong dự án chúng ta thường chia ra nhiều file để dễ quản lý thường thì một component thì nó tương ứng với một file mà chúng ta create ,còn có loại file bao các loại file con tức là các file con sẽ gửi tín hiệu đến các file boa này rồi từ nó lại send đến main file. thường đấy là một cấu trúc của mọt trang web đơn giản mà ít component. thường mình dùng props để chuyển dữ liệu đi hoặc là truyền sự kiện về main file

Truyền data qua props

  • loại này dùng không khó , khi bên main file import và call child component, trong component được gọi đó ta sẽ đặt một cái props như sau, ví dụ của mình ở đây là nhé
 <Task TaskEdting = {this.state.TaskEdting}>
  • khi mình call như vậy thì bên file Task sẽ nhận một cái props có tính global ,chúng ta có thể call nó bằng cái code như sau : (với condition là bên main file phải import file Task rồi )
TaskEdit=()=>{
console.log(this.props.TaskEdting);
}
  • nếu State TaskEdting ở bên main file có value là: true thì nó sẽ log ra "true" ở dạng string và log ở file Task.

Truyền event và data qua props

  • loại này nó phức tạp hơn một xúy vì nó liên quan đến hàm. loại này thường dùng phổ biến hơn ở các trang web sử dụng react mà có nhiều tác vụ vì nó chuyên xử lý các sự kiện như click,hover,double click.... . Mình sẽ đưa ra một ví dụ về cái catch event này : alt text
  • đây là cách chúng ta có thể tạo lập event props ở đây là app.js nhé ! alt text
  • chúng ta sẽ tạo lâp một cái function xử lí event ở app.js nhé những ở bên TaskList.js chúng ta cần làm như sau: alt text
  • chúng ta sẽ dùng hàm để di chuyển event từ TaskList đến app.js
  • khi chúng ta kết hợp props vào dự án sẽ gây ra rất nhiều rắc rối, nên chúng ta cần làm quen với việc đó

LifeCycle

  • Tóm tắt : lifeCycle là một số hàm có sẵn của reactjs nó được gọi khi file gọi nó đươc thay đổi tùy vào hàm.

Một số lifeCycle cơ bản các bạn có thể xem ở đây.

=> Có rất nhiều kiến thức hay về react mà mình còn chưa tìm hiểu được. =)) dù là cơ bản những mong mọi người ửng hộ =)) . đầu năm mình làm cái blog cho nó may mắn =)).

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Nguyen The Vinh

11 bài viết.
49 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
12 7
Cookie là gì ? tầm quan trọng của Cookie ? kể đến Cookie thì theo mình có lẽ liên quan tới doremon một xúy nếu ai có tuổi thơ thì chắc đọc biệt đ...
Nguyen The Vinh viết 1 năm trước
12 7
White
10 1
1, TOEIC là cái gì ? , nó có thể giúp ích cho chúng ta những gì ?? (Ảnh) TOEIC (viết tắt của Test of English for International Communication – Bài...
Nguyen The Vinh viết 1 năm trước
10 1
White
9 9
(Ảnh) Tổng quan về mô hình MVC Thường thường, mình thấy mọi người thường nói về khái niệm rồi mới sang chức năng bla bla..... , nhưng theo m...
Nguyen The Vinh viết 1 năm trước
9 9
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
11 bài viết.
49 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!