reactSearchApp
A client side application to view a custom search
Getting Started
Install npm packages
$ npm install
Start the server
$ npm start
Open up http://localhost:5000 in your browser.
Basic Usage
Running tests
This project uses Istanbul for code coverage with mocha for the test framework, chai library for assertions and test doubles as well as enzyme for React compatability.
This will run all tests in the ./test directory.
Coverage
A coverage report will be generated by running the $ npm test command and outputted into the build directory.
Open the lcov-report for an overview of your code coverage:
$ open ./coverage/lcov-report/index.html
React-Redux Project Structure
Outline the structure of the project.
Source ./src/
Main project source.
Components ./src/components/
React components. Mostly dumb components.
Constants ./src/constants/
Stuff that doesn't change. Redux action types.
Containers ./src/containers/
React components that serve as containers for multiple dumb components. These should connect React components to a Redux store using the react-redux connect method.
The connect method will map state to props by subscribing to a store that has been passed though the components context and will tell the component to update whenever the state changes.
Connect can also map dispatch to props by connecting action creators to and to the store dispatch method allowing the props to be invoked directly (rather than store.dispatch({type: 'MY_ACTION', id: 1, other_stuff: 'blah'})).
Ducks ./src/ducks/
A duck is an isolated module that is self contained, and can even be packaged easily into a library. Each module contains all of its related constants, actions/action creators, and it’s reducer. Normally you would have seperate folders for your reducers and actions, etc... With ducks, rather than split up all this related code, we package it all in redux modules.
When you are creating these modules you generally want to contain the entire logic for handling only ONE concept in your app, ex: product, cart, session, etc. You should also have an index.js file that exports according to the original duck rules.
The rules for creating a duck/module:
- MUST export default a function called reducer()
- MUST export its action creators as functions
- MUST have action types in the form npm-module-or-app/reducer/ACTION_TYPE
- MAY export its action types as UPPER_SNAKE_CASE, if an external reducer needs to listen for them, or if it is a published reusable library
for additional information: https://github.com/erikras/ducks-modular-redux
Store ./src/store/
Custom store for adding middleware.
Configuration
Settings
There are two setting configurations: Development and Production. Both of these settings inherit from the Common settings.
Common webpack.common.js
- Provide entry endpoints
- Output endpoints
- Common plugins
Development webpack.local.js
- Local plugins
Production webpack.production.js
- Minimize code
- Production plugins