From 7482a156d02f0bd4d2e08f11a168c574284333f4 Mon Sep 17 00:00:00 2001 From: adeelibr Date: Sun, 9 Sep 2018 21:06:07 +0500 Subject: [PATCH 1/4] initial commit --- proposal.md | 128 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 128 insertions(+) create mode 100644 proposal.md diff --git a/proposal.md b/proposal.md new file mode 100644 index 0000000..4b3cbfe --- /dev/null +++ b/proposal.md @@ -0,0 +1,128 @@ +# 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 +$ rc // 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 +``` + +### @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 ( +
+ {this.state.foo &&

truthy

} +

{props.name} is awesome

+
+ ); + } +} +SmartComponent .propTypes = { + name: PropTypes.string, +}; +SmartComponent .getDefaultProps = { + name: 'React-CLI' +}; +export default DumbComponent; +``` + +### @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 ( +
+

{props.name} is awesome

+
+ ); +} +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. \ No newline at end of file From 34ab24671dd8d4cdac74053f769146b7f010cf02 Mon Sep 17 00:00:00 2001 From: adeelibr Date: Sun, 9 Sep 2018 21:11:19 +0500 Subject: [PATCH 2/4] spelling correct, white space removed --- proposal.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/proposal.md b/proposal.md index 4b3cbfe..287c494 100644 --- a/proposal.md +++ b/proposal.md @@ -86,13 +86,13 @@ class SmartComponent extends React.Component { ); } } -SmartComponent .propTypes = { +SmartComponent.propTypes = { name: PropTypes.string, }; -SmartComponent .getDefaultProps = { +SmartComponent.getDefaultProps = { name: 'React-CLI' }; -export default DumbComponent; +export default SmartComponent; ``` ### @withvoid/react-cli generate dc From 7bb90b433a38de9f37fd16065ca60916dd63d48c Mon Sep 17 00:00:00 2001 From: adeelibr Date: Sun, 9 Sep 2018 21:13:45 +0500 Subject: [PATCH 3/4] initial strategy idea --- proposal.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/proposal.md b/proposal.md index 287c494..5ff621d 100644 --- a/proposal.md +++ b/proposal.md @@ -125,4 +125,11 @@ 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. \ No newline at end of file +>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. \ No newline at end of file From 8582e12d699000d669a002fda067201dfbfeed53 Mon Sep 17 00:00:00 2001 From: adeelibr Date: Sun, 9 Sep 2018 21:18:01 +0500 Subject: [PATCH 4/4] personal vision --- proposal.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/proposal.md b/proposal.md index 5ff621d..696a4a2 100644 --- a/proposal.md +++ b/proposal.md @@ -132,4 +132,8 @@ This will init a react-router with 3 sample routes in your application - 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. \ No newline at end of file +- 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. \ No newline at end of file