React基础语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--准备好一个容器-->
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
    // 创建虚拟dom
    const VDOM = <h1>Hello.React</h1>
    // 渲染虚拟dom到页面
    ReactDOM.render(VDOM,document.getElementById("test"))
</script>
</body>
</html>

虚拟DOM的2种创建方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>2_使用js创建虚拟DOM</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>

<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" >
  //1.创建虚拟DOM
  const VDOM = React.createElement('h1',{id:'title'},'Hello React')
  //2.渲染虚拟DOM到页面
  ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--准备好一个容器-->
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
  // 创建虚拟dom
  const VDOM =(
          <h1 id="title">
                  <span>Hello React</span>
          </h1>
  )
  // 渲染虚拟dom到页面
  ReactDOM.render(VDOM,document.getElementById("test"))
</script>
</body>
</html>

JSX语法规则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .title{
        background-color: orange;
        width: 200px;
    }
</style>
<body>
<!--准备好一个容器-->
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
    const myId = 'frank'
    const myData = 'Hello React'
    // 创建虚拟DOM
    const VDOM = (
        <div>
            <h2 className="title" id={myId}>
                <span style={{color:'white',fontSize:'30px'}}>{myData}</span>
            </h2>
        </div>
    )
    // 渲染
    ReactDOM.render(VDOM,document.getElementById("test"))
    /**
     *  JSX语法规则
     *  1.定义虚拟DOM ，不要引号
     *  2.标签中混入JS表达式要用{}
     *  3.样式类名用className
     *  4.内联样式亚勇style={{key:value}}
     *  5.虚拟DOM必须只有一个
     *  6.标签必须闭合
     *  7.标签首字母
     *      小写字母开头，转为html同名元素，无则报错
     *      大写字母开头，熏染对应组件，组件未定义报错
     */
</script>
</body>
</html>

React 定义组件

函数式定义组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--准备好一个容器-->
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
    // 1 创建函数式组件
    function Demo(){
        return <h2>我是函数定义的组件 简单组件的定义</h2>
    }
    // 渲染
    ReactDOM.render(<Demo/>,document.getElementById("test"))
</script>
</body>
</html>

类式组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--准备好一个容器-->
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
    // 1.创建类式组件
    class MyComponent extends  React.Component{
        render(){
            // render 是放在哪里的？ 放在Mycomponent原型对象上
            return <h2>我是用类式定义的组件  复杂组件</h2>
        }
    }
    // 2.渲染组件
    ReactDOM.render(<MyComponent/>,document.getElementById("test"))
</script>
</body>
</html>

END

有问题请联系feinan6666@outlook.com

本文作者：
 文章标题：React学习日记之组件实例三大属性
 本文地址：https://home.cnboy.top/42.html
 版权说明：若无注明，本文皆神码人の世界原创，转载请保留文章出处。
最后修改：2021 年 09 月 19 日 10 : 07 PM
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏