DEV Community: Tejendra Singh Rajawat

In React development, creating responsive and dynamic tables is a common requirement. Material-UI (MUI) provides a robust and customizable table component that simplifies this task. Let's dive into the key features of Material-UI tables, understand the usage of the Skeleton component for loading states, create a reusable table component, and showcase a dynamic table for various use cases.

Ref: CODESANDBOX

1. Understanding Material-UI Table 📊

Material-UI's Table component offers a comprehensive solution for rendering tables in React applications. Let's break down the provided Table component in the example code:

Columns and Data: The table is configured with columns and data, allowing developers to customize the display of information.

<table>
          <thead>
            <tr>
              {tableColumns.map((item, index) => renderHeader(item, index))}
            </tr>
          </thead>
          {!isLoading ? (
            <tbody className={tableBodyClassname}>
              {tableData?.length > 0 ? (
                tableData.map((item, index) => (
                  <tr key={index}>
                    {tableColumns.map((values, i) => (
                      <td key={`${index} ${i}`}>
                        {typeof item[values.key] === "string" &&
                        item[values.key].length > 50
                          ? `${item[values.key].slice(0, 50)}...`
                          : item[values.key]}
                      </td>
                    ))}
                  </tr>
                ))
              ) : (
                <tr>
                  <td className="no-records" colSpan={tableColumns.length}>
                    No Records Found.
                  </td>
                </tr>
              )}
            </tbody>
          ) : (
            <tbody>
              {Array.from({ length: rowCount }, (_, index) => (
                <tr key={index}>
                  {tableColumns.map((_, i) => (
                    <td key={`${index} ${i}`}>
                      <Skeleton />
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          )}
        </table>

Sorting: Users can click on column headers to sort the data. The sorting status is managed through the sortingStatus state.

 onClick={() =>
        setSortingStatus({
          [item.key]: sortingStatus[item.key]
            ? -1 * parseInt(sortingStatus[item.key])
            : 1
        })
      }
      className={`sorting-column ${
        sortingStatus[item.key] === 1
          ? "down"
          : sortingStatus[item.key] === -1
          ? "up"
          : ""
      }`}

Pagination: For handling large datasets, pagination controls are integrated, enhancing the user experience.
Responsive Design: The table adjusts its height dynamically based on the window size, ensuring a responsive layout.

  useEffect(() => {
    const handleResize = () => {
      setHeight(window.innerHeight - 225);
    };

    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

2. Unveiling the Skeleton Loading Effect 💀

Loading states are crucial for a seamless user experience, especially when dealing with asynchronous data fetching. Material-UI's Skeleton component provides a visually appealing loading effect. In the Table component, the loading state is indicated by rendering skeletons instead of actual data. This is achieved through conditional rendering based on the isLoading prop.

3. Crafting a Reusable Table Component 🔄

Efficient code organization involves creating reusable components. The Table component showcased in the example is designed to be flexible and reusable. Developers can easily integrate it into their projects by passing appropriate props for columns, data, pagination, and other configurations.

4. Dynamic Table for All Use Cases 🌐

The example includes a DemoComponent that demonstrates the dynamic nature of the table. It simulates data fetching with a fake timer, updating the table with new data upon pagination changes. This mechanism allows developers to handle various use cases efficiently.

  <Table
      tableColumns={columns}
      tableData={data}
      paginationCount={paginationCount}
      handlePaginationValue={handlePaginationValue}
      sortingStatus={sortingStatus}
      setSortingStatus={setSortingStatus}
      isLoading={loading}
      rowCount={15}
      tableBodyClassname=""
      currentPage={currentPage}
    />

Conclusion 🚀

In conclusion, Material-UI's Table component, coupled with the Skeleton loading effect, empowers React developers to create responsive and dynamic tables. By crafting a reusable table component, developers can enhance code maintainability and promote scalability. The provided code snippets and dynamic use case exemplify the versatility of this approach, making it a valuable addition to your React development toolkit.

Happy coding! 🚀

🚀 Best Practices you should know before starting new React.js project 🚀

Tejendra Singh Rajawat — Wed, 04 Oct 2023 10:42:11 +0000

React.js is a popular JavaScript library for building user interfaces, known for its flexibility and reusability. To help you write clean, maintainable, and efficient React code, we've compiled 30 best practices for React.js development. Let's dive in! 🏊‍♂️

Fundamentals of React.js

Component Reusability: Break down your UI into small, reusable components to make your codebase more maintainable. ♻️
Use Functional Components: Embrace functional components with React Hooks whenever possible, as they provide a concise and readable syntax. ⚙️
State Management: Choose an appropriate state management solution like Redux or the Context API for complex state handling. 🧠
Immutable Data: Avoid directly mutating state or props; create copies or use immutability helpers like spread or libraries like Immutable.js. 🚫🔄
Props Validation: Use PropTypes or TypeScript to validate the props passed to your components, catching errors early. 📜🔍

Performance Optimization

Avoid Over-Rendering: Optimize rendering by using shouldComponentUpdate or React.memo to prevent unnecessary re-renders. 🏎️
Component Lifecycle Methods: Understand when to use lifecycle methods like componentDidMount and componentWillUnmount and how they map to useEffect in functional components. 🔄🌟
Keys in Lists: Always provide a unique key prop when rendering lists to help React identify items efficiently. 🔑✨
Code Splitting: Use code splitting techniques to load only the necessary JavaScript for the current route or component, improving performance. 🧩🚀
Memoization: Memoize expensive calculations or functions using tools like useMemo to prevent unnecessary recalculations. 📝🤖

Code Quality and Structure

Organize Project Structure: Maintain a well-structured project directory with clear separation of components, styles, and logic. 📂🏢
ESLint and Prettier: Use ESLint and Prettier to enforce code style consistency and catch potential issues early in development. 📝🧹
Stateless Functional Components: Prefer using stateless functional components for presentational components that don't need internal state. 🚀🎨
React Fragments: Use React Fragments (<></>) to group multiple elements without adding extra nodes to the DOM. 🏗️🔧
Destructuring: Destructure props and state to improve code readability and reduce repetition. 🧩🔀

Best Practices for Production

Avoid Direct DOM Manipulation: Minimize direct manipulation of the DOM; let React handle updates through its virtual DOM. 🕹️🖥️
Server-Side Rendering (SSR): Consider server-side rendering for SEO and performance benefits, especially for larger applications. 🌐🔥
Testing: Write unit tests and integration tests using tools like Jest and React Testing Library to ensure code reliability. 🧪👷‍♀️
Component Naming: Use meaningful and consistent naming conventions for components, making it easier for developers to understand their purpose. 📛🔍
Accessibility (a11y): Prioritize accessibility by using semantic HTML elements, providing alt text for images, and testing your app with screen readers. 🌐♿
Advanced React Development
Code Splitting with React.lazy: Use React.lazy and Suspense to dynamically load and render components only when they are needed, improving initial page load times. 🧩🏁
Use PropTypes or TypeScript: Leverage TypeScript's type system for prop validation or continue using PropTypes to ensure type safety. 📜🔍🏗️
Performance Profiling: Utilize React's built-in profiling tools and third-party tools like React DevTools to identify and optimize performance bottlenecks in your app. 📈🔍
CSS Modules or Styled Components: Consider using CSS Modules or Styled Components to scope styles to individual components, preventing global CSS conflicts. 🎨🧹
Avoid Using Index as Key: When mapping over arrays to render lists, avoid using the index as the key. Use a unique identifier whenever possible for stable and efficient rendering. 🚫🔑

Essential Practices

Avoid Uncontrolled Components: Prefer controlled components with explicit state management over uncontrolled components when working with forms and input elements. 📝🧮
Optimize Bundle Size: Keep an eye on your app's bundle size and use tools like Webpack Bundle Analyzer to identify and reduce unnecessary dependencies. 📦📉
Client-Side Routing: Choose a client-side routing library like React Router for handling navigation in single-page applications (SPAs). 🚗🛣️
Error Boundaries: Place error boundaries strategically in your component hierarchy to catch and handle errors gracefully at appropriate levels. ⚠️🤲

These 30 best practices are invaluable for any React.js developer. By following them, you'll build more efficient, maintainable, and accessible applications. Happy coding! 🚀👩‍💻

Building a Chrome Extension for Space Exploration

Tejendra Singh Rajawat — Thu, 24 Aug 2023 06:31:47 +0000

In this tutorial, we will walk through the process of creating a Chrome extension that fetches data from the NASA API. The extension will display the NASA Image of the Day and provide information about Mars rover photos. We'll structure our project as follows:

Project Structure

The most crucial file in this structure is manifest.json, which holds essential details about our extension:

{
  "name": "space exploration",
  "version": "0.0.1",
  "description": "this is nasa api to get data of space",
  "permissions": ["activeTab", "tabs", "browsingData", "storage"],
  "background": {
    "service_worker": "background.js"
  },
  "author": "IM",
  "action": {
    "default_popup": "index.html",
    "default_title": "clear storage"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["contentScript.js"]
    }
  ],
  "manifest_version": 3
}

In this manifest.json, we define permissions like activeTab and storage to access necessary browser functionalities. The background.js script runs continuously in the background to trigger the extension when needed. The default_popup points to the initial screen of the extension, and the content_scripts array specifies scripts to manipulate active tab's DOM.

Creating the Popup Interface

The popup interface is defined in index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link href="./style.css" rel="stylesheet" />
    <title>Space Exploration</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f4f4f4;
      }
      .container {
        background-color: white;
        border-radius: 10px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        padding: 20px;
        max-width: 600px;
        width: 100%;
      }
      .flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 10px 0;
        padding: 10px;
        border: 1px solid black;
      }
      .flex > p {
        margin: 0;
        padding: 0;
      }
      button {
        border: 1px solid white;
        border-radius: 10px;
        padding: 0 10px;
        height: 40px;
        transition: all 0.2s ease-in;
      }

      button:hover {
        background-color: rgb(18, 117, 18);
        color: white;
      }
      h1 {
        margin-top: 0;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1 id="title"></h1>
      <p id="date"></p>
      <img id="image" src="" alt="APOD Image" />
      <div class="flex">
        <p>Show mars rover photos</p>
        <button id="marsRover">Go</button>
      </div>
    </div>
    <script src="./index.js"></script>
  </body>
</html>

The index.js script fetches and displays the NASA Image of the Day:

document.addEventListener("DOMContentLoaded", () => {

  const apiUrl = `https://api.nasa.gov/planetary/apod?api_key=${apiKey}`;

  fetch(apiUrl)
    .then((response) => response.json())
    .then((data) => {
      const titleElement = document.getElementById("title");
      const dateElement = document.getElementById("date");

      const imageElement = document.getElementById("image");

      titleElement.textContent = data.title;
      dateElement.textContent = `Date: ${data.date}`;

      imageElement.src = data.url;
      imageElement.style.width = "300px";
      imageElement.style.height = "200px";
      imageElement.style.borderRadius = "5px";
    })
    .catch((error) => {
      console.error("Error fetching data:", error);
    });
});

document.addEventListener("DOMContentLoaded", function () {
  const marsBtn = document.getElementById("marsRover");
  marsBtn.addEventListener("click", function () {
    window.location.href = "marsRover.html";
  });
});

Exploring Mars Rover Photos

Clicking a button leads to a new screen, marsRover.html:

and when we click on button it will go to anther screen marsRover.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Mars Rover Photo</title>
  </head>
  <body>
    <h1>Mars Rover Photos</h1>
    <div id="photo-container"></div>
    <script src="./marsRover.js"></script>
  </body>
</html>

The marsRover.js script fetches and displays Mars rover photos:

document.addEventListener("DOMContentLoaded", () => {
  const apiUrl = `https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?sol=1000&api_key=${apiKey}`;

  fetch(apiUrl)
    .then((response) => response.json())
    .then((data) => {
      console.log(data);
      const photos = data.photos;
      console.log(data.photos);

      // Displaying on the DOM
      const photoContainer = document.getElementById("photo-container");

      photos.forEach((photo) => {
        const photoDiv = document.createElement("div");
        photoDiv.className = "photo";

        const imgElement = document.createElement("img");
        imgElement.src = photo.img_src;
        imgElement.style.width = "300px";
        imgElement.style.height = "200px";
        imgElement.style.borderRadius = "5px";

        const roverNameElement = document.createElement("p");
        roverNameElement.textContent = `Rover Name: ${photo.rover.name}`;

        const earth_date_element = document.createElement("p");
        earth_date_element.textContent = `Date: ${photo.earth_date}`;

        photoDiv.appendChild(roverNameElement);
        photoDiv.appendChild(earth_date_element);
        photoDiv.appendChild(imgElement);

        photoContainer.appendChild(photoDiv);
      });
    })
    .catch((error) => {
      console.error("Error fetching data:", error);
    });
});

Conclusion

With this Chrome extension, you've learned how to fetch and display NASA space data. Utilizing manifest.json, content scripts, and background scripts enhances the extension's capabilities. Remember, content scripts manipulate active tab DOM, while background scripts run continuously in the background.

Happy coding and exploring the cosmos with your Chrome extension!

🎨 Mastering Drag-and-Drop in React-Select: A Visual Guide 🚀

Tejendra Singh Rajawat — Sun, 27 Nov 2022 08:46:20 +0000

Absolutely! Let's add some emojis and improve the visual appeal with a simple diagram.

🚀 Enhancing Drag-and-Drop in React-Select

Today, we'll embark on a journey to amplify the drag-and-drop experience in the react-select library. 🎉 To begin, let's gear up with the essential Higher Order Components (HOC) from both react-select and react-sortable-hoc.

import Select, { components } from "react-select";
import { SortableContainer, SortableElement } from "react-sortable-hoc";

To facilitate the drag-and-drop events, we'll wield a moveable array and a customized MultiValue function. 🛠️

// Function for drag and drop
function arrayMove(array, from, to) {
  array = array.slice();
  array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]);
  return array;
}

// Crafting a draggable MultiValue component
const SortableMultiValue = SortableElement((props) => {
  const onMouseDown = (e) => {
    e.preventDefault();
    e.stopPropagation();
  };
  const innerProps = { onMouseDown };
  return <components.MultiValue {...props} innerProps={innerProps} />;
});

// Assembling a sortable Select component
const SortableSelect = SortableContainer(Select);

Now, let's infuse life into our drag-and-drop adventure by using the onChange and onSortEnd functions to dance with selection and reordering.

// Example with mandatory skills 🌟
const [selectedMand, setSelectedMand] = React.useState([...getMandatorySkillOption]);

const onChangeMand = (selectedOptions) => setSelectedMand(selectedOptions);
const onSortEndMan = ({ oldIndex, newIndex }) => {
  const newValue = arrayMove(selectedMand, oldIndex, newIndex);
  setSelectedMand(newValue);
  console.log("Values sorted:", newValue.map((i) => i.value));
};

Lastly, let's bring all the props together in our stage, the SortableSelect component. It eagerly accepts all the props from react-select and adds a touch of magic with draggable MultiValues. ✨

<SortableSelect
  axis="xy"
  styles={customStyles}
  classNamePrefix={"create_position"}
  onSortEnd={onSortEndMan}
  distance={4}
  getHelperDimensions={({ node }) => node.getBoundingClientRect()}
  isMulti
  options={getMandatorySkillOption}
  value={selectedMand}
  onChange={onChangeMand}
  components={{
    MultiValue: SortableMultiValue,
  }}
  defaultValue={formData?.mandatorySkill?.map((i) => ({
    value: i.id,
    label: i.mandatorySkillName,
  }))}
  closeMenuOnSelect={false}
/>

With this, we aim to not only enhance functionality but also add a dash of fun and excitement to the reading experience! 🚀📚

Video call app using webrtc

Tejendra Singh Rajawat — Tue, 06 Sep 2022 12:21:59 +0000

Hi there, today we are creating video call app using webRtc, firebase and react.js.
You can also test code available here -> Github

1. Create Room ->

First, create realtime database in firebase and create a roomId using urlparams, which is a random created key in firebase database.

// reference of RD
let RD = firebase.database().ref();
// url params
const URLPARAMS = new URLSearchParams(window.location.search);
// get id from url
const roomId = URLPARAMS.get("id");

if (roomId) {
  // set room id as child
  RD = RD.child(roomId);
} else {
  // create id and set to roomid
  RD = RD.push();
  window.history.replaceState(null, "meet", "?id=" + RD.key);
}

2. create participant object -

now we will create an object participant in our roomId which contains audio,video and screen share information. It will look like this -

To get this output ,we will do as follow , you can get userName as string or get it dynamically too.

const participantDb = RD.child("participant");
  useEffect(() => {
    //check for value if true
    connectedRef.on("value", (snap) => {
      if (snap.val()) {
        // create values to push
        const defaultPref = {
          audio: true,
          video: false,
          screen: false,
        };
        // push data to participant
        const pushedDataOfParticipant = participantDb.push({
          userName: 'tejendra',
          preference: defaultPref,
        });
        // remove user when he quit or close browser
        pushedDataOfParticipant.onDisconnect().remove();
      }
    });
  }, []);

3. Peer Connection -

Now most important part of webrtc is create peer to peer connection so we can communication in realtime, for that we need to follow below image.

For signaling we are using firebase.
First user will create a offer for others to join and when someone joins then one answer will be created and they will communicate using signaling.

i. create offer -

export const createOffer = async (peerConnection, receiverId, createdID) => {
  const currentParticipantRef = participantRef.child(receiverId);
  peerConnection.onicecandidate = (event) => {
    event.candidate &&
      currentParticipantRef
        .child("offerCandidates")
        .push({ ...event.candidate.toJSON(), userId: createdID });
  };

  const offerDescription = await peerConnection.createOffer();
  await peerConnection.setLocalDescription(offerDescription);

  const offer = {
    sdp: offerDescription.sdp,
    type: offerDescription.type,
    userId: createdID,
  };

  await currentParticipantRef.child("offers").push().set({ offer });
};

export const initializeListensers = async (userId) => {
  const currentUserRef = participantRef.child(userId);

  currentUserRef.child("offers").on("child_added", async (snapshot) => {
    const data = snapshot.val();
    if (data?.offer) {
      const pc =
        store.getState().participants[data.offer.userId].peerConnection;
      await pc.setRemoteDescription(new RTCSessionDescription(data.offer));
      await createAnswer(data.offer.userId, userId);
    }
  });

  currentUserRef.child("offerCandidates").on("child_added", (snapshot) => {
    const data = snapshot.val();
    if (data.userId) {
      const pc = store.getState().participants[data.userId].peerConnection;
      pc.addIceCandidate(new RTCIceCandidate(data));
    }
  });

  currentUserRef.child("answers").on("child_added", (snapshot) => {
    const data = snapshot.val();
    if (data?.answer) {
      const pc =
        store.getState().participants[data.answer.userId].peerConnection;
      const answerDescription = new RTCSessionDescription(data.answer);
      pc.setRemoteDescription(answerDescription);
    }
  });

  currentUserRef.child("answerCandidates").on("child_added", (snapshot) => {
    const data = snapshot.val();
    if (data.userId) {
      const pc = store.getState().participants[data.userId].peerConnection;
      pc.addIceCandidate(new RTCIceCandidate(data));
    }
  });
};

ii. create answer -

const createAnswer = async (otherUserId, userId) => {
  const pc = store.getState().participants[otherUserId].peerConnection;
  const participantRef1 = participantRef.child(otherUserId);
  pc.onicecandidate = (event) => {
    event.candidate &&
      participantRef1
        .child("answerCandidates")
        .push({ ...event.candidate.toJSON(), userId: userId });
  };

  const answerDescription = await pc.createAnswer();
  await pc.setLocalDescription(answerDescription);

  const answer = {
    type: answerDescription.type,
    sdp: answerDescription.sdp,
    userId: userId,
  };

  await participantRef1.child("answers").push().set({ answer });
};

That's it, now you can create a simple UI component and start realtime chat with audio, video and screen share.

Scroll to specific element in react using useRef

Tejendra Singh Rajawat — Wed, 17 Aug 2022 04:26:24 +0000

I have a firebase group chat ui and it have a search functionality in it. but when i click on search result then i want to go to that specific element (list element in my case). for that example i am using react hooks called useRef which take current element and we can get get it anywhere in our code .

import React, { useRef } from 'react'
const scrollToRef = (ref) => window.scrollTo(0, ref.current.offsetTop) 
// General scroll to element function 
const ScrollDemo = () => { const myRef = useRef(null) 
const executeScroll = () => scrollToRef(myRef)
return ( <> 
<div ref={myRef}>I wanna be seen</div> 
<button onClick={executeScroll}> Click to scroll </button>
 </> )}

here, now when i click on button then it will look for div with myRef and our view scroll to that div.
for reference in my code i have given github link -
github

Beginner guide to websocket

Tejendra Singh Rajawat — Wed, 17 Aug 2022 04:17:20 +0000

Q. What is websocket ?
A. websocket provides a way to exchange data between browser and server via a persistent connection. The data can be passed in both directions as “packets”, without breaking the connection and the need of additional HTTP-requests.

Q. where can we use websocket ?
A. we use websocket where we need realtime data sharing i.e. online trading platform, games and social media platforms.

Frontend Example -
To open a websocket connection we need to create new protocol.

let socket = new WebSocket("ws://localhost:3000");

Once the socket is created, we should listen to events on it. There are totally 4 events:

open – connection established,
message – data received,
error – websocket error,
close – connection closed.

let socket = new WebSocket("ws://localhost.com");

socket.onopen = function(e) {
  alert("[open] Connection established");
  alert("Sending to server");
  socket.send("My name is tejendra");
};

socket.onmessage = function(event) {
  alert(`[message] Data received from server: ${event.data}`);
};

socket.onclose = function(event) {
  if (event.wasClean) {
    alert(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
  } else {
    alert('[close] Connection died');
  }
};

socket.onerror = function(error) {
  alert(`[error] ${error.message}`);
};

We need to have server database for above demo too, so we can connect to server.
So you’ll see events open → message → close. and if there is error then onerror in end.

When new WebSocket(url) is created, it starts connecting immediately.

During the connection, the browser (using headers) asks the server: “Do you support Websocket?” And if the server replies “yes”, then the talk continues in WebSocket protocol.

If you want to use it in frontend so the best way to use is socket.io which works on both client and server side .

There are some methods to use in socket.io

//connect to server
const socket = io("http://localhost.com");

//on() - listen to custom event or default event. (receive)
socket.on('connect', console.log('connect to server'))

//emit() - sent custom or default event to server. (send)
socket.emit('costum-event', 10, 'Hi', 'send')

important - both server and client have same event name to work.

But how to send data from server ?
For that we need to use same methods in server side too.

//broadcast.emit() - send custom or default event to everyone except the sender.
socket.broadcast.emit('costum-event', 10, 'Hi', 'send')

//to(room) - send message to a specific room or group
socket.to("some room").emit("some event");

CRUD operation in Firebase V9

Tejendra Singh Rajawat — Wed, 06 Apr 2022 04:22:14 +0000

Today, we will talk about firebase v9 and how to integrate it in a React.js project. So first of all let's see what are we doing today-

What is firebase ?
Create react.js project with firebase.
Config firebase v9.
Write Operation.
Read Operation.
Update Operation.
Delete Operation.

1. What is firebase -
Firebase is a platform by Google which provide cloud, database and many other services for mobile and web applications. It provides Realtime Database and API that synchronizes application data. For starting you can use it for free but after some time if you want to use it for high scale then you can pay on demand. you can also use third party hosting and domain in firebase.

2. Create react.js project with firebase -
We are creating a todo react project and we will use firebase for our backend data, so we can create, read, update and delete our todos in realtime.
So, first of all let's create a react project.

npx create-react-app todos

When you run this command in cmd, when it complete building then you will see a folder called todos. open this folder in any code editor you want.

Now we want to install firebase using below command and when it completed , you can find firebase version in package.json file.

npm i firebase

Now let's go to firebase website and quickly create a account, click on console, click on web and give the details like project name.

Now when you click on web icon <> , you will get screen like below, just copy this config details we want these details in our react app.

3. Config firebase v9 -
Now our next task is integrate our firebase code in our react app. for that create a files named firebaseInit.js (optional name) under src folder and copy above code there.

_and we are done, now we can use firebase in our react app as we need. _

4. Write Operation -
Let's dive into CRUD operation now. To use database in react first we need to import firestore in our app.

now we can use db in any component and perform CRUD operation. let's try to Write data in firestore.

Now if you click on button , then it will addDoc in a collection name "todo" (if it doesn't exist then firebase will make it) with fields describe in line 14,15

5. Read Operation -
Now we can send data to firebase , but what about to read it. Meaning there are no sense of a todo if we can't see all todos on screen. then let's create a read component too.

Here, we use useEffect so whenever this component runs it fetches all the data from firestore database. and this is our results

6. Update Operation -
Now i realized that there are no unicorns in park and i want to change it to theme park, so what are the options? i can use update operation so that i can do it. For simplicity ,we will create update method with read component.

First we will give a update Button which will open a modal with a form

Now,as you can see we have a handleUpdate function to update form data.

That's it now let's see our results

7. Delete Operation -
Now we need a delete functionality, so that we can delete a todo when it's done .

Here, we have a handleDelete with id to delete todo.

Conclusion

This is the CRUD operation in firebase, if you stuck anywhere then i have provider project link too. you can use and change code as you want . github repo

Create navigation screens in expo project 🧑‍💻

Tejendra Singh Rajawat — Mon, 04 Apr 2022 06:26:51 +0000

Today ,we are creating navigation screens in expo project from scratch. For that let's first of all create a react-native project.

expo init online-store

after running above command click enter , it will choose default options.

Now ,we have our react-native project. now we need to install some more dependencies, which are as follow -

npm install @react-navigation/native @react-navigation/native-stack

expo install react-native-screens react-native-safe-area-context

Now go to app.js and delete existing code, we don't need it. we need below code.

import { StyleSheet, Text, View } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import Homepage from "./Screens/Homepage";
import MenSection from "./Screens/MenSection";
import WomenSection from "./Screens/WomenSection";
import Contactus from "./Screens/Contactus";
const stack = createNativeStackNavigator();
export default function App() {
  return (
    <NavigationContainer>
      <stack.Navigator>
        <stack.Screen
          name="Home"
          component={Homepage}
          options={{ title: "Welcome to online store" }}
        />
        <stack.Screen name="Men" component={MenSection} />
        <stack.Screen name="Women" component={WomenSection} />
        <stack.Screen name="Contact" component={Contactus} />
      </stack.Navigator>
    </NavigationContainer>
  );
}

If you run your project now, you can see homepage on first time. If we want to go to another page then we can use button or any other onClick method here and for that we have prop {navigation} which can help us to redirect to another page.

const Homepage= ({ navigation }) => {
  return (
    <Button
      title="Go to men's section"
      onPress={() =>
        navigation.navigate('Men', { state: 'Id of clothing' })
      }
    />
  );
};
const Men= ({ navigation, route }) => {
  return <Text>This is {route.params.state}'s profile</Text>;
};

Conclusion

That's it for react-native navigation, now you can play it with more as use case and make it more advance as you want.

Create your own portfolio website (My website Demo) 🌿🌿

Tejendra Singh Rajawat — Tue, 29 Mar 2022 05:19:03 +0000

Hi everyone, today I want to share my portfolio website and some ideas to create your own. Official Website

Explaination

As you can see in above website, I used dark and light mode, some buttons to social media accounts, one page for my GitHub projects and one for all blogs I wrote yet. also there is a page to contact me. all the backend functionality are handled by firebase and there is nothing static.

So let's see what are we covering today -

Basics of Html and CSS
JavaScript and React.js
Styles Component
use Context and Redux

1. Basics of html and CSS -
If you want to create any website so first of all you need to have knowledge of html and CSS. Html is used as a skeleton of website and CSS is the design part. They are not difficult to learn but can be complicated to understand.

Best way to learn basics of html and css are from w3schools

2. React.js -
Next part is React.js which is a framework of JavaScript, but why use React.js. well the answer is easy if your website have complex logics which can only be handled by JavaScript then react.js will make your task easy.
To learn react.js , you want to learn JavaScript first. There are some references to learn it.

Firebase (optional)-
In my portfolio, I used react to connect firebase firstore and get database from firebase.

JavaScript -

React.js -

3. Styled Component -
If you familiar to CSS then you know that there are some limitation there like you can't use conditions directly there but in Styled component which is a module , you can use inline css and can use conditions in css. It's optional but still i want you to have a look. styled docs

4. use Context and Redux -
At last but my favorite part is Redux , without going in details if you want to use same value in different component(files) then you can use Redux or use Context in Reactjs. Both will do the job but if your project is large then go for Redux or go for use Context.
I used it to give dark and light mode functionality in my website
Ref - Redux

Conclusion

Well, That's all I used in my website yet and yet trying to improve it furthermore. So I need your valuable feedback.

Array Cheatsheet in JavaScript🚀

Tejendra Singh Rajawat — Mon, 28 Mar 2022 18:56:56 +0000

In any programming language if we have a collection of elements or items, then we will define them as array. they can store data such as string, numbers, object as an collection of element and we can retrieve them whenever and however we want.
I will discuss about what can we do using array in JavaScript. so first of all let's create a array in JavaScript.
There are many ways to create array in JavaScript i.e. -

1. Basic Way

`const animals = ['🙈','🙉','🙊','🐵']`

2. Array Constructor

`const food = new Array('🍇','🍈','🍉','🍊','🍌')`

3. Empty Array

`const emptyArray = []`

Now, we know how to create an array in JavaScript and now let's dive into some methods of Array.

1. indexOf() - we can find an item's index

`const animals = ['🐶','🐱','🦁','🐷']
animals.indexOf('🦁')     //2 `

2. join() - create a string from array items and also can add words between them like 'and','or'.

`const animals = ['🐶','🐱','🦁','🐷']
animals.join('loves')   // '🐶 loves 🐱 loves 🦁 loves 🐷' `

3. slice() - split an array at given index(es)

`const animals = ['🐶','🐱','🦁','🐷']
animals.slice(1);    //['🐱','🦁','🐷']
animals.slice(1,2);   //[ '🐱' ]
console.log(animals)  //[ '🐶', '🐱', '🦁', '🐷' ] `

4. splice() - same as slice and you can also insert new items

`const animals = ['🐶','🐱','🦁','🐷']
animals.splice(1,2, '🍊') )   //[ '🐱', '🦁' ]
console.log(animals)  //[ '🐶', '🍊', '🐷' ]`

_as you can see that slice and splice looks similar but slice don't overwrite or change original array but splice does. _

5. forEach() - loop over an array and access each item

`const animals = ['🐶','🐱','🦁','🐷']
animals.forEach(pet => console.log(pet))`

6. Map() - loop over an array and access each item and return value without mutating original array

`const animals = ['🐶','🐱','🦁','🐷']
animals.map(pet => console.log(`${pet} is cute`))`

As you can see in first glance both forEach and map method are same, but as you can see in map method we are mutating array instead we are creating a new array and using map we can return something.

7. flat()- It flatten an array to a single dimension.

`const animals = ['🐶','🐱','🦁', ['🙊','🙉'],'🐷']`

as you can see we have array under an array , so how do we get a single dimension array.

`console.log(animals.flat()) //['🐶','🐱','🦁','🙊','🙉','🐷']`

8. filter() - create a new array based on a filter.

`const animals = ['🐶','🐱','🦁','🐶']
const dog = animals.filter(dog => dog === '🐶') 
console.log(dog)`

9. reduce() - run a callback on each item and reduce the array to a single value.

`const numbers = [1,6,7,1,3,4]
const total = numbers.reduce((total,currentval) => total + currentval);   //22 `

Ok, so what's happening here is we are taking every number one by one which is our currentval and adding it into our total.

10. findIndex() - finds the index of an item based on a condition

`const animals = ['🐶','🐱','🦁','🙉']
const lionIndex = animals.findIndex(lion => lion === '🦁')
console.log(lionIndex)   //2`

Conclusion

So they are the most used array methods which I use in my code and I hope you will find them useful and we are all learning, I missed a lot of methods here but doing research is a part of the process 🧑‍💻🧑‍💻