Getting Started with React And Redux

Emmanuel Morales · 22 May 2016

Post Thumbnail

Let’s create a small application using React and Redux…

“There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.” -C.A.R. Hoare (British computer scientist, winner of the 1980 Turing Award)

Introduction

Before starting, I would like to mention a basic list of technologies I considered in my project. The list can be longer if I get into details. Let’s expand this topic in a separate post. For now this is the core of the project.

  1. Webpack (Module bundler)
  2. SASS (Mature CSS extension language)
  3. React (A JavaScript library for building user interfaces)
  4. Google Material Design (The official Material Design library that doesn’t rely on JavaScript frameworks)
  5. React Hot Loader (Tweak React components in real time)
  6. Redux Dev Tools (A live-editing time travel environment for Redux)

Building web applications with these technologies require us to have a dependency on Node and NPM. Let’s make sure we have them install and configured:

  1. Download and install NodeJS
  2. Verify the installation by using node -v and npm -v

How to get started?

To get started with the step-by-step exercise, make sure you are able to run the development environment:

  1. Clone the following repository embengineering/react-redux-starting-kit
  2. Switch to directory cd react-redux-starting-kit
  3. Install NPM dependencies npm install
  4. Run in development mode npm run watch

If you haven’t decided on a good text editor for writing your React application, I’ll recommend to download Atom. For a nice experience working with React and ES6 in Atom, I recommend installing few extensions to give “super powers” to Atom. You can install them with one line from your terminal:

apm install auto-detect-indentation highlight-selected pigments react sort-lines tab-switcher todo-show open-recent minimap minimap-highlight-selected multi-cursor-plus

Re-Build a Mini Dashboard (The Right Way)

If you were able to accomplish the “get started” section, you should see a basic dashboard. The dashboard is using only one React component and hard-coded data. Data is passed to the React component using props from the ~/main.js (entry point).

The following step-by-step tutorial will help you build a better version of the dashboard: scalable, reusable and to easy to maintain.

In order to keep this tutorial short, I’ll guide you step-by-step using my commits from Github.

Refactor current dashboard with stateless components

Step 1: Create ~/components/Card.jsx component and refactor StaticMiniDashboard.jsx to use it.

Step 2: Create ~/components/WelcomeCard.jsx component and refactor StaticMiniDashboard.jsx to use it.

Step 3: Create ~/components/CardList.jsx component and refactor StaticMiniDashboard.jsx to use it.

Step 4: Create ~/containers/WelcomeCardContainer.jsx.

Step 5: Create ~/containers/CardListContainers.jsx.

Add Redux for organization and scalability

Note: At this point there will be no changes in the UI, just in the architecture.

Step 6: Define initial state ‘~/initialState.js’.

Step 7: Create ~/actions/miniDashboardActions.js and add constants to ~/constants.js.

Step 8: Create ~/reducers/welcomeCardReducer.js.

Step 9: Create ~/reducers/cardListReducer.js.

Step 10: Update ~/reducers/index.js to combine reducers.

Update the application to support Redux

Step 11: Rename ~/components/StaticMiniDashboard.jsx to ~/components/MiniDashboard.jsx and refactor to use containers.

Step 12: Update ‘~/main.js’ to finalize the implementation of Redux.

Step 13: Test http://localhost:8080/.

Integrate Firebase As Your Back-End Service (Optional)

Step 14: Create a valid JSON file with test data from ~/main.js (e.g. ~/data.json).

Step 15: Sign-up or sign-in to Firebase](https://console.firebase.google.com/) using your Google account.

Step 16: Create new database ‘your-custom-name-db’.

Step 17: Import ~/data.json JSON file into Firebase.

Step 18: Update ~/actions/miniDashboardActions.js to listen to your back-end service.

Step 19: Update ~/main.js to remove hard-coded data and start listening to new methods.

Step 20: Test http://localhost:8080/.

Like what you just read? Subscribe.