react-component-maker

一键式创建React组件

功能

一键式创建React组件，不是React脚手架！
支持一次创建多个组件

Usage

npm i -g react-component-maker
mkreact App
//此时便会创建App组件
mkreact Header Body Footer
//此时你就分别创建了Header,Body,Footer三个组件

组件详情

一个组件为一个文件夹，文件夹目录为

[name].jsx
[name].scss
package.json

文件内容

[name].jsx

import React from 'react';
import s from './[name].scss'
class [name] extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = [name];
    }
    render() {
        return <div className={s.container}>[name]</div>;
    }
}
export default [name];

[name].scss

.container {
  
}

package.json

{
    "name": "[name]",
	"version": "0.0.0",
	"private": true,
	"main": "./[name].jsx"
}

对于package.json可能有人不理解。

例如你创建了一个Header组件，它是一个文件夹，名字为Header，文件夹内部有如下目录

[name].jsx
[name].scss
package.json

那么当你使用

import Header from './Header'

首先模块系统会定位路径，解析发现Header是一个文件夹，那么它会去找该文件夹下是否有package.json文件，如果有，那么接下来会去解析package.json文件，找到它的main属性，如果有，并且该属性的路径是正确的，那么就将Header文件定位到该属性所指位置；如果以上为否,就会去找index.js，如果都没有就报错。所以通过package.json可以让文件夹在引入时就像一个文件一样。