DEV Community: Soham De Roy

Understanding Redux (Part 2): Creating a small Redux powered React App in 10 easy steps (with code snippets)

Soham De Roy — Thu, 26 May 2022 10:35:16 +0000

Before proceeding with this blog, I would recommend first going through Part 1 of the Understanding Redux series which can be found by clicking on this link Understanding Redux (Part 1): Demystifying Store, Action and Reducers. That will help you understand the current article. In the Part 1 blog, I have tried to explain the fundamental principles/ concepts of Redux. I have covered what is Store, Actions, and Reducers, what makes Redux predictable along with an example.

In this current article, we will try to set up our own redux powered react application. We will go through how to create Store and provide it to the Application, write Actions, Dispatch them on user interactions, make Reducers and update the store, read the store from other components which are children of App and many more. I'll provide all the important code snippets along the way so that you can quickly spin up the application.

To give a glimpse in the beginning itself, this is what we will finally build

We will be creating a basic application where we can add and remove item in the cart. We will manage the state changes in the redux store and display the information in the UI.

Code Setup

1. Create a react app with the create-react-app command

npx create-react-app react-app-with-redux

2. Go to the newly created folder using

cd react-app-with-redux

3. Install redux and react-redux library using the commands

npm install redux react-redux

4. Run the application using

npm start

5. Creating Reducer

First create a folder inside src named actionTypes and create a file inside it named actionTypes.js. This file will contain all the actions the application will be dealing with. Add the following lines in actionTypes.js

export const ADD_ITEM = "ADD_ITEM";
export const DELETE_ITEM = "DELETE_ITEM";

As we are making an app where we will have the functionality of adding and deleting an Item, hence the above two action types.

Next create a folder inside the src called reducers and create a new file in it named cartReducer.js. This file will contain all the reducer logic related to the cart component. (Note: We will create the view/ UI in the step 8). Add the following lines in the cartReducer.js.

import { ADD_ITEM, DELETE_ITEM } from "../actionTypes/actionTypes";

const initialState = {
  numOfItems: 0,
};

export default const cartReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_ITEM:
      return {
        ...state,
        numOfItems: state.numOfItems + 1,
      };

    case DELETE_ITEM:
      return {
        ...state,
        numOfItems: state.numOfItems - 1,
      };
    default:
      return state;
  }
};

As we discussed it Part 1 of this blog, we created an initial state for the app and assigned it to the default parameter of state in the cartReducer function. This function switches on the type of action dispatched, and which ever case matches with the action type, makes necessary changes in the state and returns a fresh new instance of the updated state. If none of the action type matches, then the state is returned as it is. Finally we make a default export of the cakeReducer function to use it in the store creation process.

6. Creating the store and providing it to the App

Create a file inside src with the name store.js and create the store using the command

const store = createStore()

Add the following lines in store.js

import { createStore } from "redux";
import { cartReducer } from "./reducers/cartReducer";

const store = createStore(cartReducer);

export default store;

Now it's time to provide this store to the App component. For this we make use of the <Provider> tag that we get from the react-redux library. We wrap the whole App component inside the <Provider> tag using the following syntax.

// rest of the code ...

<Provider store={store}>
        <div>App Component</div>
        // child components of App/ other logic
</Provider>

// rest of the code ...

By wrapping the App component inside the <Provider> tag, all the children component of App will get access of the store. Please visit the Part 1 of the blog series to know more.

Continuing with the App.js, add the following lines in the file.

import "./App.css";
import { Provider } from "react-redux";
import store from "./store";

function App() {
  return (
    <Provider store={store}>
      <div>App Component</div>
    </Provider>
  );
}

export default App;

7. Create Actions

Now create a folder inside src called actions and create a file inside it called cartAction.js. Here we will add all the actions to be dispatched on some user interactions. Add the following lines in the cartAction.js

import { ADD_ITEM, DELETE_ITEM } from "../actionTypes/actionTypes";

const addItem = () => {
  return {
    type: ADD_ITEM,
  };
};

const deleteItem = () => {
  return {
    type: DELETE_ITEM,
  };
};

export { addItem, deleteItem };

In the above code we created two action creators (pure JS functions that returns action object) called addItem() and deleteItem(). Both the action creators returns action object with a specific type. Note: Each action object must necessarily have a unique type value. Along with it any additional data passed with the action object is optional and will depend on the logic used for updating the state

8. Creating the view/ UI

Now that we have created all the required entities such as Store, Actions, and Reducers, it's time to create the UI elements. Create a component folder inside src and create a Cart.js file inside it. Add the following line inside Cart.js

import React from "react";

const Cart = () => {
  return (
    <div className="cart">
      <h2>Number of items in Cart:</h2>
      <button className="green">Add Item to Cart</button>
      <button className="red">Remove Item from Cart</button>
    </div>
  );
};

export default Cart;

Add this Cart component in the App.js

import "./App.css";
import { Provider } from "react-redux";
import store from "./store";
import Cart from "./component/Cart";

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

export default App;

Just to make it a bit presentable, I have added a bit of basic styling in the App.css as follows.

button {
  margin: 10px;
  font-size: 16px;
  letter-spacing: 2px;
  font-weight: 400;
  color: #fff;
  padding: 23px 50px;
  text-align: center;
  display: inline-block;
  text-decoration: none;
  border: 0px;
  cursor: pointer;
}
.green {
  background-color: rgb(6, 172, 0);
}
.red {
  background-color: rgb(221, 52, 66);
}
.red:disabled {
  background-color: rgb(193, 191, 191);
  cursor: not-allowed;
}
.cart {
  text-align: center;
}

This is how the UI looks as of now

9. Reading/ Accessing the store using `useSelector` hook

useSelector is a hook provided by the react-redux library that helps us in reading the store and thus its content(s). Import the hook from react-redux and use the following syntax to read the store with useSelector hook

import { useSelector } from "react-redux";
// rest of the code
const state = useSelector((state) => state);

// rest of the code

Thus after adding useSelector hook, Cart.js file will look some thing like this

import React from "react";
import { useSelector } from "react-redux";

const Cart = () => {
  const state = useSelector((state) => state);
  console.log("store", state);
  return (
    <div className="cart">
      <h2>Number of items in Cart:</h2>
      <button className="green">Add Item to Cart</button>
      <button className="red">Remove Item from Cart</button>
    </div>
  );
};

export default Cart;

console logging the state will give us the initial state that we set in the reducer file in step 5.

10. Dispatching Action on button click (along with handling some UI behaviour based on the state) with `useDispatch` hook

The react-redux library gives us another hook called the useDispatch hook, that helps us dispatching the actions or action creators which in turn returns actions. The syntax is as follows

const dispatch = useDispatch();

dispatch(actionObject or calling the action creator);

Thus adding a dispatcher into our Cart.js will finally make the file look some thing like this

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { addItem, deleteItem } from "../actions/cartAction";

const Cart = () => {
  const state = useSelector((state) => state);
  const dispatch = useDispatch();
  return (
    <div className="cart">
      <h2>Number of items in Cart: {state.numOfItems}</h2>
      <button
        onClick={() => {
          dispatch(addItem());
        }}
      >
        Add Item to Cart
      </button>
      <button
        disabled={state.numOfItems > 0 ? false : true}
        onClick={() => {
          dispatch(deleteItem());
        }}
      >
        Remove Item to Cart
      </button>
    </div>
  );
};

export default Cart;

Note how on click on the Add Item to Cart button, we dispatch the action creator addItem() that we created in step no. 7. Similarly on click on the Remove Item from Cart button, we dispatch the action creator deleteItem(). The state variable stores the state of the app, which is basically an object with a key numOfItems. Thus state.numOfItems gives us the current number of items value in the store. We display this in the view in the line <h2>Number of items in Cart: {state.numOfItems}</h2>.

To dig a bit deeper, when the Add Item to Cart button is clicked, it dispatches the addItem() action creator, which in turn returns an action object with type type: ADD_ITEM. As mentioned in Part 1 of this blog series, when an action is dispatched, all the reducers becomes active. Currently in this example we have only one reducer i.e. cartReducer, thus it becomes active and listens to the action dispatched. As shown in step 5, the reducer takes the state and the action as input, switches on the action type and returns the fresh new instance of the updated state. In this example, when the action with type: ADD_ITEM, matches the first switch case, it first make a copy of the entire state using spread operator ...state, and then make the necessary update which in the case of adding item is numOfItems: state.numOfItems + 1 i.e. increasing the numOfItems by 1.

Similarly, using the same logic, on clicking on the Remove Item from Cart button, an action with type type: DELETE_ITEM is dispatched which goes and decreases the numOfItems by 1.

Here is the demo of the working app.

Notice how we were able to control the behaviour of the Remove Item from Cart button based on the value of numOfItems in the redux store. As a negative number of items does not makes sense, we disabled the Remove Item from Cart button if state.numOfItems <= 0. This way we are able to restrict the user from decreasing the number of items in the cart if its already 0. This was a basic example to show how we can control the behaviour of various DOM elements based on internal state of the app.

Github Link

Github link of the project can be found here: Github Link

Summary

In this article, we learnt how to quickly spin up a redux powered react application. We learnt how to

Create Actions, Action creators, Reducers and Store
Provide the Store to the App using <Provider>
Read/ access the Store from components using useSelector hook and display the state information in the UI
Dispatch the actions on user events such as button clicks, using useDispatch hook
Control DOM element's behaviour with logic based on the state of the application

Wrapup

Thanks for reading! I really hope you enjoyed reading about how to spin up a redux powered react application and found this blog useful. Do consider hitting the like button and sharing it with your friends, I'd really appreciate that. Stay tuned for more amazing content! Peace out! 🖖

Social Links

Understanding Redux (Part 1): Demystifying Store, Action and Reducers

Soham De Roy — Wed, 18 May 2022 19:18:34 +0000

Introduction

As a pre-requisite, I will be assuming that the readers of this article are familiar with React.

As per the official docs of Redux, it is a Predictable State Container for JS Apps. If we try to dig deep into this statement, it's very much clear that Redux is a state management library that can be used with any JS library or framework like React, Angular, Vue etc.

Why is redux termed as a state container?

Well, an application has its state, which in turn can be a combination of the states of its internal components. Let's take an e-commerce website for example. An e-commerce website will have several components like the cart component, user profile component, previously viewed section component etc. Let's take the cart component for e.g. which displays the number of items in the cart of a user. The state of the cart component will comprise of all the items the user has added to the cart and the total number of such items. At all the times the application is up and running, this component has to show the updated number of items in the cart of the user.

Whenever a user adds an item to the cart, the application has to internally handle that action by adding that item to the cart object, maintaining its state internally and also it has to show the user the total number of items in the cart in the UI. Similarly, removing an item from the cart should decrease the number of items in the cart internally, remove the item from the cart object and also display the updated total number of items in the cart in the UI.

We may very well maintain the internal state of the components inside them, but as and when an application grows bigger, it may have to share some state between components, not just only to show them in the view, but also to manage/ update them or perform some logic based on their value. This part of handling multiple states from multiple components efficiently can become a challenging task when the application grows in size.

This is where Redux comes into the picture. Being a state management library, Redux will basically store and manage all the application's states. It also provides us with some important APIs using which we can make changes to the existing state as well as fetch the current state of the application.

What makes Redux predictable?

The state is Read-only in redux. What makes Redux predictable is to make a change in the state of the application we need to dispatch an action which describes what changes we want to do in the state. These actions are then consumed by something known as reducers, whose sole job is to accept two thing i.e. action and the current state of the application and return a new updated instance of the state. (Actions and Reducers are described further in the following sections.) Note that reducers do not change any part of the state. Rather it produces a new instance of the state with all the necessary updates. According to @Dan Abramov (the creator of Redux) himself "Actions can be recorded and replayed later, so this makes state management predictable. With the same actions in the same order, you're going to end up in the same state." Thus continuing with our above example of an e-commerce website, if the initial state of the Cart is that it has 0 items, then an action of adding one item to the cart will increase the number of items in the cart to 1. Again firing the action of adding one item to the cart will increase the number of items in the cart to 2. Given an initial state, with a specific list of actions in a specific order, will always provide us with the exact same final state of the entity. This is how Redux makes state management predictable.

In the following section, we will dive deep into the core concepts of redux i.e. store, actions and reducers.

Core Principles of Redux

1. Store

The global state of an application is stored in an object tree within a single store

The Redux store is the main, central bucket which stores all the states of an application. It should be considered and maintained as a single source of truth, for the state of the application. If the store is provided to the App.js (by wrapping the App component within the <Provider> </Provider> tag) as shown in the code snippet below, then all its children (children components of App.js) can also access the state of the application from the store, thus making it act as a global state.

// src/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'

import { App } from './App'
import createStore from './createReduxStore'

const store = createStore()

// As of React 18
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <Provider store={store}>
    <App />
  </Provider>
)

The state of the whole application is stored in the form of a JS object tree in a single store as shown below.

// this is how the store object structure looks like
{
    noOfItemInCart: 2,
    cart: [
        {
            bookName: "Harry Potter and the Chamber of Secrets",
            noOfItem: 1,
        },
        {
            bookName: "Harry Potter and the Prisoner of Azkaban",
            noOfItem: 1
        }
    ]
}

2. Action

The only way to change the state is to emit an action, which is an object describing what happened

As mentioned above, the state in redux is read-only. This helps in restricting any part of the view or any network calls to write/ update the state directly. Instead, if anyone wants to change the state of the application, then it needs to express its intention of doing so by emitting or dispatching an action.

Let's take the example of the above store example where we have 2 books in the store, namely "Harry Potter and the Chamber of Secrets" and "Harry Potter and the Prisoner of Azkaban" both having only one item for each. Now if the user wants to add another item to the cart, then he will have to click on the "Add to Cart" button next to the item.

On the click of the "Add to Cart" button, an action will be dispatched where the action is nothing but a JS object describing what changes need to be done in the store. Something like this

// Rest of the code

const dispatch = useDispatch()

const addItemToCart = () => {
return {
    type: "ADD_ITEM_TO_CART"
    payload: {
        bookName: "Harry Potter and the Goblet of Fire",
        noOfItem: 1,
        }
    }
}


<button onClick = {() => dispatch(addItemToCart())}>Add to cart</button>

// Rest of the code

Note how in the above example, we dispatch an action on click of the button. Or rather to be more specific, we dispatch something known as an action creator i.e. the function addItemToCart(), which in turn returns an action which is a plain JS object describing the purpose of the action denoted by the type key along with any other data required for the state change (which in this case is the name of the book to be added to the cart denoted by the payload key). Every action must compulsorily have at least a type associated with it. Any other detail that needs to be passed is optional and will depend on the type of action we dispatch. For e.g. the above code snippets dispatches the following action

// Action that got created by the action creator addItemToCart()

{
    type: "ADD_ITEM_TO_CART" // Note: Every action must have a type key
    payload: {
        bookName: "Harry Potter and the Goblet of Fire",
        noOfItem: 1,
    }
}

3. Reducers

To specify how the state tree is transformed by actions, we write pure reducers

Reducers, as the name suggests, take in two things, i.e. previous state and an action and reduce it (read it return) to one entity i.e. the new updated instance of state. Thus reducers are basically pure JS functions which take in the previous state and an action and return the newly updated state. There can be either one reducer if it is a simple app or multiple reducers taking care of different parts or slices of the global state in case of a bigger application. For e.g. there can be a reducer handling the state of the cart in a shopping application, then there can be a reducer handling the user's details part of the application etc. Whenever an action is dispatched, all the reducers are activated. Each reducer filters out the action using a switch statement switching on the action type. Whenever the switch statement matches with the action passed, the corresponding reducers take the necessary action to make the update and return a fresh new instance of the global state. Continuing with our above example we can have a reducer as follows


const initialCartState = {    
    noOfItemInCart: 0,          
    cart: []                              
}

// NOTE: 
// It is important to pass an initial state as default to 
// the state parameter to handle the case of calling 
// the reducers for the first time when the 
// state might be undefined

const cartReducer = (state = initialCartState, action) => {
    switch (action.type) {
        case "ADD_ITEM_TO_CART": 
            return {
                ...state,
                noOfItemInCart: state.noOfItemInCart + 1,
                cart : [
                    ...state.cart,
                    action.payload
                ]
            }
        case "DELETE_ITEM_FROM_CART":
            return {
                // Remaining logic
            }
        default: 
            return state  
    }       // Important to handle the default behaviour
}           // either by returning the whole state as it is 
            // or by performing any required logic

In the above code snippet, we created a reducer called cartReducer which is a pure JS function. This function accepts two parameters i.e. state and action. Note that the state parameter is a default parameter which accepts an initial state. This is to handle the scenario when the reducer is called for the first time when the state value is undefined. Also note that every reducer should handle the default case where if none of the switch cases matches with the passed action, then the reducer should return state as it is or perform any required logic on it before passing the state.

Whenever we dispatch an action with a certain type, we need to make sure to have appropriate reducers to handle that action. In the above example, on clicking the button, we had dispatched an action with an action creator called addItemToCart(). This action creator has dispatched an action with the type ADD_ITEM_TO_CART. Next, we have created a reducer called cartReducer which takes the state (with the default initial state) and the action as parameters, switches on the action type, and then whichever case matches with the dispatched action type, it makes the necessary update and returns the fresh new version of the updated state. Please note here that the state in redux is immutable. Hence, the reducers make a copy of the entire current state first, make necessary changes and then return a fresh new instance of the state with all the necessary changes/ updates. Thus in the above example, we first make a copy of the entire state using the spread operator ...state, then increment the noOfItemInCart by 1, update the cart array by adding the new object passed in the action.payload shown below and then finally return the updated object.

{
    bookName: "Harry Potter and the Goblet of Fire",
    noOfItem: 1,
}

After the reducers have updated the state if we go and console.log the state, then we would see the following result.

// Updated store

{
    noOfItemInCart: 3, // Incremented by 1
    cart: [
        {
            bookName: "Harry Potter and the Chamber of Secrets",
            noOfItem: 1,
        },
        {
            bookName: "Harry Potter and the Prisoner of Azkaban",
            noOfItem: 1
        },
        { // Newly added object
            bookName: "Harry Potter and the Goblet of Fire",
            noOfItem: 1,
        }
    ]
}

Summary

In short, the following three principles govern the entire working procedure of Redux

The global state of an application is stored in an object tree within a single store
The only way to change the state is to emit an action, which is an object describing what happened
To specify how the state tree is transformed by actions, we write pure reducers

In the next blog, I'll show how to get started with your first redux powered react application. Till then, stay tuned.

Wrapup

Thanks for reading! I really hope you enjoyed reading about redux and its core principles and found this blog useful. Do consider hitting the like button and sharing it with your friends, I'd really appreciate that. Stay tuned for more amazing content! Peace out! 🖖

Social Links

LinkedIn : https://www.linkedin.com/in/sohamderoy/
Website: https://www.sohamderoy.dev/

How to Google like a Pro 😎. #10Tips

Soham De Roy — Wed, 09 Feb 2022 18:27:55 +0000

Introduction

Everything is available on the internet and google is a platform to search through them. Well, everyone knows that ... duhh. But how many of us know how to use google search efficiently? Very few actually. Googling is an art. To get the right answers, you need to ask the right questions, but to get the right answers quickly, you must know how to ask the right questions. Everyone should learn the how part, and that's what this blog is all about. Below are some of the great tips and tricks you can use to find correct answers to your questions effectively and efficiently.

1. Using quotes to get the "EXACT" match

Generally, when we do a normal search on Google, it makes a shallow search which may result in pages that may or may not contain all the words you mentioned in the search query. But if you wrap your search query/ question (either a term or a phrase) within quotes i.e. "your question goes here" then Google will do a deep search and all the results will include pages that contain all the terms in your question that you put within quotes. This is helpful when you absolutely want a particular term/ phrase to be there in your search results

2. Search within a specific site with `site:`

If you want Google to return results from within a particular website, just add site: before the question you are searching. This is also helpful when you want to search for something within a website which do not have an internal search option or perhaps have a bad one. For e.g. searching for site:freecodecamp.org react will populate search results only from www.freecodecamp.org website on the topic of React.

3. Excluding a term from search results with `-`

If you don't want a term or phrase to appear in your search result, then just add - in front of that word. For e.g. a search on => how to write components in React -class will return all the search results that will not have the term "class" in them. Thus (if you know a bit of React) giving you only ways how to write functional components in React.

4. Search images of a particular size with `imagesize:`

If you want to search images of a particular size then use the tag imagesize: in your search query along with the width and height in pixels. Dimension should be in pixels only for e.g. imagesize:500x500 will populate image results which have a dimension of 500px x 500px

5. Searching for a particular filetype with `filetype:`

If you want to get search results that contain a particular file type such as PDF or PPT etc, then add filetype:<extension> (without the angular brackets). For eg: react tutorial filetype:pdf will generate the following results

6. Use wildcard `*` to make searches

If you are unsure about or have forgotten any term in your search query/ question, then use the wildcard *, and Google will replace it for you with relevant terms. For e.g. a search on => the * of money will populate the following results

7. Combining searches with `OR`, `AND` logic

If you want your search results to contain two terms then put the AND keyword in between them. For e.g. the search on => React AND Angular will fetch results that have both the terms react and angular in it. Similarly, if you want either of the terms in your search results then use the OR keyword in between them. For e.g. the search on => React OR Angular will fetch results that have either of the terms or even both.

8. Filter out searches with `AFTER:`, `BEFORE:` or `..` between two numbers

If you want Google to populate search results that were published after a particular year then use the tag AFTER:. For e.g. the search on => React tutorials AFTER:2020 will populate search results published after 2020. Similarly adding a tag BEFORE: will return results published before a particular year. You can also search for results published between a certain year range or for that matter between any number. Just add .. between the two numbers you want to search between along with the units if any.

9. Check out related websites using `related:`

If you want to know what all other websites are available on the internet which is similar to a particular website, then use the related: tag. For e.g. a search on related:google.com will fetch all the websites that are similar to Google like Bing, Yahoo, DuckDuckGo etc.

10. To see Google's cached version of a website

Google stores a cached version of websites to provide search results quickly. To see if google has cached any site or not just use the tag cache: in front of the website's URL. This is especially helpful to web developers to check if they are currently viewing a cached site or the latest version of a website after they have pushed some changes on the website. For e.g. a search for => cache:www.sohamderoy.dev on the day of writing this blog i.e. 30th Jan 2022 returns the following result.

It is important to note that "Not all search operators return exhaustive results." as mentioned by Google itself. Still, I believe that these are some really handy tips that help a lot to make an effective and efficient Google search. I hope I was able to explain them properly and have encouraged you to use them in your regular Google search.

Wrapup

Thanks for reading! If you like this blog and feel it's useful, do consider hitting the like button and sharing it with your friends, I'd really appreciate that. Stay tuned for more amazing content! 🖖

Follow me on linkedin

Understanding Tailwind CSS

Soham De Roy — Mon, 24 Jan 2022 14:14:57 +0000

In this blog, we will try to understand comprehensively what is Tailwind CSS, what advantages it has to offer, along some hands-on code. 👨‍💻

Introduction

Writing CSS can many times turn into a nightmare. Period. I get it. It gets very frustrating at times to nail down on those designs that you got from your design team. I'm sure a lot of developers, if not all, have gone through the same pain at least a few times in their development careers. Well not anymore. Coz it's time to learn an interesting piece of tech that takes a lot of burden from us. And no it's not Bootstrap. It's called Tailwind CSS. Well, I agree its been around for quite a while now, but I believe Tailwind CSS is still yet to reach out to a lot of developers out there who have not used it because:

They haven't heard of it yet (which might be a very small number) or
They don't really know whether learning a new piece of tech related to CSS will ease out their life or not. (well of course coz you know there have been a lot of things out there, vanilla CSS3, LESS, SCSS, Bootstrap, styled-components, Windi CSS and whatnot ... pheew... quite a list isn't it )

I really hope this short guide will help you understand Tailwind CSS to a point that you say "This is it. This is the one".

Well enough of chit chat. Let's dive straight in.

Atomic CSS approach

Before jumping into Tailwind CSS, let's understand what Atomic CSS is. According to CSS Tricks "Atomic CSS is the approach to CSS architecture that favours small, single-purpose classes with names based on visual function." It's kinda like making classes that are supposed to achieve a single purpose. For e.g. let's make a bg-blue class with the following CSS

.bg-blue {
  background-color: rgb(81, 191, 255);
}

Now if we add this class to a <h1> tag then it will get a background of blue with the colour being rgb(81, 191, 255) as mentioned in the CSS.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div><h1 class="bg-blue">Hello world!</h1></div>
  </body>
</html>

So the above HTML will result in something like this

Now imagine writing such useful single-purpose CSS rules and keeping them all in a global CSS file. I know it's a one-time investment but think of this, you can now use these single-purpose helper classes from anywhere you want. You just need your HTML file to consume that global CSS file and that's it. You can now also use combinations of these helper classes in a single HTML tag. Let's see another example shall we:

Let's create a CSS file with the following rules,

.bg-blue {
  background-color: rgb(81, 191, 255);
}
.bg-green {
  background-color: rgb(81, 255, 90);
}
.text-underline {
  text-decoration: underline;
}
.text-center {
  text-align: center;
}
.font-weight-400 {
  font-weight: 400;
}

and then consume it in our HTML file as follows

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div><h1 class="bg-blue">Hello world 1</h1></div>
    <div><h1 class="text-underline">Hello world 2</h1></div>
    <div class="text-center">
      <h1 class="bg-green font-weight-400 text-underline">Hello world 3</h1>
    </div>
  </body>
</html>

Well now this will generate the following result:

🗒️ Points to note here:

Combining multiple helper classes: Look how I have combined multiple helper classes in line 14 in the <h1> tag viz. bg-green, font-weight-400 and text-underline and it all took effect in my Hello world 3 text
Reusability of helper classes: In the above example look at how text-underline helper class is used multiple times in lines 12 and 14.

See how we were able to add different styles without even leaving the HTML page. Well, you would say that, "Hey we did have to write those helper or utility classes in the global CSS file... what about that". Well, I get it. That definitely was the initial investment we had to make to start with. And of course, God knows how many of these single-purpose helper or utility classes we would have to make if we wanted to follow this Atomic CSS architecture. And that's where Tailwind CSS comes as our saviour. (Well more than a saviour if I may .. continue reading to know more). The concept of Atomic CSS is not new but Tailwind CSS takes it to another level.

Tailwind CSS - A utility first CSS framework

Tailwind CSS, as per their own website is a "utility-first CSS framework" which provides several of these opinionated, single-purpose utility classes that can be directly used inside our markup to design an element. Some of the utility classes that I frequently use these days are:

flex: Used to apply flexbox to a <div>
items-center: to apply the CSS property align-items: center; to a <div>
rounded-full: to make an image circular and so on ...

Seriously, it's not possible for me to list down all of them coz there are so many of these utility classes. But the best part is, we do not have to write these utility classes ourselves and keep in any global CSS file. We directly get it from Tailwind. You can get a list of all the utility classes they have to offer from their documentation page. Also if you are working in VS Code, you can install an extension called Tailwind CSS IntelliSense and it will give you auto-suggestions as you keep typing the utility classes as shown in the image below.

Setting up Tailwind CSS

There are multiple ways by which we can set up Tailwind CSS in our project all of which are mentioned in their documentation. Tailwind CSS works smoothly with a plethora of frameworks like Next, React, Angular etc. and even our OG HTML.

For the below hands-on demo I am using Tailwind CSS with a Next application. To set a Next app with Tailwind CSS directly, use the following command:

With npx

npx create-next-app --example with-tailwindcss with-tailwindcss-app

or with yarn

yarn create next-app --example with-tailwindcss with-tailwindcss-app

Once the project has been set up dive into the next step to create a basic card component

Hands-on demo

Let's build a card component in a Next project

// Card.js file
// to be rendered in index.js

import React from "react";

const Card = () => {
  return (
    <div className="relative w-96 m-3 cursor-pointer border-2 shadow-lg rounded-xl items-center">
      {/* Image */}
      <div className="flex h-28 bg-blue-700 rounded-xl items-center justify-center">
        <h1 className="absolute mx-auto text-center right text-2xl text-white">
          Image goes here
        </h1>
      </div>

      {/* Description */}
      <div className="p-2 border-b-2">
        <h6>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
          beatae nulla, atque et sunt ad voluptatum quidem impedit numquam quia?
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
          beatae nulla, atque et sunt ad voluptatum quidem impedit numquam quia?
        </h6>
      </div>

      {/* Tech stack used */}
      <div className="flex flex-wrap items-center m-2">
        <span className=" border border-blue-300 rounded-2xl px-2 my-1 mx-1">
          #React
        </span>
        <span className=" border border-blue-300 rounded-2xl px-2 my-1 mx-1">
          #Redux
        </span>
        <span className=" border border-blue-300 rounded-2xl px-2 my-1 mx-1">
          #Javascript
        </span>
      </div>

      {/* Links */}
      <div className="flex flex-wrap items-center rounded-b-xl border-t-2 bg-white">
        <button className="border rounded-2xl bg-blue-600 text-white shadow-sm p-1 px-2 m-2">
          Go to Project
        </button>
        <button className="border-2 border-blue-600 rounded-2xl text-blue-600 shadow-sm p-1 px-2 m-2">
          Github
        </button>
      </div>
    </div>
  );
};

export default Card;

This results in the following card to be rendered in the UI:

Look how easily I am able to style the card component without even leaving the Card.js file. No need to write any extra CSS files. Using flex to a <div> applies display: flex; CSS rule to it. Want to add position: relative; to a <div>? Just add relative in the className and you are done. We can also add different modifiers like hover, active, focus etc. to conditional render utility classes. It is possible to apply complex CSS rules like:

.some-class-name {
          --tw-space-x-reverse: 0;
          margin-right: calc(0.5rem * var(--tw-space-x-reverse));
          margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

by just mentioning space-x-2 in the <div> tag. Neat isn't it. And do we have to mention these styles explicitly anywhere in some sort of a global CSS file... absolutely not!. Tailwind automagically does it for us. That's the beauty of Tailwind.

We are not done yet... there's a lot of other advantages

Just-In-Time (JIT) mode -- providing lightning-fast build times

Prior to Tailwind v3, it used to purge through all the styles to remove any unused styles, so that the production build remains as small as possible. According to Tailwind, the production build used to be between 5 - 10 kB. But that's the story in production. In a development environment, CSS might get really big especially if we use a lot of personalized configuration.

With v3 and above, Tailwind released a new feature called Just-in-Time compiler. JIT compiler avoids compiling all the CSS upfront and compiles only the CSS as and when we need it. This results in lightning-fast build times in all the environments. And as the styles are generated as and when we need them, there is no need to purge unused styles and thus CSS is all the environments will be the same. This helps us get rid of the fear of any important CSS getting purged in production.

Watch Adam Wathan the creator of Tailwind CSS explaining JIT in Tailwind Labs official youtube channel:

Opinionated and flexible at the same time

Tailwind CSS is opinionated. It does specify some constraints when it comes to styling and if you ask me it is good as it helps us keep the design part to those who actually understand it. Just look at one of their utility classes to add box-shadow to your <div>.

(src: https://tailwindcss.com/docs/box-shadow)

As you can see, there are only 8 variants of shadow that Tailwind provides, with a preset value for vertical and horizontal offset, blur, spread, colour and opacity. That is why Tailwind is opinionated. It tries to give an opinion about what property values to choose from on almost all the styling properties out there. And believe me, for most of the cases, these 8 variants (for box-shadow) will be more than sufficient to come up with a great UI. For e.g. in the above hands-on example, I have used shadow-lg in the main parent <div> to get that nice outer box-shadow. Using the same variant of a particular utility class at different areas in the UI also ensures uniformity across the whole application and thus a better UX.

But in case you need some really customised value for any particular style, you can do so by adding a customized theme in the tailwind.config.js. For e.g. to get a shadow-3xl (Tailwind do not provide shadow-3xl out of the box) you can add the following lines in the module.exports in tailwind.config.js.

module.exports = {
  theme: {
    extend: {
      boxShadow: {
        '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
      }
    }
  }
}

And now with the advent of JIT, you can also use an arbitrary value inside a square bracket [] like the following:

<div class="shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)]">
  // Rest of your code goes here
</div>

Using arbitrary values may be useful when you need a specific style at only a few places for which creating a theme for it in the tailwind.config.js might seem to be unnecessary.

My thoughts

I really hope that I was able to make you understand what Tailwind CSS is and what can be achieved with it. It is a CSS framework that provides us with single-purpose utility classes which are opinionated for the most part, and which help us design our web pages from right inside our markup or .js/.jsx/.ts/.tsx files. In my opinion, it's simple and easy to understand. It's true that it might take some time to get hang of all the utility class names. Do refer to their documentation whenever you get stuck. And to all the beginners out there who are just starting their journey with web development, it is very important to know what CSS3 is before you even explore Tailwind or for that matter any other CSS framework like Bootstrap, Windi CSS etc.

Important GIT commands you'll need to know 🔥 [Part 2] (for the major part of your work)

Soham De Roy — Thu, 12 Aug 2021 11:10:09 +0000

📋 Summary

In this part, we will cover the following commands ⬇️⬇️⬇️

git clone <Remote_URL>: To clone the remote repo to your local machine.
git checkout -b <Branch_Name> origin/<Branch_Name>: This will create a new local branch named "Branch_Name" AND will also set it to track the remote copy of the branch "origin/Branch_Name".
git fetch: It will fetch the changes from the remote and put them in our local repo. It will not make the changes visible in the working directory.
git merge: Will automatically merge those differences to the working directory.
git pull = git fetch + git merge: It will fetch all the changes in remote and directly merge them to the working directory.
git stash: Stash up changes in files that are currently tracked by git at some other place. It will not stash changes in untracked and ignored files.
git stash -u: This allows us to stash even untracked files but not ignored files.
git stash -a: Allows us to stash all types of files tracked, untracked and ignored.
git stash list: List down all the entries in the stash.
git stash pop: Removes the latest stash (stash@{0}) from the list and applies it to the working tree.
git stash apply: Applies the latest stash (stash@{0}) from the list to the working tree and keep it in the stash list.
git stash pop stash@{2}/ git stash apply stash@{2}: Applies the 2nd stash (stash@{2}) from the list to the working tree and deletes it/ keep it in the stash list respectively.

Hello world 🖖. Welcome to the second part of the blog on Important GIT commands you'll need to know. The first part mainly covers the set of commands which are required probably when you are working alone on a project. It focuses mainly on the following points

Initialise a git local repo
Check which files you have made changes in
Add those files to the staging area and commit them to a branch
Create separate branches for separate features and checkout code in different branches
And finally to push your code to a remote repository so that others can also see/ contribute to your code. If you haven't read the first part of this blog, do check it out here Important GIT commands you'll need to know 🔥 [Part 1] before moving forward to get a better perspective.

As you might remember that in the first part we discussed two possibilities viz.

You want to start a new project (covered in Part 1) and
You want to contribute to an existing code base

This part of the blog will cover the second scenario in depth. So let's get started...

How to get the codebase from the remote repo to my local machine? - git clone 👨‍💻

Suppose you want to contribute to a project. For that, you want to know that where the codebase is located. For this case, we are assuming that it's in a remote repo in Github. As you remember that we created a remote github repo in Part 1 of the blog. We will try to clone that repo in our local machine by using the following steps.

Navigate to the remote repo (https://github.com/sohamderoy/demo-repo for this example) and copy the repo link under HTTPS section as shown in the figure above.
Navigate to a new folder you want to clone the project and open the git bash terminal.
Execute command git clone <Remote_URL> or in this case git clone https://github.com/sohamderoy/demo-repo.git
After successful cloning, you'll see the following screen

The remote repo will get cloned in your folder and you'll be able to see the content of the remote repo in your machine.

Do note that 👆

By default, after cloning the repo, you'll see the content of the main branch. To see the content of any other branch do git checkout <branch_name>.
The cloned repo will already be initialized with git (you can see the .git folder has already been created) and we don't have to run the git init command. So this local repo will automatically start tracking any changes done to files within it.
To check all the branch(es) linked to this repo, run command git branch -a, and to check out any other branch run command git checkout <branch_name>. For all other important commands on branching and pushing your changes to the remote repo please refer to Part 1 of this blog.
Also in this case where you have cloned a remote repo, you don't have to run the command git remote add <remote_repo_URL>, as this time the cloned repo is already connected to a remote repo. Directly running git remote -v will show the push and fetch URL set to the cloned repo. See image below

Before we move forward, I think it's high time that we need to clear a concept about how many different levels are there in between our working directory and the remote repo. The following section explains

Working directory, Staging area, Local repo, Remote repo: Explained 👨‍🏫

The above image is a very important one that helps to explain the different layers in the original version controlling process.

The working directory represents the state of files when we edit them. It is the state until we add it to the staging area.
When we are a bit sure about the changes we made in the files, and we want to commit them to the branch, we add them to the staging area by doing git add . or git add <file_name> and do a git commit -m "Commit message" to commit it to the local branch.
To get these commits to the remote repo we run the command git push.

Now, this was the part that we have learnt till now (including the Part 1 of this blog) i.e. the journey from the working directory to remote.

Journey from Remote repo to Local repo and working directory. 🛣️

Let's suppose that a co-contributor of your project has made some changes and pushed it to the remote. Let's try to simulate that. Remember our Github repo, in the "new-branch" branch of that remote repo, we have a file "new.txt" with contents as shown below.

We have already cloned this repo in our local so let's check out this new branch using the command git checkout -b new-branch origin/new-branch. This will create a new local branch named "new-branch" AND will also set it to track the remote copy of the branch "origin/new-branch". Note 👆, we can also use git checkout new-branch, but that just create a new branch but will not track the remote branch. It will only do so if we push some changes in this branch to the remote using git push -u origin new-branch. But as of now, we do not have anything to push so we use git checkout -b new-branch origin/new-branch directly to create a new branch and track to the origin branch.

Now that it's clear let's make some changes in the remote repo directly via Github and commit it as shown in the image below (this is to simulate the process where someone else is contributing to our project)

To get these changes done by someone else in our local, we can use the following

git fetch (Remote repo to Local repo)

git fetch will fetch the changes from the remote and put them in our local repo. It will not make the changes visible in the working directory. Let's see how it works

We are in the new-branch branch in local. Let's run git fetch. It shows that all changes from the remote branch are added in origin/new-branch as shown in the image below.

While remaining in new-branch branch if we open "new.txt" (i.e. the one in the working directory), it will not show us the changes done in Github.

On the other hand if we checkout to "origin/new-branch" and open "new.txt" (i.e. the one in the copy of the remote "new-branch" branch), it will show us the changes done in Github.

git merge (Local repo to Working directory)

If we want to see the difference between new-branch and origin/new-branch using the command git diff new-branch origin/new-branch then it will show us the following difference.

Now to get these changes merged to the local branch of "new-branch" and get them reflected in files in working directory, we just need to run the command git merge. As the branch "new-branch" is tracking "origin/new-branch", git merge will automatically merge those differences to the working directory. Now all the changes will be reflected in the working directory as shown in the image below.

git pull (Directly from Remote repo to Working directory)

git pull is a shortcut to do git fetch and git merge is one go. It will thus download all the changes from the remote repo, and merge them directly to the local repo and working directory. So just remember the following

Let's say we again make some more changes in "new.txt" directly via Github and commit it.

Now in local if we do a git pull, it will download all the changes and put them in both "origin/new-branch" and in "new-branch" (i.e. all changes will be directly merged to the working directory).

Running git diff new-branch origin/new-branch will thus show no results as seen below

How to "Stash up" some of my recent changes for the time being so that I get to keep those changes somewhere without committing it? 📦

In case you are working on some files, made some changes but also at the same time want to check out some different branch, git provides us with an option to stash up/ keep those current changes in some other place. We can achieve this by following:

git stash : Stash up changes in files that are currently tracked by git at some other place. Thus your file needs to be added at least once for it to be considered for getting stashed.
By default, we cannot stash any files that are in the "Untracked files" section or files mentioned in .gitignore file. For e.g. as per the image below, new.txt was modified and added in the staging area whereas newfile.docs is a new file that's created and is still in the "Untracked files" section. Running git stash thus added only new.txt in the stash.

git stash -u : This allows us to stash even untracked files but not ignored files.
git stash -a : Allows us to stash all types of files tracked, untracked and ignored.
git stash list : List down all the entries in the stash.
git stash pop : Removes the latest stash (stash@{0}) from the list and applies it to the working tree.
git stash apply : Applies the latest stash (stash@{0}) from the list to the working tree and keep it in the stash list.
git stash pop stash@{2}/ git stash apply stash@{2} : Applies the 2nd stash (stash@{2}) from the list to the working tree and deletes it/ keep it in the stash list respectively.

This marks the end of this blog. Don't get me wrong, this (i.e. the content covered in Part 1 and Part 2) is not all of git. It can never be. I will be releasing some more blogs in the future related to other commands in git. But the content covered in both these parts will help you sail through 99% of your daily task. That was my main motive for these two parts. There are some more important commands in git, but those are not used that often when compared to the ones mentioned in both these parts. Don't worry, I'll soon gonna cover them separately.

I hope that the content provided in both these parts will be helpful to all the readers. Thanks for reading! If you like this blog and feel it's useful, do consider hitting the link button and share it with your friends, I'd really appreciate that. Stay tuned! 🖖

Important GIT commands you'll need to know 🔥 [Part 1] (for the major part of your work)

Soham De Roy — Mon, 02 Aug 2021 18:03:37 +0000

👆NOTE: This blog will be a bit longer as I will be explaining all the commands. Thus I will divide the blog into two parts (this being the first one). I will update this part with a link to part 2 once I publish it. Both parts will also contain a summary which will contain a list of all the commands mentioned in the blog for a quick revision.

📋 Summary

git init: To initialise a local directory with git.
git status: To check the status of your repo i.e. to see if any file has been edited/ deleted/ added. It also shows all the tracked and untracked files. Stashed changes will not be reflected in git status.
git add <file name>/ git add .: Adds changes in a particular file/ all changes in the staging area.
git commit -m "commit message describing in short what changes are made": To commit the changes.
git remote add origin <remote repo url>: Connects local repo to a remote repo.
git push -u origin <Local repo name>: Pushes all the committed changes from the local repo to the remote repo.
git remote -v: Will list down all the remote repos that are linked to the local repo.
git branch -a: To see all the branches in your repo (local + remote).
git checkout <branch name>: To checkout/ see the code in a branch.
git checkout -b <branch name>: Create a new branch with the name <branch name> and check out the same branch.

GIT is a very powerful tool or shall I say a very elegant solution ever built to tackle a very complex challenge of version control. As one of my friends once said that the idea of multiple people working on the same product (and that too remotely) is in itself a very complicated job. GIT helps us to ease just that. And that is why it becomes so important to know GIT and all its useful commands.

What this blog is not about and what it rather actually is about? 👨‍💻

To get this straight this blog is not to introduce you to GIT or what it is meant to do. Rather I assume that you know what is GIT and its basic and thus I'll jump right into the main point of this blog i.e what are the most common and important GIT commands that will help you sail through more than 99% of your daily job.

Now there are mainly two possibilities that we should discuss here before moving forward.

One possibility is that you might want to start a new project. This case mainly arises when a developer starts thinking of starting a side project/ or want to do a POC/ or simply follow along with some tutorial.
The second possibility is that you want to contribute to an existing codebase. This case can arise when you either want to contribute to an open-source project or you are in a team that is developing an application (many folks working in a tech company can relate to this use-case).

What to do when you want to start a new project. 🤔

Create a folder for your project.
Navigate to that folder (initially the folder will be empty) and open the git bash terminal in that same location and type git init. You will notice that a .git folder got created in that directory. This way you can initialise the directory with git and it will now track any changes like file viz. edit/ delete/ add happening in that directory and all its direct children.

How to track any change in files (new file added/ edited/ deleted), add it to stage and commit it? 🤔

Now that you have initialized a directory with git, it will create a default master branch (or main branch as it's called in current versions) for you. We will learn about how to make other branches later. For the time being, let's make some changes in the master branch itself.

To check what is the current status of your local git repo execute the command git status. Initially, if there is no change to show, then the following message should be displayed.
Create a new file in the project root directory by using the command touch new.txt. You can also create a file by the normal method of right-clicking in the directory and creating the desired file.
Now execute git status and it will show you that a new file has been added to the directory. It will be shown in red as the change is still not in the staging area of git.
To add any new change in the staging area execute the command git add <file name>. You can also do git add . to add all the changes in the staging area. Once added, if you run git status, it will show the change in a green colour denoting that the change is now in the staging area.
To commit any change to the branch you have to execute the command git commit -m "your commit message describing in short what changes are made". Doing a git status at this point (after committing) will show that there is no more change to commit (provided that you have added all the changes to staging are and then committed them) and the working tree (master branch in this case) is clean.

Please note 👆 that staging is a way of us saying to git to keep a track of a particular file. So in case, a completely new file is added we HAVE to add it to the staging area at least once using git add <filename> or by git add .. Before we add the file in the staging area git status will show the file in the "Untracked file" section as shown in the image below.

But once the file has been added to the staging area at least once, any further change in the file will make it show in the "Changes not staged for commit" section, but the file is being tracked. So to commit any subsequent change of the file in the working tree, we can directly run the command git commit -am "Commit message". For eg. if I edit the previous file (new.txt) and also create a new file say "newfile.txt" in the root then git status will show the following.

As you can see that "new.txt" is in the "Changes not staged for commit" section as I had already git add this file previously and have just edited it now, whereas, on the other hand, I added a completely new file which is now showing in the "Untracked file" section. Running git commit -am "Commit message" command will only commit the changes in the tracked file "new.txt" and will NOT commit the "newfile.txt" as that is not tracked. We need to add it using git add newfile.txt first and then commit it.

How do I connect a remote repository (repo) to my local git repo? 🤔

In collaborative teamwork, chances are that more than one person is working on a project. In that case, you have to connect your local repo to a remote repo so that everyone can access it. Currently, our repo is in our local and no one can access it. Let connect it to a remote Github repo.

Create a new Github repo and copy the repo URL as shown in the image below.

In the git bash terminal run the command git remote add origin <url>. This will now connect our local repo to the remote repo. Here origin is the shortcut name that we assign to the remote Github URL. Thus origin = <remote Github url>. It is not compulsory though but advised to name the base repo as origin.

How to push all the changes from local to remote. 🤔

Run the command git push -u origin <Local repo name> i.e in this case git push -u origin master. This will push all the committed changes from the local repo to the remote repo. The changes will now get reflected in the remote Github repo as shown below.

Thus git push -u origin repo-example-name-1 will create a new branch in the remote repo with a name repo-example-name-1 (if it is not present already) and push all the committed changes from the local branch you ran the command to the remote branch.
Please note 👆 that in a subsequent execution of git push -u origin repo-example-name-1 a new branch in the remote repo (with name repo-example-name-1) is not created as it is already present in the remote repo.
It also sets the local branch to track the remote branch at the origin.

Another handy command to keep in your toolbox is the following

What are all the remote repo you have linked to your local repo? 🤔

Run the command git remote -v and it will list down all the remote repos that are linked to the local repo as shown in the image below.

It denotes that for all the push and fetchcommands with origin git will use the URL "https://github.com/sohamderoy/demo-repo.git"

How to create a new branch? And why should I create a new branch? 🤔

Branches in git is an elegant way for a user to switch between different kinds of tasks. Let's say I have to add two new features in my application viz. a login/ signup screen and a dark mode feature. For both the features let's say I need to work with different sets of files and might have to add totally different sets of logic. In that case, it is advised to create two new branches out of the main branch and work on both the feature separately. If there is a third new feature to add, create another branch for that. Later once the feature is developed, merge that sub-branch into the main branch (or the branch where your team prefers to keep the latest code like a develop or release branch for many companies)

git branch -a: Run this command to see all the branches in your repo (local + remote) . The branches shown in the form <branch name> is/ are the local branch(es) in the local repo. Similarly, the branches shown in the form remotes/origin/<branch name> is/ are the remote branch(s) from the remote repo origin connected to the local repo.
git checkout <branch name>: Use this command to checkout/ see the code in a branch.
git checkout -b <branch name>: Create a new branch with the name <branch name> and check out the same branch.

As seen in the image above, initially there were only two branches master (local branch) and remotes/origin/master (remote branch). After running the command git checkout -b new-branch a new local branch with the name new-branch is created. To get this branch on the remote branch run command git push -u origin new-branch.

👆 NOTE:

It is advised to keep the name of the local and remote branches the same so that both can be recognised and linked easily.
Keep the name of your branch short and descriptive so that anyone can get an idea of what that branch was created for without even looking at the code just by looking at the name.
Always create a separate branch for different feature implementation.

puff!!! that's a lot of branches. don't worry read the section again and I am sure you'll catch the drift. 🙂

To be continued...

I'll end Part 1 of this blog here. I hope that the content provided in this part will be helpful to all the readers. In the next part, I'll cover the rest of the git commands which are worth keeping in your toolbelt so stay tuned in.

Thanks for reading! If you like this blog and feel it's useful, do consider hitting the link button and share it with your friends, I'd really appreciate that. Stay tuned! 🖖

DEV Community: Soham De Roy

Understanding Redux (Part 2): Creating a small Redux powered React App in 10 easy steps (with code snippets)

Code Setup

1. Create a react app with the create-react-app command

2. Go to the newly created folder using

3. Install redux and react-redux library using the commands

4. Run the application using

5. Creating Reducer

6. Creating the store and providing it to the App

7. Create Actions

8. Creating the view/ UI

9. Reading/ Accessing the store using useSelector hook

10. Dispatching Action on button click (along with handling some UI behaviour based on the state) with useDispatch hook

Github Link

Summary

Wrapup

Social Links

Understanding Redux (Part 1): Demystifying Store, Action and Reducers

Introduction

Why is redux termed as a state container?

What makes Redux predictable?

Core Principles of Redux

1. Store

2. Action

3. Reducers

Summary

Wrapup

Social Links

How to Google like a Pro 😎. #10Tips

Introduction

1. Using quotes to get the "EXACT" match

2. Search within a specific site with site:

3. Excluding a term from search results with -

4. Search images of a particular size with imagesize:

5. Searching for a particular filetype with filetype:

6. Use wildcard * to make searches

7. Combining searches with OR, AND logic

8. Filter out searches with AFTER:, BEFORE: or .. between two numbers

9. Check out related websites using related:

10. To see Google's cached version of a website

Wrapup

Understanding Tailwind CSS

Introduction

Atomic CSS approach

Tailwind CSS - A utility first CSS framework

Setting up Tailwind CSS

Hands-on demo

We are not done yet... there's a lot of other advantages

Just-In-Time (JIT) mode -- providing lightning-fast build times

Opinionated and flexible at the same time

My thoughts

Important GIT commands you'll need to know 🔥 [Part 2] (for the major part of your work)

📋 Summary

How to get the codebase from the remote repo to my local machine? - git clone 👨‍💻

Working directory, Staging area, Local repo, Remote repo: Explained 👨‍🏫

Journey from Remote repo to Local repo and working directory. 🛣️

git fetch (Remote repo to Local repo)

git merge (Local repo to Working directory)

git pull (Directly from Remote repo to Working directory)

How to "Stash up" some of my recent changes for the time being so that I get to keep those changes somewhere without committing it? 📦

Important GIT commands you'll need to know 🔥 [Part 1] (for the major part of your work)

📋 Summary

What this blog is not about and what it rather actually is about? 👨‍💻

What to do when you want to start a new project. 🤔

How to track any change in files (new file added/ edited/ deleted), add it to stage and commit it? 🤔

How do I connect a remote repository (repo) to my local git repo? 🤔

How to push all the changes from local to remote. 🤔

What are all the remote repo you have linked to your local repo? 🤔

How to create a new branch? And why should I create a new branch? 🤔

To be continued...

9. Reading/ Accessing the store using `useSelector` hook

10. Dispatching Action on button click (along with handling some UI behaviour based on the state) with `useDispatch` hook

2. Search within a specific site with `site:`

3. Excluding a term from search results with `-`

4. Search images of a particular size with `imagesize:`

5. Searching for a particular filetype with `filetype:`

6. Use wildcard `*` to make searches

7. Combining searches with `OR`, `AND` logic

8. Filter out searches with `AFTER:`, `BEFORE:` or `..` between two numbers

9. Check out related websites using `related:`