DEV Community: Elwin Jyothis

React Basics | Part - 4

Elwin Jyothis — Tue, 22 Feb 2022 07:33:49 +0000

Heyyo devs, welcome to part 4 of the React series. In this section, we will take look at some of the higher order functions of JavaScript which we will use often in React.If you haven't checked out part 3, click here.

What are higher order functions in JavaScript?
Higher order functions are those functions which can take a function as a parameter to perform a functionality or return a function.

Lets see in detail what it really is. A function can accept parameters, which can be any kind of data an integer, string, array etc. These parameters can be used anywhere inside the function. In case of higher order functions, these parameters can be a function itself. There are some built-in higher order function:

map
filter
forEach
reduce

We will be using map and filter function most of the time.

Now lets start with our webapp!
In our app we need to show all the items in the cart. In order to achieve this, we have to store this data as a state of the cart component. There will be multiple products in the cart, so the best practice to store these products are in an array. Each product will be an object with its details such as the product name, quantity and price.

product = {
    id: 1,
    product_name: "Product 1",
    price: 25.0,
    quantity: 1
}

The above snippet is a prototype of how each product's data will be stored. All of the products as objects will be kept inside an array which will be stored as the state of the component. Let us look at the below snippet.

src/components/Cart.jsx

import React from 'react';

export default class Cart extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            products: [
                {id: 1, product_name: "Product 1", price: 25.0, quantity: 1},
                {id: 2, product_name: "Product 2", price: 10.50, quantity: 3},
                {id: 3, product_name: "Product 3", price: 8.25, quantity: 1},
            ]
        }
    }

    render () {
        return (
            <h1>Hello, world</h1>
        )
    }
}

We can display this array as HTML template. Yes!! isn't that amazing.

If you are good with HTML then do your magic 😉. You can follow along if you are new to this.

import React from 'react';

export default class Cart extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            products: [
                {id: 1, product_name: "Product 1", price: 25.0, quantity: 1},
                {id: 2, product_name: "Product 2", price: 10.50, quantity: 3},
                {id: 3, product_name: "Product 3", price: 8.25, quantity: 1},
            ]
        }
    }

    render () {
        return (
            <div className="products">
              <div className="product">
                <div className="product__details">
                  <h3>Product 1</h3>
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam dolorum ipsum ex?</p>
                  <h3>$25</h3>
                </div>
                <div className="product__quantity-container">
                  <button>+</button>
                  <p>2</p>
                  <button>-</button>
                </div>
              </div>
            </div>
        )
    }
}

You can write the above HTML in your render function. In the above snippet we can see a <div> with className product, we will use the map function to repeat this <div> for the length of the products array. Let us analyze how a map function works.
NOTE - Normal class attribute does not work in jsx. It is written as className in React.

In our case, the instructions to execute for each item will be a small HTML template. We can change the Cart component as below.

import React from "react";

export default class Cart extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      products: [
        { id: 1, product_name: "Product 1", price: 25.0, quantity: 1 },
        { id: 2, product_name: "Product 2", price: 10.5, quantity: 3 },
        { id: 3, product_name: "Product 3", price: 8.25, quantity: 1 },
      ],
    };
  }

  render() {
    return (
      <div className="products">
        {this.state.products.map((product) => (
          <div className="product">
            <div className="product__details">
              <h3>Product 1</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam dolorum ipsum ex?</p>
              <h3>$25</h3>
            </div>
            <div className="product__quantity-container">
              <button>+</button>
              <p>1</p>
              <button>-</button>
            </div>
          </div>
        ))}
      </div>
    );
  }
}

Whenever you want to write some JavaScript code inside an HTML template, you need to write it inside a curly braces. And yes, you can write more HTML inside those curly braces too.
In the above snippet, we can see the map function called inside the curly braces. The array for the map function is the products array inside the state. So as discussed in the last blog, products array will be called like this.state.products along with that you can use any of the higher order function as you wish. Now if you check your browser, the <div> with className product will be repeated thrice because there are 3 items in the this.state.product array.

In each iteration of the map function, the item element will be an object containing all the data of the product. As discussed in the last blog, we can call the keys in the item object. Lets see how it is done.

import React from "react";

export default class Cart extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      products: [
        { id: 1, product_name: "Product 1", price: 25.0, quantity: 1 },
        { id: 2, product_name: "Product 2", price: 10.5, quantity: 3 },
        { id: 3, product_name: "Product 3", price: 8.25, quantity: 1 },
      ],
    };
  }

  render() {
    return (
      <div className="products">
        {this.state.products.map((product) => (
          <div className="product">
            <div className="product__details">
              <h3>{product.product_name}</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam dolorum ipsum ex?</p>
              <h3>${product.price}</h3>
            </div>
            <div className="product__quantity-container">
              <button>+</button>
              <p>{product.quantity}</p>
              <button>-</button>
            </div>
          </div>
        ))}
      </div>
    );
  }
}

Change your template like the above snippet and check your browser.

TADA!!

It looks awful ofcourse. Lets add some stylesheets.

Organizing your resources is important. So create a folder in src named assets. Inside assets create a stylesheet named main.css.

The stylesheet is pretty huge so you can download mine here. This downloaded file can be replaced with the one we just created

Linking stylesheet
In React you cannot directly link a stylesheet to the index.html file. We will have to add it as an import statement in the Component jsx file. You can create different stylesheets for each component in your app but for the purpose of the tutorial I will be using one single global stylesheet for the whole app. In this case, I will add the stylesheet to the App.jsx file.

src/App.jsx

import Cart from "./components/Cart";
import "./assets/main.css";

function App() {
  return <Cart />;
}

export default App;

You can change the App.jsx file like the above snippet. The import statement in line 2 will include the css file and apply the styling. If you are creating different css file for each component then you should import the correct css file in their respective component.

After the stylings it will look like this.

That's it for today!!
Thanks for reading 😊

React Basics | Part - 3

Elwin Jyothis — Sun, 20 Feb 2022 15:19:42 +0000

Hey developer, welcome to part 3 of the React Basics series. In the last part we learned to setup a React project and looked at different types of React components. In this part as promised, we will be learning about states of a component.

State of a Component
As discussed in the earlier parts, React has the ability to render values of variables in an HTML template. This funtionality can be performed with the help of state of a component.

Let's take an example of our Cart component.

src/components/Cart.jsx

import React from 'react';

export default class Cart extends React.Component {
    render () {
        return (
            <h1>Hello, John</h1>
        )
    }
}

Localhost

Here, the name john is hard coded into the template(in the render function). But let's say this name John should change when user interacts with the webapp. In order to do this we use the amazing power of Component State. We can define a variable which will hold this changing name and just simply call the variable in the template. Let us do that then.

Before that we need to understand the basic idea of how a constructor in classes work.

A constructor, in simple words, is a set of instructions to run as soon as a class is called. These instructions can be creating essential variables, calling APIs to store essential data for the application/component and many more. In our case we will initialize a state for our component. Let us analyze the below snippet.

src/components/Cart.jsx

import React from 'react';

export default class Cart extends React.Component {
    constructor () {
        this.state = {}
    }

    render () {
        return (
            <h1>Hello, John</h1>
        )
    }
}

You can see a constructor keyword before the render method. This is how we define a constructor for a particular class in JavaScript. Inside the curly braces, we will define all the instructions to run at call. Here we can see a variable getting initialized this.state which is assigned to...well..two curly braces 😕. This is actually how we define objects in JavaScript.
An object is a collection of key-value pairs, just like normal variables assigned to a value, in simple words it acts kind of like a collection of variables. So just like a variable, we can call a key in an object and get the assigned value. Now inside the this.state object, we will be creating all the variables that we need to use in the template. Let us understand it with a code snippet.

src/components/Cart.jsx

import React from 'react';

export default class Cart extends React.Component {
    constructor () {
        this.state = {
            first_name: "John"
        }
    }

    render () {
        return (
            <h1>Hello, John</h1>
        )
    }
}

Here we created a key named first_name and assigned a string value "John" to it. Calling this key is pretty simple. As we learned, an object is a collection of key-value pairs, which basically means we should be storing this collection somewhere. So in this case we stored it in the variable this.state. In order to call a key inside an object, we first have to refer to the variable holding the object followed by the name of the key you want to call. There are multiple ways to refer to a key in an object

using the normal object.<key_name> method
using the indexing method.

// Object
this.state = {
    first_name: "John"
}

// Method 1
this.state.first_name

// Method 2
this.state["first_name"]

For sometime we will be using method 1 and afterwards when the situation arises we will use method 2. Yes! These methods has to be used based on some situation. It's nothing complicated, we can do this!!!

Let us call the the first_name key in our HTML template. We will have to use a weird syntax to do this. Let us analyze the below given snippet.

src/component/Cart.jsx

import React from "react";

export default class Cart extends React.Component {
  constructor() {
    super();
    this.state = {
      first_name: "John",
    };
  }

  render() {
    return <div>Hello, {this.state.first_name}</div>;
  }
}

In the above code snippet, you can see how a variable is called inside the render function. You should use curly braces and write the name of the variable you want to call.

Feeling a little suspicious 🧐?

Check out line number 5. You see a super() keyword. This is to setup all the functions and variables inherited from the React.Components object. Have you wondered why is there a this keyword before the state variable. The this keyword is used to access objects, variables and functions created in the class. Yes you directly cannot access the state variable. Now if you check the browser, uhmmm...nothing has changed, lets try changing the value of the first_name key to, let us say Sarah.

src/component/Cart.jsx

import React from "react";

export default class Cart extends React.Component {
  constructor() {
    super();
    this.state = {
      first_name: "Sarah",
    };
  }

  render() {
    return <div>Hello, {this.state.first_name}</div>;
  }
}

Localhost

Yeheheee 😉, look how it changed to the new value Sarah. This is how React renders HTML dynamically. How about we take this a level up.

First 1 - let us add a button which will change the value of first_name when clicked.

src/component/Cart.jsx

import React from "react";

export default class Cart extends React.Component {
  constructor() {
    super();
    this.state = {
      first_name: "Sarah",
    };
  }

  render() {
    return (
      <>
        <div>Hello, {this.state.first_name}</div>
        <button>Change name</button>
      </>
    );
  }
}

Step 2 - create a function which will change the name.
In a React component, we can create different functions for different tasks and call them inside the HTML template or call it normally also. Lets create a function to do this.

src/component/Cart.jsx

import React from "react";

export default class Cart extends React.Component {
  constructor() {
    super();
    this.state = {
      first_name: "Sarah",
    };
  }

  change_name = () => {
      this.setState({ first_name: "John" });
  }

  render() {
    return (
      <>
        <div>Hello, {this.state.first_name}</div>
        <button>Change name</button>
      </>
    );
  }
}

Whoa whoa whoa what just happened 😵

Yeah, just added a function.
If you are familiar with JavaScript, you might wonder where is the function keyword. Here is how react works, the "thing" you just saw is called an arrow function. If you want to read more about arrow function click here. If you have to access the variables of a class, you should be able to access the this object. But when you create a function inside a class, you lose context to the this object. Now if we bind or tie the this object whenever we create a function inside a class, we will be able to access it inside the function. This is more like a React thing. There are multiple ways of binding the this object. Below is a simple snippet showing that.

// Method 1
export default class App extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            first_name: "John"
        }
        this.change_name.bind(this);
    }

    change_name = function () {
        // do something
    }

    render () {
        return (
            <h1>Hello, { this.state.first_name }</h1>
        )
    }
}

// Method 2
export default class App extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            first_name: "John"
        }
    }

    change_name = () => {
        // do something
    }

    render () {
        return (
            <h1>Hello, { this.state.first_name }</h1>
        )
    }
}

In method 1, we have used a normal syntax of creating a function. But in method 2, we have used the arrow function to create a function. While using method 1, you will have to manually bind the this object to the function in the constructor with the bind function. But this is not the case for method 2, it automatically binds it to the function. We will be using method 2 in this series. Let us get back to our app.

src/component/Cart.jsx

import React from "react";

export default class Cart extends React.Component {
  constructor() {
    super();
    this.state = {
      first_name: "Sarah",
    };
  }

  change_name = () => {
      this.setState({ first_name: "John" });
  }

  render() {
    return (
      <>
        <div>Hello, {this.state.first_name}</div>
        <button>Change name</button>
      </>
    );
  }
}

This is where we were!
Inside the change_name function I we have added some code. In react we cannot directly reassign values of state keys. We have to use the setState function to change the state. So you can just simply call the this.setState() function and pass in an object with the key as the key you want to change the value of followed by the value as the new value.

Step 3 - Bind the change_name function to the button

src/component/Cart.jsx

import React from "react";

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      first_name: "Sarah",
    };
  }

  change_name = () => {
      this.setState({ first_name: "John" });
  }

  render() {
    return (
      <>
        <div>Hello, {this.state.first_name}</div>
        <button onClick={this.change_name}>Change name</button>
      </>
    );
  }
}

We are going to use the onClick attribute of <button> element. The value of the attribute should be inside curly braces and keep in mind not to call the function with paranthesis, just end it with the name of the function only. If you add the paranthesis after the function name, it will be called immediately after the component is rendered.

It's time to check the browser

Localhost -- before

Localhost -- after

That's it for todayyyy!!
Drop your queries as comments.

Thank you for your time ☺️

Part 4 -->

React Basics | Part - 2

Elwin Jyothis — Sat, 05 Feb 2022 13:55:58 +0000

Sup devs! Welcome to part - 2 of the React Basics series. In the last section, I explained what React is and how React apps are written. In this post, we will start by setting up a react app and we will learn about class components in-depth.

Level - Beginners
Requirements - Good understanding of Object oriented programming in JavaScript.

Lets get started!
There are multiple ways to setup a react application. You can setup all the folders and config files, install react and your good to go. Guess what? 😎 There is an easy method, we can use the create-react-app tool to setup a react application for us.

Before that.
You need to have nodejs and npm installed in your system.

Step 1
Open a terminal or command prompt and navigate to the folder where you want to keep your project files.

Step 2
Run the below command and wait for the tool to do its magic.

npx create-react-app <app_name>

<app_name> should be replaced by the name of your project/app. In this case we will be building an e-cart app so I will name it ecart. create-react-app will create a folder with the name of your app. Navigate to that folder and open it in your favourite text editor.

Let's analyse what create-react-app has created for us.

node_modules
- The first directory is the node_modules, we don't have to do anything with this folder because it contains all the packages we have installed, including React!
public
- This folder contains files which won't be complied by React.
src
- This is where you will do most of the work. In the src folder you can create multiple folders and files to store and manage all you components, stylesheets and other scripts. NOTE: contents of this folder will be compiled by React.
.gitignore
- gitignore file is used by version control tools to skip some files and folders from tracking. Not important if you are not going to do version control.
package.lock.json/package.json
- These files are utilised by npm to run or build your application. It contains all the information, packaged, commands to run your application.

Let us first move into the src folder. By default, create-react-app has written a component named App.js. We can use this file as a hub, where all the other components will come and join. Before changing anything, lets run this application.

Step 1
Navigate to the folder containing the project files.

Step 2
Run the following command

npm start

This is an npm command issued by create-react-app in the package.json file(More about node and npm coming soon. Stay tuned! 😉). It will start a local server and open a new browser window navigated to the server. If you see the react logo spinning, then you made it!🥳. This local server will reload automatically when it detects any changes in the src files. So, everything is already sorted out.

To make your life easier, just delete all the files in src folder except for index.js, reportWebVitals.js and App.js. Create a new folder inside src folder named components. Now your directory structure should like this 👇

If you check the browser now, you will get a bunch of red error messages 😶‍🌫️. Don't be intimidated, errors are our friends. We can sort that out.

Before starting with the code.

The above image is the design of the webapp that we will be making. It is a simple app in which a user can add new products, update quantity, or delete a product from the cart.

Let us first learn how to create a component.
Each react component can be created in different files. For example, in our app I need a header component which has the text ecart, we can store this component in a file named Header.jsx. Just like this all the other components of the app can be stored in different files. All these components will then be imported into the hub i.e, the App.js file, which is already imported inside the index.js file and rendered into the viewport. Let us quickly analyse the index.js file.

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
// import './index.css'; // you can safely remove this line.
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

Line 1 - import React from 'react';
This line simply imports the react library into the file.

Line 2 - import ReactDOM from 'react-dom';
The ReactDOM class is imported from react-dom library which helps in rendering components into the browser.

Line 3 - import App from ./App;
This is the line where the hub aka App.js file is imported, later in the code we can see that <App /> is called which calls the Component.

Line 4 - ReactDOM.render()
The ReactDOM class has a render method which takes in a Component and a document element as a parameter. In this case the Component is <App /> and document element is a <div> with id root. With all these parameters, react compiles the component to normal HTML string and injects it into the <div> with id root.

What! where does this root come from!!!
It resides in the index.html file in the public folder 😶‍🌫️.

public/index.html

All of the compiled HTML by the ReactDOM.render method will be appended to this root <div>. Now it makes sense right?😌

Lets make our first component!!😄
Inside the components folder in src, create a file named Cart.jsx. Let's write a class based component in there.

src/components/Cart.jsx

import React, { Component } from "react";

export default class Cart extends Component {
  render() {
    return (
      <div>
        <h1>Cart</h1>
      </div>
    );
  }
}

All of our HTML for Cart component will go in the render function. Always write the HTML after the return keyword, because the HTML will be returned by the render method.

Now we need to import this Cart component inside our hub. Just update the code of App.js file like below. We are also removing some imports to clear out the error messages that we got earlier.

src/App.js

import Cart from "./components/Cart";

function App() {
  return <Cart />;
}

export default App;

In the first line we are importing the Cart class that we defined earlier from Cart.jsx file (while importing components, do not write the .jsx extension after the filename).

Remember how we called the <App /> in index.js file. Just like that we are calling the Cart component(class based) inside App.js like an HTML element. Make sure you write it as a self closing tag - <Component_class_name />.

Here is a flowchart of how the components flows into the viewport. 👇

Revisit your browser and you should be able to see Cart text in the viewport.

In the upcoming blogs, we will be learning about states of components and some higher order functions of JavaScript.
Stay tuned!

Thank you for reading! 😊

Part 3 -->

React Basics | Part - 1

Elwin Jyothis — Sat, 05 Feb 2022 07:02:42 +0000

Heyyo fellow developers! I planned on starting a React basics blog post series for all of you in the developer community who wants to get a taste of React. Let's do this!

Level - Beginner
Requirements - A good understanding of JavaScript functions and Classes

What is React and why? 🤔
Simply speaking, React is a JavaScript library which allows you to build fast and reusable web frontends. Just like any other libraries in JavaScript - let's say, JQuery(simplifies DOM manipulation in JavaScript) or Lodash(used to write more concise and maintainable JavaScript) - React can be simply imported into your JS file and can be used to render dynamic content into your browser.

Why should I use React? Straight answer, it's easy!

Let me explain. Let's take an example of a project in which you are asked to build a simple e-cart system. You can add products to the cart, remove them, increase or decrease the quantity and also display the correct total amount too. When implementing the old school methods of building web apps, the data of every product in the cart can be stored in a database and we can do all the CRUD(Create, Read, Update, Delete) functionalities on the data. The catch is that, if you need to display this updated data into the browser the whole page needs to be refreshed and then only the latest data can be presented. React solved this by giving local variables to parts of a webpage and each part of the webpage has access to their local variables and React can update the data in the browser - if the variable values are changed - without refreshing the page. This is just one example of React use case, there is a lot of reasons why React is a great choice.

NOTE
This same functionality can be accomplished using regular DOM manipulation methods, but React lays out all the backbone functionalities so you can just get started with your project right away. Not only React but other techs such as Angular or Vue are also capable of this.

Before getting into the fun of codes. Let's understand some theories of React.

React works in a component based structure. Each part of a webpage can be broken down into small components and different components can be stacked together to form a webpage. The advantage of this structure is that, these components can be reused in other webpages too.

We can define variables for a component whose values can be inserted into HTML templates. When these variable values are changed or updated, React works to re-render only the parts of the webpage that has the variable called. These type of components are called stateful components in React.

Let us revisit the e-cart example. You can separate each product in a cart into different components and give each component some local variables such as quantity, price and product_name. Now in this component, we can write the HTML template and the css stylings only for this component.
We can call these variable inside the HTML to replace itself with their values. First lets take a look at the component.

In the above image we can see a Product component. The variable name in curly braces will be replaced by their respective values. Let us say if we need to increase quantity, we can just add one to the variable quantity and reassign the variable. React will update the HTML without any refreshing.

There are 2 types of components in React, function based and class based components. A function based component is not stateful by default but React hooks can be used to make it stateful(we will be learning about hooks in later blogs). Let us see an example of these components.

// Function based components
function App() {
    return <h1> Hello, world!</h1>;
}

// Class based components
class App extends React.Component {
    render () {
        return <h1> Hello, world!</h1>;
    }
}

You might have noticed the weird HTML tags in JavaScript code. This is a special type of language extension for React components called JSX. JSX is transpiled using babel and executed by React to display these HTML content onto the browser. If we run this application, we will able to see Hello, world! in the browser correctly rendered as an h1 element.

In the upcoming sections we will slowly build an e-cart webapp while learning the magic of JavaScript and React! Stay tuned.

Thanks for your time. 😊

Part 2 -->

What are web stacks and which one to use?🚶‍♂️

Elwin Jyothis — Sun, 23 Jan 2022 15:00:12 +0000

As a web developer I have got stuck in this loop of choosing the best web stack many times! It wastes a lot of your precious time, let's fix that. I'll help you to choose the right web stack for your project. But wait! What is this web stack? 🤔

What are web stacks?

A web stack is a collection of technologies, softwares or programming languages used collaboratively to build fast, feature-rich and reliable web apps. Each tech in a stack is responsible for handling a specific part of your web app. Lets say you need to put some headings, paragraphs and render some images onto your browser. We commonly use HTML to define these templates. Now, what if you want to change the color of the headings or the size of the image? You can use CSS to define some rules for the HTML templates. Here we can see how these two languages or tech is working together to render content onto your browser, isn't it amazing! Well, it doesn't end here. What if you want to change the image in your HTML template when a button is clicked. You can use JavaScript to handle this job. There are more coming on the way 😉

The most commonly used and industry standard web stacks are the below:

MERN (MongoDB, Express JS, React, Node JS)
MEAN (MongoDB, Express JS, Angular, Node JS)
LAMP (Linux, Apache, MySQL, PHP)
Django React
Oh dear this is a long list....🙂

NOTE: It is not at all necessary to strictly follow these set of web stacks. You can use any of the techs in the market to build your amazing web app.

Which one should you use?

I know, there is a lot of web stacks to choose from and that's why most of the beginners(myself too) get stuck in this never ending loop 😵‍💫.

After reading that screaming note above, you might be thinking, why do these stacks exist if we can just use any technologies of our choice together. Well, it is indeed performance based. Some technologies work pretty great together and some don't. For example, the reason for developers choosing the MERN stack is mainly because of the high performace of the React framework(React is only responsible for rendering dynamic webpages by combining JavaScript and HTML) and the advantage of no-sql mongoDB(mongoDB is a no-sql data storage and management solution). Just like this, each stack has its own pros and cons. Selecting a web stack for your webapp should be based on what features you are going to implement.

Let's try selecting a web stack for a project.

I am asked to build a webapp to store and manage the data of employees of a company. It should also have a great dashboard for the administrators to access and manage the data.

In this case, we need the following features:
Everything stated below are purely personal opinion, you are free to use any technology you prefer.

A frontend which can render webpage dynamically.

I can use React, Angular, Django or just the vanilla JavaScript, HTML, CSS combo. I would go with React as it is fast, quick to develop, it is component based so I can reuse my code.
A language or tech to handle different features such as Creating employee, deleting, updating and reading data from Database.

I have options like PHP, Python, Golang, C# and many more. I usually prefer Python and use the amazing Django REST Framework to create restful API to handle these tasks.
A Database to store and read employee data.

Here options are dbsqlite, MySQL, PostgreSQL etc...I prefer dbsqlite for development purpose, as it is the default database for Django and doesn't require any additional setup. For production I rely on Postgres DB.

Summing up all we have a stack which uses React for frontend, Django for backend and Postgres for Database.

There you go, that's one way to select an ideal stack for your webapp.

I hope you enjoyed and learned something new 😄. All the best for your future projects.

Thanks for reading, have a great day ✌️‍

Stay tuned for explained blogs on React and Django!

Starting a new journey with the DEV.to community!

Elwin Jyothis — Sun, 23 Jan 2022 12:46:03 +0000

Hey folks! I just joined DEV.to and read a lot of blogs from these amazing people on this platform and I am excited to start a new journey with all of you in this community.

Myself Elwin, and I am a self-learned full-stack web developer. I write UI's and apps with React and mostly with Django and REST Framework. I have been actively working and researching on Frontend technologies and servers for the past 4 years and I can't wait to share my experience and knowledge with all you guys!

Thank you for stopping by. 🤗
Have a great day!!! ✌️‍