A simple React Redux starter recipe that includes an API call to retrieve a list of countries and displays the data in a table. The starter includes a navigation bar with a home route and an about route, and an animated loading spinner for asynchronous functions.
GitHub Link to Starter: https://github.com/xphong/simple-react-redux-starter
Example project using this starter: https://github.com/xphong/marvel-app
The main purpose of this package is to create a simple, minimal recipe for a front-end application starter with modern technologies. The objective is to save time when creating new applications and to minimize tooling choices within the modern ecosystem in order to get you up and running quickly. You can take a look at the technologies being used here.
This React Redux starter can fit into your solution by being used for quickly prototyping a front end application.
This starter can also be used as a decoupled web client that can be integrated with any back-end. An example, for my marvel app that searches the Marvel database for the characters using the Marvel API and shows the power levels of popular Marvel characters, I used this starter along with a Node.js server backend and Mongo Database.
Clone the repository https://github.com/xphong/simple-react-redux-starter:
git clone https://github.com/xphong/simple-react-redux-starter.git
Install Node: https://nodejs.org/en/
Install required dependencies:
npm install yarn -g yarn
npm run dev
npm run prod
npm run build
/index.htmlinto the root directory on the server and the
/staticdirectory on the server
├── README.md ├── index.html ├── package.json ├── server.js ├── webpack.config.dev.js ├── webpack.config.prod.js ├── yarn.lock ├── src/ | ├── actions | | ├── CountriesActions.js | ├── components | | ├── Countries.js | | ├── Country.js | | ├── Navbar.js | | └── Spinner.js | ├── constants | | └── ActionTypes.js | ├── containers | | ├── About.js | | ├── App.js | | ├── Countries.js | | └── DevTools.js | ├── reducers | | ├── countries.js | | └── index.js | ├── store | | ├── configureStore.dev.js | | ├── configureStore.prod.js | | └── configureStore.js | ├── styles | | └── main.scss | ├── index.js | ├── routes.js ├── .babelrc ├── .eslintignore ├── .eslintrc └── .gitignore
More information: https://facebook.github.io/react
More information: http://redux.js.org/
Flux data flow:
Redux data flow:
More information: http://babeljs.io/
More information: http://webpack.github.io/docs/what-is-webpack.html
Yarn is a dependency manager built on top of npm allowing for consistent and reliable versioning using a lockfile.
More information: https://yarnpkg.com/
React Router handles the routing, keeping your UI in sync with the URL.
More information: https://github.com/ReactTraining/react-router
This starter currently uses hashHistory to bypass configuring a server to get the application up and running. However, if you do have a server, it is recommended to use browserHistory for cleaner URLs and support for server-side rendering.
More information on React Router’s history: https://github.com/ReactTraining/react-router/blob/master/docs/guides/Histories.md
Redux Dev Tools is a development environment tool that aids in helping with the Redux workflow. Redux dev tools allows developers to inspect every state and action, in addition to “time-traveling” by going back and cancelling actions.
More information: https://github.com/gaearon/redux-devtools