@[toc]
前言
上篇给大家简单介绍了React，本篇文章开始就带大家由浅入深学习React，开始体验React与众不同的语法。
如果之前学习过Vue的同学，建议暂时忘掉Vue语法，不然对于Vue重度爱好者来说，写React真的会很不习惯,难以理解它的语法操作，不过熟悉之后，你也会发现React的魅力
React初体验
先在页面引入react相关的库
<!-- react底层核心库 -->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<!-- react操作DOM的核心库,类似于JQuery -->
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- 用于解析ES6语法 -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>然后在body中开始写代码：
首先添加一个空的 < div>标签作为标记你想要用 React 显示内容的位置，并加上id
然后在script中定义div内容，并用react固定的语法ReactDOM.render进行输出，并展示在id为root2的盒子位置
<body>
<div id="root2"></div>
<script type="text/babel">
// ES6方法需要引入babel,必须要使用type=text/babel
// Babel会把JSX转译为一个名为React.createElement()函数调用
let div = <div><h1>hello world</h1></div>
ReactDOM.render(
div,
document.getElementById('root2')
)
</script>
</body>效果图：这样就运行成功啦~
元素渲染
获取当前的时间渲染出来，后边的代码关键部分我都在里面写出了注释
<div id="root"></div>
<script type='text/babel'>
function tick() {
// 在React里面,组件时由元素构成的
let time = new Date().toLocaleTimeString()
let template = <div>
<h1>Hello React</h1>
<h2>现在是：{time}</h2>
</div>
ReactDOM.render(
template,
document.getElementById('root')
)
}
// tick()
// React元素是不可变对象,一旦被创建,你就无法更改它的子元素或者属性
setInterval(tick, 1000)
// 它只会更新它需要更新的部分,把tick函数理解为模型,页面内容理解为视图,模型更改就会直接驱动视图发生改变
</script>运行截图：
条件判断
这里是三种写法，第一个是直接用三目表达式，第二种是使用函数组件返回对应的值，第三种是在函数组件中进行判断然后返回值
<div id="root"></div>
<script type='text/babel'>
let flag = false
let login = <div>登录</div>
let logout = <div>登出</div>
ReactDOM.render(
flag ? login : logout,
document.getElementById('root')
)
</script>
<div id="root2"></div>
<script type="text/babel">
function App() {
let flag = true
let login = <div>登录</div>
let logout = <div>登出</div>
return flag ? login : logout
}
ReactDOM.render(
<App />,
document.getElementById('root2')
)
</script>
<div id="root3"></div>
<script type="text/babel">
let state = true
function Apps() {
if (state) {
return <div>我是登录页面</div>
} else {
return <div>我是登出页面</div>
}
}
ReactDOM.render(<Apps />, document.getElementById('root3'))
</script>运行截图：
无状态组件
在react中组件按类别可以分为有状态组件 和 无状态组件，先来讲无状态组件
如下
<div id="root"></div>
<script type='text/babel'>
// 函数式组件(无状态组件)
function Hello() {
return <div>
<h1>姓名：Hello React！</h1>
<h1>年龄：Hello React！</h1>
<h1>性别：Hello React！</h1>
<h1>地址：Hello React！</h1>
</div>
}
ReactDOM.render(
<Hello/>,
document.getElementById('root')
)
</script>运行截图：
无状态组件props传值
在无状态组件中我们使用props进行传值，如下
<div id="root"></div>
<script type='text/babel'>
// 函数式组件(无状态组件)
// 传值的时候，一定要记得括号中写上props
function Hello(props) {
// 在组件里可以通过props来获取我们传递的值
console.log(props)
return <div>
<h1>姓名：{props.name}！</h1>
<h1>年龄：{props.age}！</h1>
<h1>性别：{props.sex}！</h1>
<h1>地址：{props.address}！</h1>
</div>
}
ReactDOM.render(
//需要传什么值，直接在组件上写入
<Hello name='beiyu' age='8' sex='boy' address='Wu Han'/>,
document.getElementById('root')
)
</script>运行截图：
最后
本期给大家介绍了JSX语法以及无状态组件，下节给大家介绍react中的有状态组件和一些修改值的操作~~
欢迎关注，持续更新！！>>>>>
