React.js props xử lý data Bài học này sẽ giúp bạn xử lý dữ liệu truyền vào cho một component. Trước tiên ta tạo một nội dung index.html như sau: <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″ /> <title>Hello React</title> <script src=”https://unpkg.com/react@16/umd/react.development.js”></script> <script src=”https://unpkg.com/react-dom@16/umd/react-dom.development.js”></script> <script src=”https://unpkg.com/@babel/standalone/babel.min.js”></script> </head> <body> <div id=”member”></div> <script type=”text/babel”> function Member(props){ return( <div […]

React.js Props Tiếp theo bài học về React.js Component, ta đã biết component thực chất là một function Javascript (hoặc class), phương thức truyền giá trị giữa các function này được gọi là props, chúng được React xử lý và trả kết quả hiển thị trên trình duyệt. Cách viết một React.js Props Thay vì […]

React.js Component Như đã giới thiệu ở bài React.js là gì?, React chia nhỏ các phần của trang thành từng phần riêng biệt, gọi là component, ví dụ như các phần: header, footer, sidebar, navigation, itemList, … . Tính chất của component giống như một hàm (function) Javascript, có thể tái sử dụng ở nhiều […]

JSX JSX (Javascript XML), là cấu trúc XML được viết bên trong cấu trúc Javascript (HTML cũng được viết theo cấu trúc XML nhé), do đó có thể hiểu đơn giản hơn JXS giống như cách viết HTML bên trong cấu trúc Javascript. Vậy tại sao cần JSX? các bạn thử xem 2 cấu trúc […]

React.js render HTML Trước tiên bạn cần hiểu render là gì? nói nôm na thì render là việc hiển thị nội dung lên trình duyệt. Nội dung có thể được viết từ HTML, Javascript hay PHP,… Kết quả cuối cùng là hiển thị nội dung đó trên trình duyệt cho người dùng sử dụng. Đó […]

Cài đặt React.js Cài đặt React.js có nhiều cách, ở phạm vi bài học này, Học Web Chuẩn sẽ hướng dẫn 2 cách đơn giản sau: Sử dụng trực tiếp React.js từ CDN thông qua tag <script>. Cài đặt React.js bằng lệnh. Cài đặt trực tiếp React.js từ tag <script> Tạo file index.html với nội […]

React.js là gì? React.js là một thư viện Javascript để xây dựng giao diện người dùng, được phát triển ban đầu từ Facebook và đóng góp bởi cộng đồng lập trình viên trên thế giới. React.js có thể sử dụng để viết phần nền cho single-page hoặc ứng dụng di động, giúp trang lấy và […]

Javascript – export & import Để dễ làm việc, quản lý các chức năng file javascript, chúng ta thường tách các phần riêng biệt ra riêng từng file khác nhau, khi đó nhu cầu lồng ghép các function của file này vào file kia để sử dụng các function đã có là khó tránh khỏi, […]

ES6 Classes Classes là một dạng function đặc biệt, thay vì sử dụng từ function thì chúng ta sử dụng class và thuộc tính được gán bên trong phương thức constructor(). Classes có tính kế thừa (inheritance), dễ dàng kế thừa tất cả phương thức từ Classes đã có trước đó. Cấu trúc cơ bản […]

ES6 arrow function ES6 arrow function, viết function dưới dạng mũi tên =>. Cách viết này linh hoạt, tùy biến function hơn so với cách viết cũ. Cùng xem so sánh giữa 2 function cũ và mới để biết thêm về arrow function là gì nhé. Function  Arrow function var functionName = function(val1, val2){ /* […]

ES6 Destructuring (phá vỡ cấu trúc). Destructuring (phá vỡ cấu trúc) cho phép chúng ta dễ dàng sử dụng các giá trị phần tử của Array hoặc Object. Destructuring rất hữu dụng khi làm việc với function có đối số. Xem các ví dụ bên dưới để rõ hơn về destructuring nhé. Ví dụ về […]

Rest parameters Tham số “còn lại” (rest parameters), là tham số đại diện cho những tham số không được khai báo. Khi sử dụng khai báo đại diện bên trong một function thì khi gọi function sẽ không giới hạn giá trị truyền vào. Đại diện này được ký hiệu bằng khai báo …name (cẩn […]