- 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(
'h2',
{className: 'greeting'},
'Hello, world!'
);
| const element = (
<h2 className="greeting">Hello, world!</h2>
);
|
- Để render thẻ
<h2> 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ẻ
<h2> , 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ú ý:
- Trang chủ
- Hướng dẫn học
- Hướng dẫn học React.js
- React.js render HTML
React.js render HTML<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h2>Hello, React!</h2>,
document.getElementById('root')
);
</script>
</body>
</html>
- Click chạy file này, trình duyệt sẽ cho ta kết quả sau:
- Ta thấy nội dung
const element = (
<h2 className="greeting">Hello, world!</h2>
); 3 được tạo từ code Javascript, và được truyền vào file HTML thông qua const element = (
<h2 className="greeting">Hello, world!</h2>
); 4, nội dung này sẽ được hiển thị ra trình duyệt. Đây là một hình thức render. - Ví dụ đơn giản là vậy, nhưng thực tế quá trình làm việc của React phức tạp hơn một chút, phần lớn thao tác xử lý đều nằm ở file Javascript, các bạn xem tiếp ví dụ bên dưới nhe.
Nội dung thư mục react-project
- Sau khi hoàn thành cài đặt React, ta sẽ được cấu trúc sau:
react-project node_modules public index.html - src
- .gitignore
- package.json
- package-lock.json
- README.md
const element = (
<h2 className="greeting">Hello, world!</h2>
); 5 chứa nội dung cài đặt, tất cả cài đặt sẽ được lưu tại đây, chúng ta không thao tác trong thư mục này nhé.const element = (
<h2 className="greeting">Hello, world!</h2>
); 7 chứa tất cả các file input, đây là các file mà chúng ta sẽ code nội dung, thao tác phần lớn ở những file này, gồm các file Javascript, CSS,...- Các file khác chưa cần quan tâm nhé.
Cách React render nội dung HTML ra trình duyệtĐể hiểu rõ hơn về render trong React, ta xem xét nội dung 3 file:
const element = (
<h2 className="greeting">Hello, world!</h2>
); 8/src/App.js 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; 0
Để cho dễ hiểu, ta lần lượt viết lại nội dung các file như sau: /puclic/index.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html> - Ta thấy file này không chứa bất kỳ nội dung nào hiển thị ngoài trình duyệt.
/src/App.jsimport 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; - Ta thấy đoạn code màu xanh bên trên chính là nội dung được hiển thị ngoài trình duyệt.
- File này liên kết với
const element = (
<h2 className="greeting">Hello, world!</h2>
); 8 thông qua 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; 0:
/src/index.jsimport React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App'; //Load function App từ App.js
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister(); - Import thư viện React và ReactDOM:
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; 3 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; 4 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; 5 import nội dung file 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; 6import 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; 7 import nội dung file 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; 8import 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; 9 render nội dung function <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h2>Hello, React!</h2>,
document.getElementById('root')
);
</script>
</body>
</html> 0 tới const element = (
<h2 className="greeting">Hello, world!</h2>
); 4
Nội dung trên có nghĩa là file 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; 0 lấy nội dung từ function <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h2>Hello, React!</h2>,
document.getElementById('root')
);
</script>
</body>
</html> 0 của file /src/App.js render ra nội dung trả về const element = (
<h2 className="greeting">Hello, world!</h2>
); 4 của file <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h2>Hello, React!</h2>,
document.getElementById('root')
);
</script>
</body>
</html> 6, sau đó hiển thị nội dung này ra trình duyệt.- Nội dung hiển thị trình duyệt lúc này:
- Tới đây các bạn sẽ thắc mắc tại sao có thể liên kết được với file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h2>Hello, React!</h2>,
document.getElementById('root')
);
</script>
</body>
</html> 6 trong khi bên trong file <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h2>Hello, React!</h2>,
document.getElementById('root')
);
</script>
</body>
</html> 6 không chứa bất kỳ liên kết Javascript nào? Câu trả lời nằm file <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h2>Hello, React!</h2>,
document.getElementById('root')
);
</script>
</body>
</html> 9, nội dung file này được import trực tiếp bên trong 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; 0 đóng vai trò như một Route điều hướng, liên kết các file. - Tới đây nếu bạn vẫn chưa rõ thì tạm thời gác cách hoạt động trên ra một bên, sau này quay lại cũng chưa muộn, cái quan trọng là nội dung React sẽ được viết từ file
/src/App.js , do đó khi chạy file <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h2>Hello, React!</h2>,
document.getElementById('root')
);
</script>
</body>
</html> 6 thì nội dung sẽ được render. |