react 组件的创建以及引入方式

一、新建一个文件夹（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 './文件夹名';
./表示当前文件夹

<子组件名／> 调用

　　

 

 

　

转载于:https://www.cnblogs.com/wenzai/p/9987623.html