CRUD Operation Using React Redux - Part One

Introduction

 

We will learn the React-Redux structure step-by-step by separating it into three parts.

• Part 1: Install & Configure React Application
• Part 2: Configure Redux structure in React App
• Part 3: Perform CRUD operations using React Redux

In this article (Part 1), we will learn basic ideas about React applications and how to Install or configure predefined React applications.

 

  React

 

React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

• Official Site

  React 's Redux Architecture

 

Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

 

  Visual Studio Code

 

Visual Studio Code is a source code editor developed by Microsoft for Windows, Linux, and macOS. It includes support for debugging, embedded Git control and GitHub, syntax highlighting, intelligent code completion, snippets, and code refactoring.

 

Normally there are lots of editors available for the development of React applications. But Visual Studio Code is free & open-source, so I suggest using Visual Studio code editor to develop them.

 

Configure React applications (using create-react-app)

 

Create React App is a tool (built by developers at Facebook) that gives you a massive head start when building React apps. It saves you from time-consuming setup and configuration. You simply run one command and Create React App sets up the tools you need to start your React project.

 

It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 8.10 and npm >= 5.6 on your machine. 

 

Create React App doesn’t handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. Under the hood, it uses Babel and webpack, but you don’t need to know anything about them.

• For More Details

npx create-react-app crud-react-redux
cd crud-react-redux

The above command uses the create-react-app CLI tool to generate a react boilerplate project for us so that we don’t have to configure any tooling. If that command fails for you or gives out an error make sure you have create-react-app installed on your machine. If not do the following and then run the above command.

npm install -g create-react-app

After successfully installing create-react-app globally in your machine, now you can create your React application using create-react-app crud-react-redux. This command will automatically create a predefined folder structured React application on your defined path. You can see the folder structure and predefined project like just below.

 

 

Run React application:

npm start or npm run start  or yarn start

Summary

 

There's no need for extra configuration to deal with basic React applications. You just need to install the create-react-app package globally and use the create-react-app command to create predefined default React applications, which you can run with simple npm start or npm run start or yarn start command.