This starter kit provides you with the code and conventions you need to get straight into building your React/Redux based app.
Prerequisites: node.js and git
git clone https://github.com/heyitsvajid/react-starter-kit.git <your-repo-name>
cd <your-repo-name>
npm install
npm start
npm run open # (from a different console window, otherwise open localhost:3000)
Awesome, you've got a ready-to-customise application!
- Your directory structure is sorted as soon as you
git clone
- ES6 compilation and automatic-reloading development server are configured for you with webpack and Babel
- Redux is an incredibly simple way of modelling your data, with great community support
- React is an incredibly simple way of rendering your views, and is maintained by Facebook
- The actors pattern allows you to easily react to changes on your store without forcing a re-render
- Your redux store is already configured with navigation, data and view models
- Update name, desription and author in
package.json
- Update app title in
src/index.html
- Restart the dev server (make sure to do this after any changes to
src/index.html
)
- Add a component for your route in
src/components
- Add tests for the component in
src/__tests__
with filename convention as<Component-Name>.test.js
- Add reducers and actions types for your component's view model in
src/redux/reducer
andsrc/redux/actionTypes
if required - Bask in the glory of your creation
- Don't forget to commit your changes and push to Bitbucket or GitHub!
- Run
npm run validate
to verify if everything is good. - This will run 3 scripts internall using
npm-run-all
package.-
format
-> This will formate the code as per ES6 Javascript standard. -
eslint
-> This will run eslint in thesrc
directory files and provide any static code issues. -
test
-> This will run all tests and provide the results.
-
Note: Husky prehooks are configured so it will run the validate
script when you try to commit and stop if any errors.
- Run
npm run build
to output a web-ready build of your app tobuild
src/__tests__
- All unit tests go heresrc/assets/stylesheets
- Helpers for stylesheets for individual componentssrc/assets/img
- All images goes in heresrc/components
- React components, stateless where possiblesrc/redux
- All reduc reducers and action types are diefined heresrc/stories
- Open source tool for building UI components and pages in isolation Linksrc/utils
- General code which isn't specific to your application
build
- Intermediate files produced by the development server. Don't touch these.coverage
- This folder will be generated when you runnpm run cover
script. It will have code coverage details.
index.js
- Your application's top-level React componentpublic/index.html
- The single page for your single page applicationApp.js
- The application's entry pointsrc/assets/stylesheets/index.css
- Global styles for your application
-
start
: To start the project on local development server -
build
: To create production build (build
folder will be generated) -
test
: To run unit tests -
cover
: To run test and see coverage results. -
storybook
: To run storybook environment -
build-storybook
: To build stories -
lint
: To run eslint code checking -
validate
: To run prettier, eslint and unit tests with one command -
format
: To format the files based on ES6 standard
Anyone and everyone is welcome to contribute. Start by checking out the list of open issues marked help wanted. However, if you decide to get involved, please take a moment to review the guidelines.
Copyright © 2021-present heyitsvajid. This source code is licensed under the MIT license found in the LICENSE file.
Made with ♥ by Vajid Kagdi (@heyitsvajid, blog) and contributors.