一、新建一个文件夹(user),一个组件就是一个文件夹
文件夹下建立 index.js (写组件内容) 、style.less(写组件样式)、 img(文件夹,需要的话放入图片)
目录层级:
user
-- index.js(组件内容:组件名首字母大写)
-- style.less(组件样式)
-- images(图片文件夹)
-- 图片文件
二:在 index.js 文件夹下 ,写组件
//首先第一行,新建组件用,引入react组件 import React, { Component } from 'react'; //第二行,引入less 样式 import XX from './XX.less'; //第三行开始创建组件 class 组件名 extends Component{ render(){ return( 代码(代码样式引入( className = {xx.header} ))header是类名 ) } } //组件创建完后: export default 组件名称
三、父组件引该子组件
父组件的 index.js 下,
import 该子组件名 from './文件夹名'; ./表示当前文件夹
<子组件名/> 调用