在html中使用react
今天跟大家分享react的基础语法。
我们采用最简单的方法,就是在html中引入react
因为一上来就使用脚手架的话,很多配置大家不一定清楚。
而在html中使用react的话,可以直接去学习react最基本的语法。
这是零基础学习react的最佳实践。
引入react的依赖
react也是js库,所以我们在使用的时候需要引入react的依赖
react依赖的是三个包
1 react 包含react所必须的代码
2 react-dom react在渲染不同平台所需要的代码
3 babel 讲jsx转换成react代码的工具 ,jsx是react编写代码的采用的一种语法,默认浏览器是不识别的,需要通过babel去编译成浏览器识别的js代码。
注意:
react的包引入必须在react-dom前面,babel则没有顺序要求。
react实现hello world
我们通过一个小案例,来入门react,知识点包含:dom渲染,事件,修改数据
<body>
<script crossorigin src="react.development.js"></script>
<script crossorigin src="react-dom.development.js"></script>
<script src="unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="root">
</div>
</body>
<script type="text/babel">
let title = 'hello world'
function handleFn(){
// 1 修改数据
title = '你好,丁鹿'
// 2 重新渲染
rander()
}
function rander(){
root.render((
<div>
<h1>{title}</h1>
<div onClick={handleFn}>修改标题</div>
</div>
))
}
const root = ReactDOM.createRoot(document.querySelector('#root'))
rander()
</script>
注意:
1react18和react18之前的一些语法是不一样的,我们使用最新的库和写法。
2jsx语法中,所有的变量都是通过{}
的形式写在dom中的
3 jsx中,点击事件使用onClick去绑定。