react框架架构以及路径问题_react 架构

我们的react项目下必须有src和public两个文件

Components里面放的是组件，一层一层套下去。组件名和文件名保持一致

最外层只做框架：

App.js是总组件，在这里引入其他组件

index.js里面是所有的框架内容入口不能放过多东西

路径问题

一定要找到指定的文件，不同的编辑器不一样，一定要注意！！！！

来梳理一下运行的流程加深印象

1.我们启动的是

这个文件,在这个文件中我们导入了我们需要使用的文件

这里有我们的总组件App.js,还有我们最外面框架的css等等

2.我们定义了const root 常量来获取id等于‘root’的参数，并且通过root.render(<App/>) 来渲染我们的组件

3.我们进入App.js里面

这个文件用于放我们的总组件，这个文件中我们导入了，我们这个函数型组件返回的是一个Logs组件，这里我们用自结束符号来结束<Logs/>，因为我们组件函数里面要求非常严格，必须要结束符号

因为需要使用Logs组件，所以我们需要导入文件import Logs from "./Components/Logs/Logs.js";

4.我们进入Components

因为我们调用的是Logs，那我们进入Logs.js文件看看

这个文件里面我们导入了属于这个js文件的的css文件，并且组件函数返回的是一个LogItem组件，那么我们进入<LogItem/>看看

5.进入Logtem看看

这个组件里面我们返回的是一个这个东西

return (
    <div className="item">
      <MyDate/>
    {/**日志内容容器 */}
    <div className="content">
        <h2 className='desc'> 好好学习</h2>
        <div className='time'>40min</div>
    </div>
    </div>
  )
1
2
3
4
5
6
7
8
9
10

这里我们引入了这个css文件，这里的css包含的组件很多

6.我们返回了一个MyDate后就往MyDate里面走

MyDate返回的是一个div标签，div标签里面嵌套了几个标签

7.最终流程结束