Redux Saga Tutorial | React JS, its setup. Creating class-based vs functional components. | Part 1.

A Complete Guide To Redux-Saga With React JS and Redux project.

Following is the overview of what we are planning to discuss in this article. So we will discuss a few of the following topics in the article in chronological order. This will be a 4 part series containing the information about React Saga.

• Redux Saga Tutorial | React JS, its setup. Creating class-based vs functional components. | Part 1

• Redux Saga Tutorial | Hooks Vs Lifecycle method in React components. | Part 2

• Redux Saga Tutorial | Redux setup in react React components. | Part 3

• Redux Saga Tutorial | Implement redux-saga with ReactJS and Redux.| Part 4

React Tutorial Overview article.

React JS Basics.

There are various React JS tutorials teaching the basics of React JS. Probably this is not the tutorial that will be focussing on teaching the basics of the technology, but I would call it a completely practical tutorial to set up React Saga. For the final react saga we need a basic setup of the React, Redux in react js application. Moreover, in the next few articles, we will discuss redux-thunk vs redux-saga.

So this article will specifically contain information about the setup of React JS application post the end of the article you will be able to find the link to another part of the article telling about the setup guide of the redux, redux-saga. Just for reference here is the link to official docs, Click here.

Setup React JS

For setting up react js we have a simple three-step setup.

npx create-react-app react-saga
cd react-saga
npm start

Once you are done with the above three commands, we are done with a basic application that will show you a basic react js page. Till now we were able to successfully create a bootstrap code for our react js application.

React JS boilerplate code.

Class-Based Component

Now let's create a very simple Class-based component inside the folder named container. We created a folder named container just to keep the component as in the future we will connect it with redux.

Generally, we keep the component that is connected with the Redux store.

React JS Class Based Component.

You can copy the code below.

import React, { Component } from "react";
export default class ClassBasedComponent extends Component{
    render(){
        return(
            <>
            I am class based component.
            </>
        )
    }
}

Functional Component

Now let's create another functional component, which is another way to create the component. Here we create a component just like any normal function.

Functional component with the help of hooks has provided us with access to state. Hooks like useEffect, useState, useSelector etc.

React Function based component.

You can copy the code here.

import React from 'react';

function FunctionBasedComponent(props) {
    return <h1>Hello, I am function based component.</h1>;
}

export default FunctionBasedComponent;

Here are a few react js examples, using function-based components and class-based components. Now we will discuss hooks and compare them with state and another lifecycle method in react js in the next part.

---

Here you can find the link for all the parts.

Important Links:

• Redux Saga Tutorial | React JS, its setup. Creating class-based vs functional components. | Part 1

• Redux Saga Tutorial | Hooks Vs Lifecycle method in React components. | Part 2

• Redux Saga Tutorial | Redux setup in react React components. | Part 3

• Redux Saga Tutorial | Implement redux-saga with ReactJS and Redux.| Part 4

---

Video Tutorial Link

A video tutorial explaining the above concept.

---

Github Source Code

Source Code Link: https://github.com/apoorvtomar2222/redux-saga-tutorial

---

About The Author

Apoorv Tomar is a Software developer and part of Mindroast. You can connect with him on Twitter, Linkedin, Telegram and Instagram. Subscribe to the newsletter for the latest curated content. Don’t hesitate to say ‘Hi’ on any platform, just stating a reference of where did you find my profile.