【课程笔记-李立超React】React24-25-26

24+25：组件的定义

-在index.js里面定义网页的结构，再把样式编写到index.css里面。通过import直接引入，引入后Webpack会自动对代码进行打包。

-组件：独立可复用的代码片段

React中定义组件的方式有两种：

·基于函数的组件：会返回JSX（React元素）的普通的JS函数（函数名首字母需要大写）

        为了使得项目结构更加的清晰，更易于维护，每个组件通常会存储到一个单独的文件中（xxx.js）并通过export导出。

function App(){
    return <h1>我是一个React的组件！</h1>
}
​
/*const App = () => {
    return <h1>我是一个React的组件！</h1>;
};*/

export default App;

         在其他文件中使用时，需要先通过import进行引入，引入后通过<组件名/>或<组件名></组件名>即可引入组件。

import ReactDOM from "react-dom/client";
import App from "./App";
​
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);

        用import引入xxx.css的样式进行样式设置。css文件里使用标准的CSS语法，要将js文件和css文件的文件名设置为相同的文件名。这种形式引入的样式是全局样式，有可能会被其他样式覆盖。

基于类的组件（类组件使用非常麻烦，所以使用场景少）：

需要类继承React.Component，导入react包（函数组件就不需要）

由于无法直接使用return返回jsx，所以必须添加一个render（）方法，在该方法返回值里面设置jsx

26：修改之前练习中的组件：

-组件的创建：

输入es7搜索这个组件并且安装，就可以输入rafc给新建的组件文件快速创建架构

如在文件名为LogItem的js文件中使用，自动生成：

import React from 'react'

const Logitem = () => {
  return (
    <div>
      
    </div>
  )
}

export default Logitem

然后在App.js里面将每个组件组合到一起，最后在index.js里面render App。

项目的src文件夹的直接目录下面一般只会有App.js, index.js, 以及一些样式文件。新建components目录存放组件的js文件，可以在components目录里面再新建各个目录保存各类组件及其对应样式。

-练习最终的文件结构如图：

LogItem里面用到了logDate的内容，Logs用到了多个LogItem，最后再在App.js装载Logs组件。