Hackernews playground API with webpack/es6/redux/redux-observable/rxJx

This is sample small project build with React, Redux, RxJx, redux-observabled. Main purpuse of project is to create a playground to have production ready product which will do http request to hackernews and display it to user

Getting started

Clone the repo and install Node dependencies

git clone https://github.com/marcelijanowski/react-webpack-es6-boilplate.git
yarn install

Local development

• Run yarn build: this command is generating the bundles into dist folder.
• Your defulat web browser will open with localhost:9000

Components

Getting started

React components live in the components folder. Each component should be built in its own folder using Atomic design

Building new components

I generally use Stateless Functional (vanilla ES6) design for Atoms. We generally use React Components (extends React.Component) for molecules and organisms.

• I ensure components implement some kind of shouldRender() functionality to cover .isRequired props.
• I use a renderXYZ() style for partials, rather than inline { condition && <JSX /> }.
• We ensure all components have complete unit tests (not just snapshots).

Project Structure

.
├── dist                        # production build output
├── data                        # json mock data 
├── layout                      # template
└── src                         # app source code
    ├── components              # global reusable presentational components
    ├── containers              # container components providing redux context
    ├── reducer                 # redux reducer with action/epics/reducer
    ├── services                # modules abstracting communication with web 
    ├── utils                   # app utility modules
    └── index.js                # app entry module with routing config

Testing components

I'm using Jest, Enzyme to test components.

• Run yarn test

Production

• Run yarn build
• Dist folder will be create with production, minimized version