React Redux Starter by @thepracticaldev #javascript #reactjs #redux via @JavaScriptKicks

  • Recently, I updated my react-starter project by adding the following notable changes: – – I was undecided between whether or not to introduce more advanced libraries like Redux and React-Router for example.
  • The react-redux-starter project is a basic template that consists of the essential elements that are required to start building a Single Page Application (SPA) using React, React Router, Redux, Bootstrap 4, Sass, and Webpack.
  • The following diagram illustrates how data is fetched using Redux and a Zip Code Service: – – Additionally, the template provides a development and production webpack configuration.
  • After running the above command, a browser window will open displaying an interactive graph resembling the following image: – – This will run the ‘serve:dev’ npm task – – The above command will display a dashboard view in your console resembling the following image: – – This command will build…
  • I will be updating and tweaking over time to try and align the project as an ideal starting point to learning how to build React applications using Redux, Webpack and React Router.

A basic template consisting of the essential elements required to build a Single Page Application using React, React Router, Redux, Bootstrap 4, Sass, and Webpack

Recently, I updated my react-starter project by adding the following notable changes:

I was undecided between whether or not to introduce more advanced libraries like Redux and React-Router for example. In the end I decided to create a new starter project called react-redux-starter that serves as more of an advanced starter project for those wanting to work with Redux and React-Router in addition to React. Therefore, in this post I will describe what is available in the react-redux-starter project.

The react-redux-starter project is a basic template that consists of the essential elements that are required to start building a Single Page Application (SPA) using React, React Router, Redux, Bootstrap 4, Sass, and Webpack.

Although I am calling this project a template of sorts, it is also a mini application in that it demonstrates a full vertical slice of the architecture. What this means, is that there is an example of Redux and React-Router in action. I provide a very simple component that fetches a list of zip codes. I kept the example simple by providing data via a ‘Zip Code JSON file’. This simple component does however illustrate the use of Redux Actions, a Redux Container, and a Redux Store.

The following diagram illustrates how data is fetched using Redux and a Zip Code Service:

Additionally, the template provides a development and production webpack configuration.

React Redux Starter