React.js JSX | Hướng Dẫn Học React | Học Web Chuẩn

React.js JSX

• Trang chủ
• Hướng dẫn học
• Hướng dẫn học React.js
• React.js JSX

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 sau nhé.

Cấu trúc React	Cấu trúc React viết theo JSX
const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' );	const element = ( <h1 className="greeting">Hello, world!</h1> );

• Để render thẻ <h1> ta thấy rõ ràng cách viết JSX ngắn gọn hơn, và nó gần giống với cấu trúc HTML quen thuộc.
• Đây chỉ mới có 1 thẻ <h1>, nếu nội dung là một file HTML hoàn chỉnh thì cấu trúc bên trái sẽ rất phức tạp.
• Ngoài ra JSX chống tấn công kiểu injection, do mặc định React DOM sẽ loại bỏ những ký tự đặc biệt trong bất kì giá trị nào được nhúng vào JSX trước khi được render, việc này giúp ngăn chặn phương thức tấn công XSS (cross site scripting).
• Đó là lý do chúng ta nên viết React theo cấu trúc JSX.

JSX được viết ở đâu?

• Theo như bài học phần Render HTML ta thấy file /src/App.js như sau:

import React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p>Hello, React!.</p> </header> </div> ); } export default App;

• Nội dung có chữ màu xanh bên trên chính là nội dung được viết bằng JSX.

Khác biệt giữa HTML và JSX

• Cấu trúc JSX tương đồng với cấu trúc HTML, tuy nhiên có một số điểm khác biệt ta cần chú ý:

Mô tả	Cấu trúc HTML	Cấu trúc JSX
Tên Class	<tag class="">	<tag className="">
Thuộc tính value <input />	<input value="" />	<input defaultValue="" />
Thuộc tính for của <label>	<label for="">	<label htmlFor="">
Giá trị của <select><option>	<option value="">	<option value={}>
Style trực tiếp bên trong tag	<tag style="width: 10%">	<tag style={{ width: '10%' }}>
Event	<tag onclick="functionName()">	<tag onClick={functionName}>
Khi viết về giá trị được gọi	<img src={path}> Hello {name}!

• Hiện tại có nhiều trang hỗ trợ việc chuyển đổi nội dung HTML sang JSX, các bạn có thể tham khảo: HTML to JXS. Tùy vào trường hợp mà các bạn code từng phần hoặc dùng công cụ chuyển đổi cho phù hợp nhé.

Render HTML

React.js Component

Học web chuẩn

HƯỚNG DẪN HỌC

Hướng dẫn học ES6

• ES6 là gì?
• ES6 - variables
• ES6 - default parameters
• ES6 - spread syntax
• ES6 - rest parameters
• ES6 - destructuring
• ES6 - arrow function
• ES6 - classes
• ES6 - export & import

Cài đặt và các khái niệm

• React.js là gì?
• Cài đặt React.js
• Render HTML
• Cấu trúc JSX
• Component
• React.js Props
• Props - xử lý data
• Props- liên kết data trong Component
• Props với function arrow
• Props với Classes
• React.js State
• Component - setState
• Component - Lifecycle

Xử lý

• React.js xử lý sự kiện
• React.js xử lý form
• React.js xử lý form kết hợp
• React.js - render có điều kiện
• React.js - từ array tới list
• React.js - list và key
• React.js - nhúng map() vào JSX
• React.js - state với map()
• React.js - setState với map()
• React.js project với Component
• React.js project với Props
• React.js project với State

Thao tác dữ liệu

• React.js - Express - API
• React.js - Server & Client
• React.js - MySQL
• React.js - xử lý insert
• React.js - xử lý update
• React.js - xử lý delete

UI Components thông dụng

• Atlaskit
• Prime React
• MATERIAL-UI
• Evergreen
• UI Components khác

Hướng dẫn học XHTML & HTML5

Bài tập HTML & HTML5

Hướng dẫn học CSS

Hướng dẫn học CSS3

Bài tập CSS & CSS3

Hướng dẫn học SCSS

Hướng dẫn học Responsive

Hướng dẫn học jQuery

Bài tập jQuery

Hướng dẫn học ES6

Hướng dẫn học React.js

Hướng dẫn học Webpack

Hướng dẫn XAMPP

Hướng dẫn học PHP

Hướng dẫn học Laravel

Hướng dẫn học htaccess

THAM KHẢO

• Tham khảo
• Tham khảo HTML4/XHTML
• Tham khảo HTML5
• Tham khảo CSS
• Tham khảo CSS3
• Tham khảo jQuery

CHUYÊN ĐỀ

• Chuyên đề
• Chuyên đề HTML/CSS
• Chuyên đề HTML5/CSS3
• Chuyên đề jQuery/JS
• jQuery/JS plugin

GÓP Ý - LIÊN HỆ

• BẠN SẼ TÀI TRỢ?DONATE
• CÔNG CỤ TẠO CSS3CSS3 GENERATOR
• BỘ CÔNG CỤGENERATOR TOOLS
• CÔNG CỤ HỖ TRỢWEB TOOLS
• CÔNG CỤ TẠO RANDOMRANDOM GENERATOR
• CÔNG CỤ KIỂM TRA RESPONSIVE TEST
• CHIA SẺ HAYWEB & TOOLS

• 
• 
•