Skip to content

Files

Latest commit

 

History

History

todomvc

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
app
app
 
 
build
build
 
 
.babelrc
.babelrc
 
 
README.md
README.md
 
 
package.json
package.json
 
 
webpack.config.js
webpack.config.js
 
 

README.md

TodoMVC

It is easy and fast to learn how a design pattern works by implementing a todo list.
Here we implement a todo list using Redux architecture.
(Click the above title link to see demo)

Project structure

|-- todomvc
    |-- .babelrc 		  # Babel configuration file, makes us able to write es6 syntax
    |-- README.md		  # Ignore it
    |-- package.json 	  # Node package configuration
    |-- webpack.config.js # Webpack configuration file
    |-- app               # App src code
    |   |-- index.js      # Entry point of app, config in webpack.config.js
    |   |-- __tests__     # Jest unit test
    |   |-- actions       # Redux actions
    |   |-- components    # React dumb component
    |   |-- containers    # React smart component, composed by dumb component
    |   |-- reducers      # Redux reducers
    |   |-- store         # Redux store
    |-- build             # Webpack build/deploy output folder
        |-- bundle.js  	  # You can change output file name in webpack.config.js
        |-- index.html 	  # After build or deploy, you can open this file to see demo
        |-- style.css     # You can change output file name in webpack.config.js

Setup workflow

Installation

First open your command line, clone this project (suppose you have installed git command line tool) or simply download the ZIP to your prefered directory .

git clone https://github.com/HowardLoTW/react-redux-sample.git
cd react-redux-sample/todomvc

Suppose you have installed nodejs (required node version 4.x or upper. I'm using node v5.3.0 & npm v3.3.12).
Type 'npm install' in your command line to install dependencies.

npm install

Development

npm run dev

Open your browser and navigate to http://localhost:8080/webpack-dev-server/

Testing

npm run test

Build

npm run build

Deploy

npm run deploy

About CSS with React

In this project, I use the following css tools and it works well with React. And of course you can use another css tools to write css in your project.

  1. Css Modules
  2. classnames

You can checkout the following talks for more information:

  1. The case for CSS modules - Mark Dalgleish
  2. Michael Chan - Inline Styles: themes, media queries, contexts, & when it's best to use CSS
  3. CSS with React.js

Reference

  1. More setup workflow information, please refer to react-webpack-cookbook
  2. Learn to implement Redux architecture in React app
  3. More Redux example