React学习day7--对react脚手架内文件的认知

创建好的react项目的目录结构如下，src下的components是我自己创建的，主要用来存放组件的js代码和css代码。

App.js
组件调用，文件路径./components/Hello/Hello.js

import Hello from './components/Hello/Hello.js'

<div >
      <Hello/>
 </div>

全部代码展示：

import './App.css';
import Hello from './components/Hello/Hello.js'
//创建外壳组件
import React,{Component} from 'react'
//创建并暴露App组件
export default class App extends Component {
  render() {
    return (
        <div >
         <Hello/>
        </div>
    )
  }
}

src/components/Hello/Hello.js
import ‘./Hello.css’,引入组件样式

import  React,{Component} from 'react'
import './Hello.css'
export default class Hello extends Component{
    render() {
        return <h1 className="title">Hello React!</h1>
    }
}

src/components/Hello/Hello.css

样式模块化

避免样式冲突
1、css文件命名格式：XX.module.css 例如：hello.module.css
2、引入样式：import aa from ‘./XX.module.css’
3、className={aa.title},title时css文件里面的样式

快捷生成代码模板：rcc 回车

安装以下插件

功能界面的组件化编码流程

1、拆分组件:拆分界面，抽取组件
2、实现静态组件
3、实现动态组件

• 动态显示初始化数据（数据类型、数据名称、保存在哪个组件）
• 交互