react学习-函数组件

app.js

import React from 'react'
//函数组件
/**
 * 函数组件特点：
 * 1.没有this对象
 * 2.没有内部状态(Hooks让函数式组件有自己内部的状态)
 */
export default function App(props) {
  //必须返回一个合法的JSX虚拟dom元素
  return (
    <>
      //使用props的参数
      //不论是vue还是react，组件中的props永远都是只读的，不可以赋值
      <div>我是function组件,这是参数：{props.name}</div>
      <div>11</div>
    </>
  )
}

index.js

//1.导入包
import React from "react";
import ReactDOM from "react-dom";
import App from "./01组件定义方式/app";

//2.创建虚拟DOM元素
/**
 * 参数1：创建的元素的类型：字符串，表示元素的名称
 * 参数2：是一个对象或null，表示当前这个DOM元素的属性
 * 参数3：子节点（包括其他虚拟DOM  或 文本子节点）
 * 参数n：其他子节点
 *
 * 注意：JSX语法的本质，还是在运行的时候通过babel插件，被转换成了React.createElement形式来执行的
 * class用className代替
 * label标签中的for用htmlFor代替
 * 必须有唯一的根元素
 */
const myh1 = React.createElement("h1", null, "这是一个大大的h1");
const myDiv = <div>11011</div>;

const list = ["小五郎", "大五郎", "毛利"];
//forEach遍历不返回
//map遍历，并且返回新数组

/**
 * 3.使用ReactDOM把虚拟DOM渲染到页面上
 * 参数1：要渲染的那个虚拟DOM元素
 * 参数2：指定页面上一个容器
 */
ReactDOM.render(
  <div>
    //传参，函数组件的props接收
    <App name='我是传进来的数据'/> {myh1} {myDiv}
    <div>
      {list.map((item) => (
        <div key={item}>
          <h5>{item}</h5>
        </div>
      ))}
    </div>
  </div>,
  document.getElementById("root")
);