React笔记-组件(一)

React学习笔记-组件(一未完成)

特点

• 声明式
• 组件化
• 跨平台

---

React脚手架

a. 全局安装react脚手架 create-react-app

npm install create-react-app -g
&
npx create-react-app my-app

b. 使用create-react-app 创建 react应用，如果直接使用npx则无需执行这一步，直接执行第3步

create-react-app my-app

c. 进入刚创建的目录，然后启动项目，即可看到第一个react页面

# 进入创建的目录
cd my-app

# 启动react
npm run start

---

组件

react中组件分为两种 1. 类组件 2. 函数组件(hooks组件)

组件定义

1. 类组件

/**
 * 使用es6的module语法引入react
 * 脚手架内置了Babel(Babel 提供一个REPL 在线编译器，可以在线将 ES6 代码转为 ES5 代码)解析工具 尽量使用es6+语法
 */
import React from "react";
/**
 * 导出一个类，类名必须全局唯一
 * 类必须使用class 并且extends继承React.Component
 */
export default class LearnReact extends React.Component {
  /**
   * 1. render函数负责渲染页面
   * 2. render必须有return
   * 3. return里只能写html相关代码 并且用小括号包裹
   * 4. 小括号里只能存在一个根元素
   *      return (<div></div> <div></div>) ×
   *      return (<div> <div><div> <div>) √
   * 5.组件必须有render函数
   * 6. 每次重新渲染都会调用render函数
   */
  render () {
    return (
      // 小括号中可以编写任意html代码
      <div>
        <div>哈喽，react</div>
      </div>
    )
  }
}

函数组件(hooks)

/**
 * 导出方法，方法名全局唯一
 */
export default function LearnFC () {
  /**
   * 想让函数变成一个函数组件
   * 那么就可以直接在函数里面return
   * return的html也只能有一个根节点
   */
  return (
    // 小括号中可以编写任意html代码
    <div>
      <div>react中的函数组件</div>
    </div>
  )
}

使用组件

定义根组件

// index.js入口
import React from "react";
import ReactDOM from "react-dom/client";
/**
 * 使用对应的引入方式 引入组件
 */
import LearnClassComponent from "./learn-class-component";

const root = ReactDOM.createRoot(document.getElementById("root"));

/**
 * 在root.render方法里面
 * 根据<引入的组件>就可以定义我们的根组件
 * 也就是说react中的组件创建完后，就可以使用标签语法来进行使用
 */
root.render(<LearnClassComponent />);
root.render(<LearnClassComponent></LearnClassComponent>);

组件中使用组件

import React from "react";

// 引入LearnFC组件
import LearnFC from "./learn-fc";

export default class LearnClassComponent extends React.Component {

  render () {
    return (
      <div>
        <div>哈喽，react</div>
        {/* 
          react会自动创建一个标签
          我们可以直接使用这个标签当做组件
          并且我们可以多次使用它
        */}
        <LearnFC></LearnFC>
      </div>
    )
  }

}

缺少类组件和函数组件区别 学完hooks之后补