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.

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.

An Image showcasing the react icon.
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.


An image showcasing class based component.
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.

An image showcasing react functional component
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:

 
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.

apoorv-pic.jpg

Hi, thanks for stopping by!

Hope you are getting benefitted out of these articles. Don't forget to subscribe to the Newsletter where we will serve you with the curated content right at your mailbox.

Let the posts
come to you.

Sponsor the Author.