1. Làm quen với ReactJS
-- Demo sử dụng ReactJS bằng cách sử dụng CDN
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ReactJS</title> </head> <body> <div id="app1"></div> <div id="app2"></div> <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script> let element1 = React.createElement('h1', { style: { color: 'red', fontSize: '30px' } }, 'Hello ReactJS !!!'); ReactDOM.render( element1, document.getElementById('app1') ); </script> <!-- muốn sử dụng JSX cần có babel và thẻ script ở dạng text/babel --> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script type="text/babel"> let element2 = <h1 style={{ color: 'green', fontSize: '30px' }}>Hello ReactJS !!!</h1>; ReactDOM.render( element2, document.getElementById('app2') ); </script> </body> </html> |
2. Hook Component là gì
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ReactJS</title> </head> <body> <div id="root"></div> <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script type="text/babel"> const { useState } = React; // component là một function const App = (props) => { const [name, setName] = useState("Jack") return ( <div> <h2>Props: {props.title}</h2> <h2>State: {name}</h2> </div> ); } ReactDOM.render( <App title="Class Component" />, document.getElementById('root') ); </script> </body> </html> |
3. Class Component là gì
3.1. Component - Class ES6
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ReactJS</title> </head> <body> <div id="root"></div> <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script type="text/babel"> class App extends React.Component { constructor(props) { super(props); this.state = {name: "Jack"} } render() { return ( <div> <h2>Props: {this.props.title}</h2> <h2>State: {this.state.name}</h2> </div> ); } } ReactDOM.render( <App title="Class Component" />, document.getElementById('root') ); </script> </body> </html> |
3.2. Bolus: Component - createClass
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ReactJS</title> </head> <body> <div id="app"></div> <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.js"></script> <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script type="text/babel"> //Trước phiên bản React 16 (đang dùng CDN phiên bản 15), ES6 chưa ra đời //React tự tạo Class bằng cách dùng React.createClass (và chính createClass đã được loại bỏ từ phiên bản 16) const App = React.createClass({ getInitialState() { return { name: 'Jack' } }, render() { return ( <div> <p>Props: <strong>{this.props.title}</strong></p> <p>State: <strong>{this.state.name}</strong></p> </div> ) } }) ReactDOM.render( <App title="Class - without ES6" />, document.getElementById('app') ); </script> </body> </html> |
