【React】 4课 react初识组件

首先我们如1课创建一个文件夹在文件夹中安装react环境需要的配置文件

npm init -y
npm i babel-standalone -D
npm i react react-dom -D

安装配置文件教程链接：https://blog.csdn.net/qq_41614928/article/details/93771657
安装完成后我们开始学习下面知识

1. react初识组件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>react初识组件</title>
</head>

<body>
  <!-- 所有的页面代码都是放在这里面 -->
  <div id="app"></div>
  <!-- 用于解析jsx的代码 babel引用应在前面 -->
  <script src="./node_modules/babel-standalone/babel.js"></script>
  <!-- 引用react模块，用于构建用户界面的 JavaScript 库 UI库 -->
  <script src="./node_modules/react/umd/react.development.js"></script>
  <!-- 操作VM DOM 加载顺序必须先引入react再引入react-dom-->
  <script src='./node_modules/react-dom/umd/react-dom.development.js'></script>

  <!-- 引入script类型为babel样式 这样可以解析里面的jsx代码 -->
  <script type='text/babel'>

    const head = (
      <header> 这是属性引入组件 大括号 内写入存放标签的属性 </header>
    )
    //声明式无状态的组件
    function Section(){
      return (
        <section> 这是函数引用组件样式的3种写法 </section>
      )
    }

    //声明式有状态的组件 继承React.Component
    class Footer extends React.Component{
      constructor(){
        super()
        this.name = "panfu"
      }
    }

    let element = (
      <div>
        <h2>{head}</h2>
        <h2>{head}</h2>
        <header> 这是头部样式 </header>
        <section> 这是主体样式 </section>
        <footer> 这是底部样式 </footer>
        <h2>{head}</h2>
        <hr/>
        <Section />
        <h2><Section /></h2>
        <Section></Section>
      </div>
    );

    //ReactDOM.render将element渲染到id=app的标签中
    ReactDOM.render(
      element,
      document.getElementById('app')
    )
  </script>
</body>

</html>

运行结果如下：

在这里插入图片描述

2. 无状态组件传参方法：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <!-- 所有的页面代码都是放在这里面 -->
  <div id="app"></div>
  <!-- 用于解析jsx的代码 babel引用应在前面 -->
  <script src="./node_modules/babel-standalone/babel.js"></script>
  <!-- 引用react模块，用于构建用户界面的 JavaScript 库 UI库 -->
  <script src="./node_modules/react/umd/react.development.js"></script>
  <!-- 操作VM DOM 加载顺序必须先引入react再引入react-dom-->
  <script src='./node_modules/react-dom/umd/react-dom.development.js'></script>

  <!-- 引入script类型为babel样式 这样可以解析里面的jsx代码 -->
  <script type='text/babel'>
  
    //声明式无状态组件
    function Section( props ){
        console.log( props )
        return (
            <section> 幸运大转盘{props.title} {props.data}</section>
        )
    }

    let element = (
      <div>
        <h2><Section /></h2>
        <Section 
            title={ '获奖的观众是' }
            data={['小明',"小红"]}
        ></Section>

      </div>
    );

    ReactDOM.render(
      element,
      document.getElementById('app')
    )
  </script>
</body>
</html>

运行结果如下：

在这里插入图片描述

【React】 4课 react初识组件

首先我们如1课创建一个文件夹在文件夹中安装react环境需要的配置文件

1. react初识组件

运行结果如下：

2. 无状态组件传参方法：

运行结果如下：

猜你喜欢