1、安装包(js库)
-
yarn add babel-standalone react react-dom
示例图.png
2、通过依赖包导入js库文件
<script src="../node_modules/babel-standalone/babel.js"></script>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
3、开始react的基本语法的使用
- 1.数据的定义
/* 数据定义 */
const data ={
state:'关闭'
}
/* 数据的使用 */
{data.state}
- 2.元素节点的样式添加
方法一：在内部使用style去添加
const ele = (
<div className="demo" data-id="自定义id属性" title="标题" style={{color:'red',fontSize:'24px'}}>
<p>tab栏标签是否打开{data.state}</p>
</div>
)
ReactDOM.render(ele,document.querySelector('#root'))
示例图.png
方法二：将style在外部定义个变量，然后作为变量引入元素中
<script type="text/babel">
/* 数据定义 */
const data ={
state:'关闭'
}
/* 样式的定义 */
const pStyle = {
color:'gold',
fontSize: '28px',
border:'1px solid #ccc'
}
const ele = (
<div className="demo" data-id="自定义id属性" title="标题" style={pStyle}>
<p>tab栏标签是否打开<span style={{color:'blue'}}>{data.state}</span></p>
</div>
)
ReactDOM.render(ele,document.querySelector('#root'))
</script>
示例图.png
- 3.代码的注释
在react中注释代码时，不能直接使用//去单行注释，需要先使用{ }包裹起来，再去单行注释或者多行注释
const ele = (
<div className="demo" data-id="自定义id属性" title="标题" style={pStyle}>
<p>tab栏标签是否打开{/* <span style={{color: 'blue'}}>{data.state}</span> */}</p>
</div>
)
ReactDOM.render(ele,document.querySelector('#root'))
上面是将span标签注释了，检查元素：
示例图.png
可以看到只有一个p标签，并没有span标签了。
- 4.不同数据类型使用插值去渲染
字符串
/* 字符串 */
const str = 'xiaochen';
/* 插入到标签内 */
const ele = (
<div className="demo">
{/*插入字符串*/}
<h5 style={{color:'orange'}}>{str}</h5>
</div>
)
ReactDOM.render(ele,document.querySelector('#root'))
数组
/* 数组 */
const arr = [1,2,3,4,5];
/* 插入到标签内 */
const ele = (
<div className="demo">
{/* 插入数组 */}
<h5 style={{color:'red'}}>{arr}</h5>
</div>
)
ReactDOM.render(ele,document.querySelector('#root'))
注意：{ } 插值不能插入对象！
/* 对象 */
const obj = {
name:'xiao',
age:10
}
/* 插入到标签内 */
const ele = (
<div className="demo">
{/* 插入对象 */}
<h5 style={{color:'green'}}>{obj}</h5>
</div>
)
ReactDOM.render(ele,document.querySelector('#root'))
注意！在使用{ }时，不可以使用这个插值去渲染对象数据，会出现报错
image.png
4、遍历数据列表
使用基本的插值去遍历，注意：在react中，{ }表达式是必须要有返回值的，否则会出现错误。
<script type="text/babel">
/* 新闻列表数据 */
const news = [
{
id:'1001',
title:'俄战斗机器人首次展示自动射击：靶标上打出“乌拉”',
content:'报道称，该基金会发布视频，展示在操作员控制武器的条件下发现目标和射击，对静态和移动目标进行自动射击，还展示了在靶场内自动机动行驶。在视频结尾，这款战斗机器人利用自动武器连续射击，在靶标上打出了“乌拉”一词。'
},
{
id:'1002',
title:'美媒：海军建设用力过猛 上个十年初造舰存严重问题',
content:'美海军的“濒海战斗舰”出现了推进故障；由于弹药昂贵，朱姆沃尔特级隐身驱逐舰上的舰炮“无弹可用”；最新福特级航母的电磁弹射系统存在问题。'
},
{
id:'1003',
title:'加拿大军官号召士兵不要接种新冠疫苗被指控叛乱',
content:'据“今日俄罗斯”25日报道，拉迪斯拉斯·肯德雷西是安大略省预备役军官，他曾在2020年12月5日举行反封锁集会，并在集会上公开发表演讲，号召人们不要接种疫苗。'
}
]
/* 创建dom元素节点*/
const ele = (
<ul>
{
news.map((item)=>{
return <li key={item.id}>
<h5>{item.title}</h5>
<span>{item.content}</span>
</li>
})
}
</ul>
)
ReactDOM.render(ele,document.querySelector('#root'))
</script>
渲染展示效果.png
