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 './文件夹名';
./表示当前文件夹

<子组件名/> 调用

  

 

 

 

posted @ 2018-11-20 10:54  犯贰的文仔  阅读(4432)  评论(0)    收藏  举报