Sử dụng createElement
React là một frontend framework phổ biến nhất hiện nay. Nó sử dụng API tương tự như Javascription thuần để tạo nên cái DOM node.
Sự thât thì React cũng sử dụng API: createElement để tạo nên DOM.
React trừu tượng quá các browser API để bạn tạo DOM và dễ dàng tương tác với chúng hơn. React đã giúp bạn làm những thứ khó nhất, giúp bạn dễ dàng tạo nên component với declarative API.
React cũng hỗ trợ nhiều nền tảng( native, web). Mỗi nền tảng có những module riêng và chia sẻ nhau những module chung.
Bạn cần tải 2 Javascript files để viết một ứng dụng web React như sau:
- React: chịu trách nhiệm tạo ra các React elements(giống như document.createElement())
- ReactDOM: chịu trách nhiệm render các React elements lên DOM(giống như rootElement.append())
Bạn có thể viết lại ví dụ ở bài 1 bằng React như sau:
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17.0.0/umd/react.development.js">
</script>
<script src="https://unpkg.com/react-dom@17.0.0/umd/react-dom.development.js"></script>
<script type="module">
const rootElement = document.getElementById('root')
const element = React.createElement('div', {
className: 'container',
children: 'Hello World',
})
ReactDOM.render(element, rootElement)
</script>
</body>
Trên đây chúng ta không sử dụng JSX mà cơ bản sử dụng React.createElement để tạo elements trong React.
const elementProps = {id: 'element-id', children: 'Hello world!'}
const elementType = 'h1'
const reactElement = React.createElement(elementType, elementProps)
ReactDOM.render(reactElement, rootElement)createElement nhận vào các tham số như: elementType(h1,h2, div,…), elementProps và tham số thứ ba là children.
React.createElement(
type,
[props],
[children]
)Bạn hãy thử dùng API React.createElement để tạo nested element như sau nhe:
<body>
<div id="root">
<div class="container">
<span>Hello</span>
<span>World</span>
</div>
</div>
</body>Đáp án như sau:
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17.0.0/umd/react.development.js">
</script>
<script src="https://unpkg.com/react-dom@17.0.0/umd/react-dom.development.js"></script>
<script type="module">
const rootElement = document.getElementById('root')
const element = React.createElement('div', {
className: 'container',
children: [
React.createElement('span', null, 'Hello'),
React.createElement('span', null, 'World')
],
})
ReactDOM.render(element, rootElement)
</script>
</body>Chúc bạn học tốt và hiểu được bên dưới React tạo element và render DOM như thế nào. Bạn có thể tham khảo bài viết chi tiết về React.createElement tại đây.
Cách tạo một React App
- Sử dụng React packages từ unpkg như trên(Cách này có thể hơi khó khi bạn ko sử dụng JSX)
- Hay tạo một project trên Code Sandbox để bắt đầu (Đơn giản – nhanh – gọn và bạn cũng có thể download source code về và chạy dưới local)
- Sử dụng create-react-app để tạo project dưới local như hướng dẫn chi tiết ở đây
IDE và một số tools
- Visual Studio Code: Tải và cài đặt: https://code.visualstudio.com/
- ESLint: Bắt lỗi JS khi bạn code: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
- Prettier – Code formatter: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
- React dev tools: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
- Redux dev tools: https://github.com/zalmoxisus/redux-devtools-extension
Một số Extensions cài cho VS Code:
- Debugger for Chrome
- Auto rename tag
- Auto Close tag
- Code Runner
- EditConfig
- GitLens
- Import Cost
- Live Server
- Material Icon Theme
- Prettier – Code formatter
- Tabnine
- vscode-styled-components
- Path Intellisense
thaunguyen.com via Epic React by Kent C.Dodds
thanhcongdue@gmail.com