How to Build a ToDo App Using React, Redux, and Webpack

Build a to-do app using #ReactJS, #Redux, and #Webpack:

  • Let’s get started.TL;DRDownload the GitHub repo.Check out the demo.Getting Started:First, let’s make a new directory to build our project in and lets also make a package.json file.mkdir touch package.jsonNow, in your package.json, copy and paste the code below and then run npm install or yarn (if you’re a super cool yarn “name”: “cosmicToDo”, “version”: “1.0.0”, “description”: “A simple todo app thet uses the Cosmic JS API”, “main”: “index.js”, “scripts”: { “start”: “nodemon server/index.
  • js”, “build”: “webpack -w”, “test”: “echo \”Error: no test specified\” exit 1″ }, “author”: “”, “license”: “ISC”, “dependencies”: { “axios”: “^0.16.1”, “react”: “^15.5.4”, “react-dom”: “^15.5.4”, “react-redux”: “^5.0.4”, “redux”: “^3.6.0”, “redux-logger”: “^3.0.1”, “redux-thunk”: “^2.2.0”, “css-loader”: “^0.28.0” }, “devDependencies”: { “babel”: “^6.5.2”, “babel-core”: “^6.18.0”, “babel-loader”: “^6.2.7”, “babel-preset-es2015”: “^6.18.0”, “babel-preset-react”: “^6.16.0”, “cross-env”: “^3.1.4”, “nodemon”: “^1.11.0”, “volleyball”: “^1.4.1”, “webpack”: “^2.2.1”, “webpack-livereload-plugin”: “^0.10.0”, “sass-loader”: “^6.0.3”, “style-loader”: “^0.16.1” }}What we’re installing and why:We’re going to use the axios library to handle our requests to our Cosmic JS bucket.We’re installing react and react-dom to build our react components.We are going to use redux, react-redux, redux-logger, and redux-thunk to help us implement what is called the Flux architecture.The only thing worth mentioning in the dev dependencies is webpack and volleyball.
  • /reducer’;import thunkMiddleware from ‘redux-thunk’;import {createLogger} from ‘redux-logger’;const store = createStore( reducer, applyMiddleware( createLogger(), thunkMiddleware ));export default store;What’s going on here:We are setting up our redux “store” so that we can pass data down through “props” into whatever components we want (I am going to assume you have some working knowledge of how the flux architecture functions, if you do not understand this it is OK, just check the flux architecture link above).
  • /components/Home’;import {Provider} from ‘react-redux’;import store from Provider store={store} Home / /Provider, going on here:We are telling ReactDOM to target our “root” div from our index.html file and pop in our Home/ react component (which we will build out in our next step).
  • /Task’;class Home extends Component { constructor(props){ super(props); } componentDidMount(){ getAllTasks(); } render() { return ( div div className=”container” div className=”row” div className=”col-xs-12″ h1Cosmic To-Do App!!

In this tutorial I’m going to show you how to create a simple “ToDo” app using React, Redux, a little bit of Node, and Cosmic JS. For the sake of understanding how to consume Restful API’s, this…

@ReactiveConf: Build a to-do app using #ReactJS, #Redux, and #Webpack:

This article originally appeared on the Cosmic JS Blog.

In this tutorial I’m going to show you how to create a simple “ToDo” app using React, Redux, a little bit of Node, and Cosmic JS. For the sake of understanding how to consume Restful API’s, this tutorial will show how to make simple AJAX requests to the Cosmic JS API in order to retrieve, update, and delete data in our Cosmic JS buckets. Let’s get started.

Check out the demo.

First, let’s make a new directory to build our project in and lets also make a package.json file.

Now, in your package.json, copy and paste the code below and then run npm install or yarn (if you’re a super cool yarn user):

“name”: “cosmicToDo”,

“version”: “1.0.0”,

“description”: “A simple todo app thet uses the Cosmic JS API”,

“main”: “index.js”,

“scripts”: {

“start”: “nodemon server/index.js”,

“build”: “webpack -w”,

“test”: “echo \”Error: no test specified\” && exit 1″

“author”: “”,

“license”: “ISC”,

“dependencies”: {

“axios”: “^0.16.1”,

“react”: “^15.5.4”,

“react-dom”: “^15.5.4”,

“react-redux”: “^5.0.4”,

“redux”: “^3.6.0”,

“redux-logger”: “^3.0.1”,

“redux-thunk”: “^2.2.0”,

“css-loader”: “^0.28.0”

“babel”: “^6.5.2”,

“babel-core”: “^6.18.0”,

“babel-loader”: “^6.2.7”,

“babel-preset-es2015”: “^6.18.0”,

“babel-preset-react”: “^6.16.0”,

“cross-env”: “^3.1.4”,

“nodemon”: “^1.11.0”,

“volleyball”: “^1.4.1”,

“webpack”: “^2.2.1”,

“webpack-livereload-plugin”: “^0.10.0”,

“sass-loader”: “^6.0.3”,

Now we’re going to build out our file structure a bit more so that we can organize our react components and redux files. This is what our cool-cosmic-todo-app directory should look like:

Now we we will set up our index.html in our client directory. Copy and paste the following code into your index.html file:

Here, we are going to target our “root” div to place our react components in later. The bundle.js file located in our dist directory is what our webpack.config file will spit out after bundling all of our react components Now, set up our webpack.config file to bundle all of our react files and export that bundle file to our dist directory. Copy the following code into your webpack.config.js file:

filename: ‘bundle.js’,

context: __dirname,

extensions: [‘.js’, ‘.jsx’, ‘.json’, ‘*’]

test: /\.jsx?$/,

loader: ‘babel-loader’,

presets: [‘react’, ‘es2015’]

test: /\.scss$/,

Here, we are simply telling webpack to output a bundle.js file into our dist folder with all of our react components bundled in there as well. The babel-loader is simply transpiling JavaScript files using babel and webpack. The live reload plugin allows us to make changes to our files and automatically have webpack watch and “re-bundle” with our updated changes. Next, we’re going to us a little bit of node with express to serve up our index.html file as well as our bundle.js file. Realistically, we aren’t really making requests to our own node backend, but it’s good to use node as a method to serve us static files. Copy and paste the code below into our index.jsfile located in our server directory.

Here, we are simply telling our server to serve up static files out of our node_modules and client directories. The ‘*’ route is basically telling express to serve up our index.html on any route requested within our app. Finally, we are telling express to listen on port 3000. Feel free to try it out! Run npm start or yarn start and see our “Rockin’ out on port 3000 homie” message log put to the console! Next, let’s set up our redux store.js file, located in our client/redux folder. Copy and paste the following code into the store.js file located in our client/redux folder:

constructor(props){

super(props);

componentDidMount(){

getAllTasks();

render() {

return (

Cosmic To-Do App!!

evt.preventDefault();

this.props.postNewTask(evt.target.taskName.value);

evt.target.taskName.value = “”;

Let’s get some work done!

return (

Side note -> I personally like to store all of my constants, actions, and action dispatcher functions inside of one file for every reducer that I have just so I’m not contantly jumping from file to file. It’s totally common and cool to break these up into seperate files.

We were able to consume the Cosmic JS API with our actions and dispatcher functions. If you’re a little iffy on how how all the files work in conjunction with our store check out this gif to get a better picture of how redux is passing data around the app. I hope you enjoyed this tutorial as much as I did, if you have any questions reach out to us on Twitter and join our community on Slack.

How to Build a ToDo App Using React, Redux, and Webpack