React 框架中的src 文件

React 框架中的src 文件:
1:  App.js 是一个函数定义的组件, 然后render 出去
2： App.css  就是跟组件使用的样式
3： App.test.js   就是组件的测试文件
4： index.js   是入口文件
5： index.css   作为全局的一些样式 (在index.js 文件中引入index.css 文件作为全局样式)
6:  log.svg   可以作为一个动图

7:  <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('root')

  <React.StrictMode>:  为当前组件开启严格模式。 帮助检查写在组件(或者子组件)中的语法 (内容)
  子组件的语法和内容是否合格,  (提醒更加正确书写React 语法, 更加严格规范。)

8: reportWebVitals.js  文件做性能检测 (性能分析)   依赖于web-vitals 库;
9: App.js 文件是跟组件,  然后在index.js 文件中引入App.js 文件, 然受使用DOM 渲染;

App.js 作为跟组件, 往index.html 页面上挂在使用的. App.js 文件作为顶层的组件, 跟组件。 
App.js 文件中应该组织其他组件, 进行渲染。 

样式模块化使用:
使用需要注意两点:

第一： 定义类名不应该使用: index.css;   而是应该使用: index.moudle.css

第二： import HomeCss from './index.moudle.css'

class Home extends Component {
   render() {
     return (
       <h3 className={HomeCss.title}></h3>
     )
   }
}

组件化编码流程:

1: 拆分组件, 拆分界面, 抽取组件

2: 实现静态组件, 使用组件实现静态页面效果。
3: 实现动态组件
     动态: 显示初始化数据
      A： 数据名称
      B:  数据类型
      C:  保存在哪个组件

    4: 交互 (从绑定事件监听开始)