[Proposal] Draft version for vision of react-cli [Code name: Yoda]

proposal.md

@@ -0,0 +1,139 @@
+# Proposal
+
+## Purpose:
+
+The purpose for this project is to give a starter template whether your are writting a component in react smart or dumb, or even initializing a new application.
+
+The template provided by *react-cli* aims to be highly configurable and easily adjustable. We believe in **build on top of things** kind of applications.
+
+## Vision:
+
+Initially this will start out as a cli based configuration which will then move on to a GUI similar to what @vue does right now. A web application dashboard which will have options to create files and much more.. (much more part is still being thought on)
+
+## Getting Started:
+
+```
+$ npm install -g @withvoid/react-cli
+```
+Then you can use it as
+
+```
+$ @withvoid/react-cli <react-cli-command-here>
+$ rc <react-cli-command-here> // or use the shorthand cli command
+```
+
+Or if you don't want to have it as a global dependency but just want to use it at run time
+
+```
+$ npx @withvoid/react-cli <react-cli-command-here>
+```
+
+### @withvoid/react-cli init-webpack
+This command will quickly scaffold a react application build on top of webpack/babel and will have support for the follow
+
+- Es6/Es7 syntax
+- CSS/SCSS support
+- Font files support
+- Images support
+- React support *this goes without saying*
+- Hot Module Replacement
+- Code splitting
+- Configuration for a NodeJS based application
+- Configuration for a Java Spring Boot application
+- *python, go etc* support coming soon
+
+The main thing that I want to *empasize* here is that react-cli will aim to provide a boiler plate so simple with so thorough documentation that you can always **build on top of it** A webpack configuration so easy that anyone can work with it and add or remove from it, as it suites the developer.
+
+```sh
+$ @withvoid/react-cli init-webpack
+$ rc init-webpack
+```
+
+### @withvoid/react-cli init-prepack
+*same as what* **@withvoid/react-cli init-webpack** but with prepack
+
+### @withvoid/react-cli generate sc
+The *command* will generate a new smart component (State component) from the ./dir you run this command in.
+
+```
+import React from 'react';
+import PropTypes from 'prop-types';
+class SmartComponent extends React.Component {
+   constructor(props) {
+     super(props);
+     this.state = {
+        foo: true;
+     };
+   }
+   static getDerivedStateFromProps(props, state) {
+     // code here..
+   }
+   static getSnapshotBeforeUpdate(prevProps, prevState) {
+     // code here..
+   }
+   componentDidMount() {
+     // code here..
+   }
+   componentWillUnmount() {
+     // code here..
+   }
+   render() {
+     return (
+       <div>
+         {this.state.foo && <p>truthy</p>}
+         <p>{props.name} is awesome</p>
+       </div>
+     );
+   }
+}
+SmartComponent.propTypes = {
+  name: PropTypes.string,
+};
+SmartComponent.getDefaultProps = {
+  name: 'React-CLI'
+};
+export default SmartComponent;
+```
+
+### @withvoid/react-cli generate dc
+The *command* will generate a new dumb component (Stateless component) from the ./dir you run this command in.
+
+>Now although we can support both of these syntax the latest ES7 as well, but since react documentation suggests that we write it as simple old javascript so that `babel` doesn't have to add a pollyfill for the ES7 syntax we will support this syntax for now
+
+```
+import React from 'react';
+import PropTypes from 'prop-types';
+function DumbComponent(props) {
+   return (
+     <div>
+       <p>{props.name} is awesome</p>
+     </div>
+   );
+}
+DumbComponent.propTypes = {
+  name: PropTypes.string,
+};
+DumbComponent.getDefaultProps = {
+  name: 'React-CLI'
+};
+export default DumbComponent;
+```
+
+### @withvoid/react-cli generate router
+
+This will init a react-router with 3 sample routes in your application
+
+**Note:** *If your code is in src/ folder, this command will assume that there is a App.js file inside that src folder and add those 3 routes in your application*
+
+>Again the purpose of this CLI is to make your code as easy as possible.
+
+## Strategy [Marketing]:
+
+- Initially write content through publications on Medium
+- Get feedback from community via twitter
+- Make vlogs on youtube 
+- Implement in our own projects 'dog fooding` If it's good for us then make it public for others.
+
+## Things I'd prefer to do,
+
+I don't want to provide boiler plate templates for adding style guides, linting rules, jest/enzyme/react-testing-library configurations. But rather write illustrative detail guides in this project in the form of documentation teaching developers on how to add into their projects themselves. So this project not only **scaffolds** the boilerplate but also becomes a hub for developers to get detailed instructions on integrating libraries. As I said we will follow *build on top of things* strategy for this project.