React修炼营之组件的创建(四)

1. 前言

    前面分享了React中推荐使用的JSX语法,今天与大家分享React的组件创建，React中有两种方式来创建组件，第一种是通过类来创建组件，第二种是通过函数的方式来创建组件，函数式组件在React16.8之前又被称为无状态组件，但是在16.8之后出现了react hooks 使得函数式组件可以维护自己的状态。
    如果你是用Microsoft VS Code编辑器来编写代码的，在学习React之前建议安装 ES7 React/Redux/GraphQL/React-Native snippets


这个插件可以帮助你快速生成React代码

2. 组件的创建

  2.1 . 类组件

      如果你对javascript中的类不熟悉或者是忘记了，可以参考Class,温习一下

      在src目录下创建如下文件或目录

      在ClassCom.js中生成类组件

/**
 * 可通过rcc直接生成如下代码
 *    步骤   rcc + Enter
 * */

//由于react.js中导出了多个模块，默认导出的是React，所以可以写成如下形式
import React, { Component } from 'react'

export class ClassCom extends Component {
  //render为React中默认的函数，组件被调用后,render函数会被自动执行
  render() {
    return (
      <div>我是类组件</div>
    )
  }
}

export default ClassCom

  2.2 函数式组件

      在FunCom.js中生成函数式组件

/**
 * 通过rfc生成函数式组件
 *   步骤：rfc + Enter
 */
import React from 'react'

export default function FunCom() {
  return (
    <div>函数式组件</div>
  )
}

      然后再App.js和index.js中写下如下代码

//App.js
import ClassCom from './components/ClassCom' //引入类组件
import FunCom from './components/FunCom' //引入函数式组件

function App() {
  return (
    <div className="App">
      {/*此处用单标签或双标签都可以*/}
       <ClassCom></ClassCom>
       <FunCom />
    </div>
  );
}

export default App;

//index.js
import React from 'react'; //react核心库
import ReactDOM from 'react-dom/client'; //用于渲染dom
import App from './App'; //App组件

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

3. 效果

最后在中断输入，看效果

//启动项目
npm start