Redux-Minimal is a minimalist react-redux starter kit (boilerplate) which let's you build rich real world apps. It's not as light as some starter kits which only let you write a simple hello world app and then you have to struggle with installing all the other stuff yourself. And it's also not as packed as other starter kits which confuse you massively with its folder/file structure and arcane scripts.
Redux-Minimal contains the bare minimum to develop a real world complex app and it also comes with a small users app that will show you how to code certain features. A demo of the app can be seen here: http:https://redux-minimal-app.catalin-luntraru.com
-
Before you start working with redux-minimal, you first need to setup your environment. Make sure you have the following installed:
- Git
- NodeJs and Npm
- an IDE to write js code in, for example Webstorm
-
Once your environment is prepared, open a command prompt (terminal) and type in the following:
cd C:\js\node\apps git clone https://github.com/catalin-luntraru/redux-minimal.git hello-world cd hello-world npm install npm start
-
Then open your http:https://localhost:8080/ to see the included small users app. Congratulations! You can now write react redux code.
-
For more productivity you can install Chrome's React Developer Tools and Redux Dev Tools
I made a video tutorial series, to help people out getting started with react and redux. It covers the basics, like what is react, redux, etc, and also setting up the environment with redux-minimal and guiding you step by step with creating the demo users app. You will also understand why code was written this way, where refactoring was needed, etc.
Redux-Minimal contains the minimum npm packages you need to have installed in order to build a react redux real-world app containing:
- a proper file/folder structure
- pages (routes)
- forms with validation
- real-world API asynchronous requests
- unit tests
- bootstrap react components
- sass
- hot loader for ease of development
- redux tools
- js and css bundle files built for development or production
The code and implementation are minimal, which lets you focus on the real app, not the webpack, babel, gulp etc boilerplate files, which honestly you shouldn't even bother with.
Here are the npm packages that redux-minimal installs:
Feature | Packages | Benefits |
---|---|---|
React | react |
A declarative, efficient, and flexible JavaScript library for building user interfaces |
react-dom |
Serves as the entry point of the DOM-related rendering paths | |
react-hot-loader |
Tweak React components in real time when developing | |
Redux | redux |
A predictable state container for JavaScript apps |
react-redux |
React bindings for Redux | |
redux-freeze |
Redux middleware that prevents state from being mutated anywhere in the app | |
Router | react-router |
Declarative routing for React. Your app has pages now |
react-router-redux |
Simple bindings to keep react-router and redux in sync | |
Bootstrap | react-bootstrap |
Bootstrap 3 components built with React |
react-router-bootstrap |
Integration between React Router and React-Bootstrap | |
Forms | redux-form |
A Higher Order Component using react-redux to keep form state in a Redux store |
Asynchronous | redux-saga |
Asynchronous API calls made easy with Saga |
Unit tests | mocha |
Simple javascript test framework |
enzyme |
JavaScript Testing utilities for React components | |
react-addons-test-utils |
Required by enzyme. Makes it easy to test React components | |
ignore-styles |
Ignore imported style files when running in Node | |
Sass | node-sass |
Mature, stable, and powerful CSS extension language |
Webpack | webpack |
A bundler for javascript, css and others |
webpack-dev-server |
Serves the app at http:https://localhost:8080/ | |
extract-text-webpack-plugin |
Webpack plugin that builds the css bundle file | |
style-loader |
Webpack module that loads styles | |
css-loader |
Webpack module that loads css styles | |
sass-loader |
Webpack module that loads sass styles | |
clean-webpack-plugin |
Webpack module to remove previous build files | |
Babel | babel-core |
Compiler that helps node.js and the browser to understand the new js syntax |
babel-runtime |
Helps node.js to understand the new js syntax | |
babel-preset-es2015 |
Helps node.js to use ES2015 Javascript syntax | |
babel-preset-react |
Helps node.js to use React's JSX syntax | |
babel-preset-stage-3 |
Helps node.js to use the spread operator | |
babel-loader |
Helps webpack to compile the new javascript syntax | |
babel-polyfill |
Helps the browser to understand the new js syntax | |
whatwg-fetch |
Helps the browser to use fetch |
You can use the express branch if you want to use express instead of webpack-dev-server.
If you don't want to use localhost on port 8080, you can change it in package.json
and webpack.config.js
.
Redux-Minimal also contains a small sample app that let's you manage some users with the following features:
- a list of users with pagination
- add a new user
- edit an existing user
- delete a user
The sample app provides you with basically most of the things you will need when building a new real-world app.
The demo for the app can be found here: http:https://redux-minimal-app.catalin-luntraru.com
-
Open
webpack.config.js
and change theapp_root
value fromsrc_users
tosrc
-
Run
npm start
-
Congratulations! You now have a blank
Hello world
starting app
Besides the start
script, there are also other scripts
npm run <script> |
What it does |
---|---|
start |
Starts the app at http:https://localhost:8080/. The bundle js/css files are stored in memory |
test |
Starts the unit testing using all the files found in the test folder |
test-watch |
Starts the unit testing and watches for changes to re-run the tests |
build-dev |
Builds the js/css bundle files in the public folder. Adds debugging code for development |
build-prod |
Builds the js/css bundle minified files in the public folder |
This project is licensed under the MIT license, Copyright (c) 2016 Catalin Luntraru.