React入门第二弹(Vue重度爱好者勿入ψ(*｀ー´)ψ)——JSX语法入门和无状态组件的传值

文章目录

前言

上篇给大家简单介绍了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中的有状态组件和一些修改值的操作~~

欢迎关注，持续更新！！>>>>>