+1
build 1 dự án react thuần thành 1 file css và 1 file js
mk muốn build 1 dự án react thuần nhưng chỉ thành 1 file css và 1 file js thì có cách nào k ạ? ai biết support mk với
Thêm một bình luận
1 CÂU TRẢ LỜI
+1
Trường hợp này bạn cần nhúng 2 thư viện là react và react-dom vào trong trong trang HTML của bạn nhé. Mình không khuyến nghị bạn triển khai theo hướng này trừ khi bạn đang maintain một website rất cũ và bắt buộc phải làm như vậy.
Cách nhúng hai thư viện trên vào trang thì bạn dùng link CDN trực tiếp, được cung cấp bởi CDNJS. Bạn sẽ thấy chỉ việc tạo mỗi một thẻ div đơn sơ trong component Hello thôi mà đã dài dòng văn tự rồi.
<!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>React without JSX</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js" integrity="sha512-QVs8Lo43F9lSuBykadDb0oSXDL/BbZ588urWVCRwSIoewQv/Ewg1f84mK3U790bZ0FfhFa1YSQUmIhG+pIRKeg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js" integrity="sha512-6a1107rTlA4gYpgHAqbwLAtxmWipBdJFcq8y5S/aTge3Bp+VAklABm2LO+Kg51vOWR9JMZq1Ovjl5tpluNpTeQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div id="root">Loading...</div>
<script>
class Hello extends React.Component {
render() {
return React.createElement('div', null, `Hello ${this.props.toWhat}`);
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(Hello, {toWhat: 'World'}, null));
</script>
</body>
</html>
Để ngắn hơn thì bạn lại dùng JSX và sử dụng Babel để transform JSX nhé. Vẫn cài thêm Babel bằng CDN link tương tự với react. Do transform ngay tại thời điểm runtime trên browser nên tốc độ rendering của browser sẽ bị giảm đi.
<!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>React with JSX</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js" integrity="sha512-QVs8Lo43F9lSuBykadDb0oSXDL/BbZ588urWVCRwSIoewQv/Ewg1f84mK3U790bZ0FfhFa1YSQUmIhG+pIRKeg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js" integrity="sha512-6a1107rTlA4gYpgHAqbwLAtxmWipBdJFcq8y5S/aTge3Bp+VAklABm2LO+Kg51vOWR9JMZq1Ovjl5tpluNpTeQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Add Babel -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.24.5/babel.min.js" integrity="sha512-F62mvp9bPPLjVOpNlD+9erbo9KBRQKkLittcNub5D2o8WfgV9nrJR/0hKc1OUY3LNwlo671inEZzCjnLJz62nw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div id="root">Loading...</div>
<!-- Using JSX with Babel -->
<script type="text/babel" data-presets="react">
class Hello extends React.Component {
render() {
return <div>Hello {this.props.toWhat}</div>;
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Hello toWhat="World" />);
</script>
</body>
</html>
