Have opinions about JavaScript? We want to hear them. Take the 2018 JavaScript Ecosystem Survey »

react-drops

0.0.2 • Public • Published

React-Drops

React-Drops

CONCEPT [ NOT WORKING YET! ]

Easily drop react component 'templates' from the command-line

Install React Drops

npm i -g react-drops

require?

  • react
  • sass?

File structure?

- root <-- Project Folder
  - app/src  <-- Check if app || src and subDir components
    - components  
      - User.js <-- Write [name] Component JS  
    - styles  
      - User.scss <-- Write [name] Component SCSS  

  - build/dist  
  - etc...

Commands

1. drops

drops User //generates basic template for a User component

basic template:

  • component: ./app/components/User.js
  • style: ./app/styles/User.scss

JSX

require(./styles/User.scss);
var React = require('react');
 
var User = React.createClass({
    getInitialState: function() {
        return {};
    },
    render: function() {
        return (
            <div className="user">
                <h1>User Component</h1>
            </div>
        )
    }
})
 
module.exports = User;

CSS

.user {
    color: red;
}

TODO

  1. ES6 flag or config?
  2. Add Commands

FUTURE COMMANDS or FLAGS?

  • drops [component Name] --props name:string age:number availability:boolean
Creates component with parameters (props w/ validation)
  • inject [Component] [destination file]
Calls component in another file (dest file)
  • clean [Component]
Prompt?
Removes Component Files (js & scss)
  • project [AppName] !not in root folder
Prompt Name [name]
mkdir [name]  
cd [name]  
mkdir app build app/components app/styles  
touch app/index.js app/components/App.js   app/styles/app.scss .gitignore webpack.config.js README.md  
npm init -Y    
npm i --save react react-dom

Keywords

none

install

npm i react-drops

Downloadsweekly downloads

5

version

0.0.2

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability