λ Lambda
A React Web boilerplate / scaffolding tool used at 111Studio
Install
This will include the lambda command in your PATH.
npm i -g lambda-cli
Available commands
lambda component
Scaffolds a React Component: Creates the component's jsx / less / spec files.
lambda component --or-- lambdathen type component in the cli.
lambda serve
Runs a webpack dev server including the following features:
- Hot module reloading
- Flow type annotations.
- ES6 / ES7 transpilation.
- Less compilation.
- Image file imports.
- Font imports.
- Crash on Flow type errors.
TODO : Auto import npm packages if not found in the project.Too dirty !TODO : Global file import resolves.Too dirty !
lambda serve
Project structure / guidelines
Project directory tree
src├── fonts├── images├── js│ ├── app│ │ ├── App│ │ │ ├── App.jsx│ │ │ ├── App.less│ │ │ └── App.spec.js│ │ ├── Footer│ │ │ ├── Footer.jsx│ │ │ ├── Footer.less│ │ │ └── Footer.spec.js│ │ ├── Header│ │ │ ├── Header.jsx│ │ │ ├── Header.less│ │ │ └── Header.spec.js│ │ └── SideBar│ │ ├── SideBar.jsx│ │ ├── SideBar.less│ │ └── SideBar.spec.js│ ├── article│ │ ├── Article│ │ │ ├── Article.jsx│ │ │ ├── Article.less│ │ │ └── Article.spec.js│ │ └── ArticleList│ │ ├── ArticleList.jsx│ │ ├── ArticleList.less│ │ └── ArticleList.spec.js│ ├── comment│ │ ├── Comment│ │ │ ├── Comment.jsx│ │ │ ├── Comment.less│ │ │ └── Comment.spec.js│ │ └── CommentList│ │ ├── CommentList.jsx│ │ ├── CommentList.less│ │ └── CommentList.spec.js│ ├── index.js│ ├── redux│ │ ├── action.js│ │ ├── article.js│ │ ├── comment.js│ │ └── store.js│ ├── routes│ │ └── Routes.jsx│ └── views│ ├── ArticleListView│ │ ├── ArticleListView.jsx│ │ ├── ArticleListView.less│ │ └── ArticleListView.spec.js│ └── ArticleView│ ├── ArticleView.jsx│ ├── ArticleView.less│ └── ArticleView.spec.js└── styles ├── config.less ├── layout.less ├── typography.less └── variables.less
Less guidelines
Styling components should follow these directives :
- All components should have their own less file.
- The wrapping dom element of each component should have a className equal to the component's name in kebab-case (All lowercase with - separating words.) ex: MyComponent => my-component
- The less styles definitions for the component should be wrapped inside the component's className :
.my-component .some-class foo: "bar"
Redux guidelines
All redux actions and reducers are in the .src/js/redux folder.
One file per redux entity should be created.
The file should include both reducers end action, and export them as reducers
and actions
.
const INIT_CONFIG = 'INIT_CONFIG'; const actions = { return type: INIT_CONFIG config ; } const reducers = { }
The reducers should be referenced in the ./redux/store.js
file.
The actions should be referenced in the ./redux/actions.js
file.
Type checking with flowtype
Code should be statically typed using flow type
Exemple:
; type Props = meaningOfLife: number type AppState = question: string Component description: 'Main App module for Deep Thought v0.42.0' props: Props state: AppState { superprops; thisstate = question: 'What is the meaning of Life ?' } : number return thispropsmeaningOfLife; { return <div className="app"> <h1>thisstatequestion</h1> <p><b>Deep Thought ></b> this</p> </div> ; } ;
TODO
Scaffold initial project.Scaffold Components.Serve the application for development.Bootstrap the inital redux setup.Build the application for production.- Run the test suite.
- Improve the cli interface (better help / more granular execution of commands with args).
- Build the doc generator.
- Build a component telemetry page.
░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░███░░░░░░░░░░░░░░
░░░░░░░░░░██░░░░░░░░░░░░░
░░░░░░░░░░░██░░░░░░░░░░░░
░░░░░░░░░░████░░░░░░░░░░░
░░░░░░░░░██░░██░░░░░░░░░░
░░░░░░░░██░░░░██░░░░░░░░░
░░░░░░░██░░░░░░██░░░░░░░░
░░░░░░██░░░░░░░░███░0.7.0
░░░░░░░░░░░░░░░░░░░░░░░░░