This project is designed to get you up and running with the latest front end frameworks.
| TAG | Source |
|---|---|
build |
Monitored by Travis CI |
dependencies |
Monitored by david-dm.org |
devDependencies |
Monitored by david-dm.org |
code style |
Monitored by shields.io |
The main objective of this project is to provide a solid foundation for you to build production ready applications using(but not limited to) ReactJS and Redux. It should be flexible enough for you to customize to your own needs, it also is intentionally brief in examples and assumptions. The more opinionated the starter project is, the more difficult it becomes to extend.
If you notice anything that could be improved with this project, please submit a PR. The intention is to provide the greatest benefit to the ever-changing and expanding JS ecosystem.
Clone the react-redux-prod-starter project
$ https://github.com/btg5679/react-redux-prod-starter.git <my-project-name>
$ cd <my-project-name>Install the dependencies
$ yarn # Install project dependencies (or `npm install`)$ yarn start # Start the development server (or `npm start`)Yarn Start fires up a webpack-dev-server instance, there is a lot going on here that is covered below in detail. This will be your most used command during development. There are other scripts offered out of the box:
yarn <script> |
Description |
|---|---|
start |
Serves your app at localhost:8080 |
build |
Webpacks the application for Production to ./dist |
test |
Runs unit tests with Jest. See testing |
test:watch |
Runs test in watch mode to re-run tests when changed |
lint |
Lints the project for potential errors |
lint:fix |
Lints the project and fixes all correctable errors |
ReactJs is a declarative, component-based library for building UI's.
Redux is a predictable state container for Javascript apps. Tt helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger. In addition to redux-devtools, this project also comes loaded with the following redux related libraries:
- redux-mock-store A mock-store that aids in testing, there is an example in App.spec.js
- redux-thunk Thunk middleware for Redux. What is a Thunk? Check here for an answer from Dan Abramov himself.
- react-redux Official React bindings for Redux.
mapStateToProps,Provider,connect,etc..
At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.
This project contains 2 webpack config files, webpack.config.js which is used during Development and webpack.production.config.js which is used when creating a Production bundle.
Our webpack development config utilizes a number of plugins that make our dev lives a bit easier including webpack-dev-server, react-hot-loader, html-webpack-plugin.
You will also want to make not of the loaders contained in modules.rules, that tell webpack how to handle specific types of files(css, jsx, ts, etc..). More about loaders here.
We use Connected React Router for routing, it's a package discributed under the React Router monorepo. In addition, React Router Dom for router DOM bindings via Route and Link modules.
We could have included Babel under the webpack header, but there is a lot to Babel and so it gets its own header. Babel is a compiler that works with webpack to allow us to use next generation(ECMAScript 2015+) Javascript today. There are a number of Babel libraries included in this project, most notably babel-preset-env and babel-preset-react
eslint is the industry standard Javascript/JSX Linter. This project extends the standards set forth by AirBnB.
Aphoridite is one of the common solutions to the CSS in Javascript problem. It supports server-side rendering, browser prefixing, and minimum CSS generation.