Uncategorized

Parcel Basic Setup for JS and React

Published March 27, 2024 | By Matt

Let’s face it, setting up web projects can be a pain. Between finicky build tools and endless configuration files, the word “Webpack” might send a shiver down your spine. But what if I told you that there’s a way to get your projects up and running with almost no setup? Enter Parcel.js, the zero-configuration web application bundler.

What is Parcel.js?

Parcel.js is a super-fast bundler that aims to make web development a breeze. With Parcel, you can focus on building your application and let it handle the nitty-gritty details of asset bundling, code transformations, and setting up a development server. That means no more lengthy webpack configurations!

Setting the Stage

Before we dive in, make sure you have the following prerequisites:

Node.js and npm (or yarn): You can download these from the official Node.js website (https://nodejs.org).

Let’s install Parcel globally to have it ready whenever you start a new project:

Bash

npm install -g parcel-bundler

Your First Vanilla JavaScript App

Project Setup:

Create a new project folder:
Bash
mkdir my-parcel-project
cd my-parcel-project

Initialize your project with npm:
Bash
npm init -y

Create the following files:
- - index.html
  - index.js
- styles.css

Basic Boilerplate:

index.html
HTML
<!DOCTYPE html>
<html>
<head>
<title>My Parcel App</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<div id=”app”></div>
<script src=”index.js”></script>
</body>
</html>

index.js
JavaScript
const appDiv = document.getElementById(‘app’);
appDiv.innerHTML = ‘<h1>Hello from Parcel!</h1>’;

styles.css
CSS
body {
font-family: sans-serif;
margin: 20px;
}

Parcel in Action
Now for the magic! Start Parcel’s development server:
Bash
parcel index.html

Open your web browser and go to http://localhost:1234/. You should see your “Hello from Parcel!” message proudly displayed. Make a change in any of your files, save, and see your browser update instantly – that’s Parcel’s hot reloading!

Section 3: Adding React to the Mix

Installing Dependencies:
Bash
npm install react react-dom

Converting to a React Structure

Create a components folder and add a simple component file (e.g., MyComponent.jsx):
JavaScript
import React from ‘react’;
const MyComponent = () => {
return (
<div>
<h2>Hello from my React component!</h2>
</div>
);
};
export default MyComponent;

Modify index.js:
JavaScript
import React from ‘react’;
import ReactDOM from ‘react-dom/client’;
import MyComponent from ‘./components/MyComponent’;
const root = ReactDOM.createRoot(document.getElementById(‘app’));
root.render(<MyComponent />);

Let Parcel Work Its Magic
No extra configuration is needed. Run your parcel index.html command again, and your React app is ready!

Section 4: Deployment Made Easy (Netlify)

Check out Netlify! It’s a fantastic way to host your projects:

Create a Netlify account: https://netlify.com
Deploy: Link your GitHub repo or drag-and-drop your project files.

Conclusion

Parcel.js simplifies web app development. Give it a try on your next project, especially if you’re looking for a quick setup. Keep exploring – Parcel supports even more like Sass, image optimization, and more!

Create a blog with Netlify CMS and Gatsby

Published March 25, 2024 | By Matt

If you love the speed and developer experience of the Jamstack, this guide’s for you. We’ll combine the intuitive content editing of Netlify CMS with the React-powered framework, Gatsby, to build a blazing-fast blog. If you’re interested in learning more about Netlify’s CMS, click here for our deep dive.

Prerequisites

Basic familiarity with JavaScript, React, and Git
A Node.js installation (https://nodejs.org/)
A GitHub account
A Netlify account

Part 1: Project Setup

Install Gatsby CLI:
Bash
npm install -g gatsby-cli
Use code with caution.
content_copy
Create a Gatsby Project:
Bash
gatsby new my-awesome-blog
cd my-awesome-blog

Install Netlify CMS Dependencies:
Bash
npm install netlify-cms-app gatsby-plugin-netlify-cms

Part 2: Netlify CMS Configuration

Create a Configuration File (config.yml)
Create a file named static/admin/config.yml. Here’s a basic example:
YAML
backend:
name: git-gateway
branch: main
media_folder: static/img
public_folder: /img
collections:
– name: “blog”
label: “Blog Posts”
folder: “src/posts”
create: true
slug: “{{year}}-{{month}}-{{day}}-{{slug}}”
fields:
– { label: “Title”, name: “title”, widget: “string” }
– { label: “Publish Date”, name: “date”, widget: “datetime” }
– { label: “Body”, name: “body”, widget: “markdown” }

Important Notes:

- Customize carefully: Adjust the media_folder, public_folder, collections, and fields to match your desired blog structure.
- More field types: Netlify CMS supports images, lists, and more: (https://www.netlifycms.org/docs/widgets/)

Update gatsby-config.js:
JavaScript
module.exports = {
// … existing config
plugins: [
// … other plugins,
‘gatsby-plugin-netlify-cms’
]
}

Part 3: Creating Blog Post Templates

Create a Template: Create a file like src/templates/blog-post.js:
JavaScript
import React from ‘react’
import { graphql } from ‘gatsby’
const BlogPost = ({ data }) => {
const post = data.markdownRemark
return (
<div>
<h1>{post.frontmatter.title}</h1>
<div dangerouslySetInnerHTML={{ __html: post.html }} />
</div>
)
}
export const query = graphql`
query($slug: String!) {
markdownRemark(fields: { slug: { eq: $slug } }) {
html
frontmatter {
title
date
}
}
}
`

Part 4: Git and Netlify Integration

Initialize Git and Push to GitHub:
Bash
git init
git add .
git commit -m “Initial commit”
# Follow instructions to create a new GitHub repo and push

Deploy to Netlify:

- Connect your GitHub repo to Netlify.
- Set the build command to gatsby build

Part 5: Accessing the CMS and Writing

Access the CMS: Your CMS will be at https://your-site-url.netlify.app/admin/
Authenticate: Log in with your GitHub credentials.
Start Blogging: Click “New Blog Posts” and get writing!

JavaScript DOM Methods and Properties

Published March 25, 2024 | By Matt

Have you ever wondered how web pages go from static blocks of text to the interactive experiences we use every day? Think about buttons that change things, menus that appear when you hover over them, or forms that magically validate your input. The secret lies in the Document Object Model (DOM) and JavaScript’s ability to manipulate it.

The DOM Made Simple

Imagine your HTML page as a family tree. Each HTML tag is like a member of that family. At the top, you have the <html> element as the grandparent, then elements like <head> and <body> as its children, and so on. The DOM is this tree-like representation that JavaScript can interact with.

Why It Matters

Understanding the DOM is the foundation for adding any kind of dynamic behavior to your web pages. Without it, websites would be pretty boring!

DOM Properties – Your Access Points

Think of DOM properties as the way you describe different elements in that HTML family tree.

Key Node Properties
- nodeType: Tells you if you’re dealing with an element, text, or something else.
- nodeName: The tag name of an element (like “DIV,” “P,” “IMG”).
- nodeValue: The actual text content within a text node.
Document Properties
- document.body: Represents the entire <body> section of your page.
- document.title: Contains the text within the <title> tag.

Example: Changing the Page Title

JavaScript

document.title = “My New Awesome Title!”;

DOM Methods – Your Power Tools

If properties are for describing elements, methods are the actions you can take on them.

The Art of Selection
- getElementById(‘my-button’): Grabs a single element with the specified ID.
- getElementsByTagName(‘p’): Returns a collection of all paragraph elements.
- querySelectorAll(‘.special-image’): The most flexible, uses CSS-like selectors.
Transformation
- createElement(): Lets you build new HTML elements from scratch.
- appendChild(): Adds a new element as a child of another.
- removeChild(): Removes an element from the page.
Style and Content
- element.textContent: Gets or sets the plain text inside an element.
- element.innerHTML: Gets or sets the full HTML content within an element.
- element.style.color = ‘blue’: Changes CSS styles directly.

It’s Alive! Events and the DOM

The DOM lets you react to user actions:

Brief Intro to Events: Clicks, hovers, form submissions—these are all events.
Example: A Revealing Button

JavaScript

const button = document.getElementById(‘secret-button’);

button.addEventListener(‘click’, function() {

const hiddenMessage = document.getElementById(‘secret-message’);

hiddenMessage.style.display = ‘block’;

});

Leveling Up

There’s Always More: This is a foundational guide – explore resources like MDN Web Docs to dive deeper.
Frameworks and Libraries: React, Vue.js, and others streamline DOM manipulation for large projects.

Conclusion

Now that you have a grasp of the DOM, you’re ready to start making your websites interactive. Start small, experiment, and have fun!

React Router Navigation and Redirects

Published March 24, 2024 | By Matt

Building Dynamic Navigation in React with React Router

Building dynamic React applications often requires controlling how users move between different sections of your website. React Router is a powerful library that simplifies routing, but it also provides tools for programmatic navigation (using useNavigate) and automatic redirects (using <Navigate>). In this post, we’ll explore both concepts and see how they work in practice, especially with the latest version of React Router (v6).

🚀 React Router Navigation

Click here to deploy, manage, and scale cloud applications EASY with $200 credit

What is `useNavigate`?

The useNavigate function in React Router lets you change the current URL and trigger navigation within your React app programmatically, even from event handlers or effects.

Basic Usage

import { useNavigate } from 'react-router-dom';

function MyComponent() {
  const navigate = useNavigate();

  const handleButtonClick = () => {
    navigate('/profile', { replace: true }); // Redirect to "/profile" and replace history
  };

  return (
    <button onClick={handleButtonClick}>Go to Profile</button>
  );
}

Common Use Cases

✅ Form Submissions: Redirect users to a success page after submitting a form. ✅ Data Fetching: Navigate to a details page after loading data. ✅ Event Handling: Trigger navigation after a button click.

Options

replace: true → Replaces the current history entry instead of adding a new one (prevents back button navigation to the previous form page).

🔀 React Router Redirects

Redirecting in React Router v6

Redirects automatically send users to another route based on conditions.

React Router v5 (Older Method)

import { Redirect } from 'react-router-dom';

<Route path="/old-page">
  <Redirect to="/new-page" />
</Route>

React Router v6 (Updated Method)

✅ Using <Navigate> (for in-component redirects)

import { Navigate } from 'react-router-dom';

function HomePage() {
  const isLoggedIn = false; // Example condition
  if (!isLoggedIn) {
    return <Navigate to="/login" replace />; // Redirects to login page
  }
  return <h1>Welcome to Home</h1>;
}

✅ Using useNavigate Hook (for redirects outside components or complex logic)

import { useNavigate } from 'react-router-dom';
import { useEffect } from 'react';

function Dashboard() {
  const navigate = useNavigate();
  useEffect(() => {
    if (!localStorage.getItem("user")) {
      navigate('/login'); // Redirect if user is not logged in
    }
  }, []);
  return <h1>Dashboard</h1>;
}

🔥 Advanced React Router Techniques

1️⃣ Form Submissions with Feedback

This example shows how to redirect after submitting a form while handling errors:

import { useNavigate } from 'react-router-dom';
import { useState } from 'react';

function OrderForm() {
  const navigate = useNavigate();
  const [submissionStatus, setSubmissionStatus] = useState(null);

  const handleSubmit = async (formData) => {
    try {
      await fetch('/api/orders', {
        method: 'POST',
        body: JSON.stringify(formData)
      });
      setSubmissionStatus('success');
      navigate('/order-success', { state: { formData } });
    } catch (error) {
      setSubmissionStatus('error');
    }
  };
}

2️⃣ Data Fetching with Loading States

If data fetching fails, redirect to a “Not Found” page:

import { useNavigate, useParams } from 'react-router-dom';
import { useEffect, useState } from 'react';

function ProductPage() {
  const { productId } = useParams();
  const navigate = useNavigate();
  const [product, setProduct] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch(`/api/products/${productId}`);
      const data = await response.json();
      setProduct(data);
      setIsLoading(false);
    }
    fetchData();
  }, [productId]);

  if (isLoading) return <div>Loading...</div>;
  if (!product) return <Navigate to="/not-found" />;
}

🛠️ Troubleshooting Common Issues

✅ Common Redirect Problems & Fixes

Problem	Solution
Infinite Redirect Loop	Ensure redirect condition eventually resolves (e.g., `isLoggedIn` state changes)
Losing Query Parameters	Use `useLocation()` to capture and append existing parameters
Navigating without Page Refresh	Ensure navigation is inside a React component using `useNavigate()`
Back Button Issues	Use `{ replace: true }` to prevent users from going back to a previous form page
Redirect Flash Before Data Loads	Implement a loading state (`useState`) before triggering a redirect

🏆 Key Points

✅ Use useNavigate() for programmatic navigation. ✅ Use <Navigate> inside JSX for conditional redirects. ✅ Prevent infinite loops by properly structuring conditions. ✅ Preserve query parameters with useLocation(). ✅ Implement loading states to prevent redirect flashes.

🚀 Next Steps: Try these techniques in your projects and refine your navigation experience!

How to Save Data with Local Storage in React

Published March 24, 2024 | By Matt

Getting Started with Local Storage in React

While React doesn’t have a dedicated hook for Local Storage, interacting with it is surprisingly straightforward. Let’s start with the essential methods:

JavaScript

// Saving Data

localStorage.setItem(‘key’, ‘value’); // Stores a string

// Retrieving Data

const value = localStorage.getItem(‘key’);

// Removing Data

localStorage.removeItem(‘key’);

Important Considerations:

Strings Only: Local Storage only accepts strings. If you need to store objects or arrays, convert them to JSON strings using JSON.stringify() before storing and JSON.parse() after retrieving.
Storage Limits: Local Storage has a finite capacity, typically around 5MB per domain. Avoid storing excessive amounts of data.
Browser Compatibility: Fortunately, Local Storage enjoys widespread support in modern browsers.

How to Save Data with Local Storage in React

Deploy your first React app effortlessly and get $200 credit

The core of persisting data in your React applications lies in mastering the localStorage.setItem() method. It’s your gateway to storing information that survives page refreshes and browser restarts.

The Essential Steps:

Choose Your Key: Every piece of data in Local Storage is associated with a unique key (a string). This key acts like a label, allowing you to retrieve your data later.
Prepare Your Data: Local Storage only accepts strings. If you’re dealing with objects or arrays, convert them to JSON format using JSON.stringify().
Save to Local Storage: Use localStorage.setItem(key, value) to store your data. Remember to pass your chosen key and the stringified value.

Example: Saving User Preferences

JavaScript

const userPreferences = {

theme: ‘dark‘,

language: ‘en‘,

};

localStorage.setItem(‘userPreferences’, JSON.stringify(userPreferences));

React-Specific Tips:

useEffect Hook: In React, the useEffect hook is ideal for saving data to Local Storage. This hook allows you to trigger an action (like saving data) whenever a component’s state or props change.
State Management: In the context of React components, you’ll typically store your data in state variables. When these state variables update, you can use useEffect to synchronize them with Local Storage.

A Word of Caution:

Storage Limits: Local Storage has a finite capacity, usually around 5MB. Be mindful of this limit, especially if you’re dealing with larger datasets.
Security: Never store sensitive data (passwords, personal information) in Local Storage as it’s not inherently secure.

Building a Note-Taking App with Persistent Storage

Let’s bring Local Storage to life by building a simple yet functional note-taking app in React. We’ll utilize functional components and hooks to keep things clean and concise.

JavaScript

import React, { useState, useEffect } from ‘react’;

function App() {

const [notes, setNotes] = useState([]);

useEffect(() => {

const storedNotes = JSON.parse(localStorage.getItem(‘notes’));

if (storedNotes) {

setNotes(storedNotes);

}

}, []); // Run only once on initial render

useEffect(() => {

localStorage.setItem(‘notes’, JSON.stringify(notes));

}, [notes]); // Run whenever the ‘notes’ state changes

// … (Your code for adding, deleting, and displaying notes)

}

Let’s break down this example:

We use the useState hook to manage our notes data.
The first useEffect hook loads notes from Local Storage when the component first mounts.
The second useEffect hook automatically saves notes back to Local Storage whenever the notes state changes.

Why Choose Local Storage?

New to React? Host your projects easily and get $200 credit

Local Storage is like a small, persistent data vault built into your browser. Unlike session storage, which gets wiped clean when you close the tab or window, Local Storage lets you save key-value pairs that remain available even after you shut down your browser.

So, when should you reach for Local Storage? Here are a few ideal scenarios:

Preserving User Preferences: Remember your user’s preferred theme (dark mode, anyone?), language settings, or other UI customizations.
Managing Application State: Keep track of items in a shopping cart, progress in a game, or the current step in a multi-part form.
Caching Data: Store temporary copies of API responses to speed up loading times and reduce server requests.

Beyond the Basics: Advanced Local Storage Techniques

Click Here For My Favorite Online Programming Course To Improve React Skills

Ready to level up your Local Storage game? Here’s what you can explore:

Error Handling: Learn how to gracefully handle situations like exceeding the storage quota.
Advanced Use Cases: Discover how to leverage Local Storage for caching, offline capabilities, and complex user settings management.
Security Best Practices: Protect your data by avoiding storing sensitive information and mitigating cross-site scripting (XSS) vulnerabilities.

Elevate Your Note-Taking App

Enhance your note-taking app with these additional features:

Editing Notes: Empower users to modify their existing notes.
Search and Filter: Implement search functionality and filters to make finding specific notes a breeze.
Timestamps: Add creation and modification dates to keep track of note history.

How to Handle Inputs and Forms in React

Published March 24, 2024 | By Matt

Forms are the gateways to user interaction on the web. Whether it’s a simple contact form, a complex survey, or a login page, React forms are how you gather valuable information from your users. React’s approach to form management might seem a little different at first, but it offers exceptional control and flexibility. This guide will walk you through building robust, user-friendly forms in your React applications.

Prerequisites:

Basic understanding of React components and state management.
Familiarity with HTML form elements (<form>, <input>, <textarea>, etc.)

Controlled Components: The Heart of React Forms

In React, we use the concept of “controlled components” to manage form data. A controlled component is a form element whose value is directly managed by React’s state. Here’s how it works:

State Connection: We store the form data within our component’s state.
Input Value Binding: The input fields’ value attribute is linked to the corresponding state variable.
Change Handlers: onChange event handlers update the state whenever the user changes input values.

Example: Creating a Simple Contact Form

JavaScript

import React, { useState } from 'react';

function ContactForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault(); // Prevent page reload
    console.log('Form data:', { name, email }); // Do something with form data
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="name">Name:</label>
      <input type="text" id="name" value={name} onChange={(e) => setName(e.target.value)} />

      <label htmlFor="email">Email:</label>
      <input type="email" id="email"  value={email} onChange={(e) => setEmail(e.target.value)} />

      <button type="submit">Submit</button>
    </form>
  );
}

export default ContactForm;

Explanation:

We use useState to manage the name and email state values.
Input fields are bound to their state values and updated using onChange handlers.
onSubmit handles form submission; you’d typically send the form data to a server here.

Form Validation

Ensuring that users enter valid data is crucial. Here’s how to add client-side validation to our form:

JavaScript

  // ... other code ...

  const [errors, setErrors] = useState({}); // State to store validation errors

  const validateForm = () => {
    const newErrors = {};
    if (!name) { newErrors.name = 'Name is required'; }
    // ... Add more validations ...
    setErrors(newErrors);
  };

  const handleSubmit = (event) => {
    // ... (existing code) ...
    validateForm(); 
    if (Object.keys(errors).length === 0) {
       // Submit the form if no errors
    }  
  };

  // ... (rest of the code) ...

Display error messages inline with respective form fields.

Beyond the Basics

Handling Multi-Step Forms: Strategies for breaking down complex forms.
Dynamic Forms: Techniques for adding/removing fields based on user actions.
Third-Party Libraries: Discuss Formik, React Hook Form for advanced scenarios.

Conclusion

Forms are a cornerstone of web development, and React offers a powerful way to build and manage them. I hope this guide has equipped you to create robust, user-friendly forms in your React projects!

How to Set up a Gatsby JS Project

Published March 23, 2024 | By Matt

Understanding Gatsby.js: Why Use It?

Static Site Generator: Gatsby transforms your React code into a static HTML, CSS, and JavaScript file collection.
Performance: Static sites generated by Gatsby deliver lightning-fast load speeds and enhanced user experiences.
SEO-Friendly: Pre-rendered HTML makes your content easily discoverable by search engines.
Ideal for Blogs: Gatsby’s strengths and the included ‘blog starter’ make it a popular choice for building blogs and similar content-driven websites.

Prerequisites

Node.js (version 18 or newer): Download and install from https://nodejs.org/
npm or yarn (package managers): These are installed along with Node.js.

Installation

Global Gatsby CLI:
Bash
npm install -g gatsby-cli
Use code with caution.
content_copy
Or, if you prefer yarn:
Bash
yarn global add gatsby-cli
Use code with caution.
content_copy

Creating Your Gatsby Project

Using the Default Starter:
Bash
gatsby new my-awesome-project
Use code with caution.
content_copy
Using the Blog Starter:
Bash
gatsby new my-blog https://www.gatsbyjs.org/starters/gatsbyjs/gatsby-starter-blog/
Use code with caution.
content_copy

Project Structure

content/blog: Houses your blog posts in Markdown format.
src: Contains React components, pages, templates, and utility functions.
- components: Reusable React components.
- pages: Components here become individual pages on your site.
- templates: Reusable layouts for pages (like blog post templates).
gatsby-config.js: Site metadata, plugin configuration.
gatsby-node.js: Dynamic page creation, GraphQL node customization.
gatsby-browser.js: Client-side JavaScript for browser customization.

Running the Development Server

Navigate into your project directory:
Bash
cd my-blog
Use code with caution.
content_copy
Start the development server:
Bash
gatsby develop
Use code with caution.
content_copy
Your site will be accessible at http://localhost:8000

Key Concepts and Customization

GraphQL: Gatsby uses GraphQL to fetch data from various sources (e.g., Markdown files, CMSs).
Plugins: Extend Gatsby’s functionality with plugins for image optimization, data sourcing, SEO, and more. Find them on the Gatsby Plugin Library: https://www.gatsbyjs.com/plugins/
Styling: Gatsby supports various styling methods (CSS Modules, styled-components, etc.).

Wrapping Up

Gatsby offers a powerful, streamlined approach to building blazing-fast, SEO-optimized React websites. Its pre-rendering, rich plugin ecosystem and starter templates make it an excellent choice for developers seeking a performant and developer-friendly solution.

How to Set up React in a HTML File

Published March 23, 2024 | By Matt

Most React projects rely on complex build tools. But did you know you can set up simple React components directly within an HTML file? This approach is ideal for rapid prototyping or adding interactive elements to existing pages.

Step 1: Include the Libraries

Click here for the simplest cloud platform. Get started with a $200 credit.

Add the following CDN scripts inside the <head> of your HTML file:

HTML

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

Quick Explanation: (Provide a sentence or two about what each library does – React, ReactDOM, Babel.)

Step 2: Prepare Your HTML

Create a div to hold your React app:

HTML

<body>
  <div id="root"></div>
</body>

Step 3: Write React Code (with Babel)

Click here for expert-led courses for sharpening coding skills…free trial…

Embed this inside <script type="text/babel"> tags:

JavaScript

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>React Setup</h1>
      </div>
    );
  }
}

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

Step 4: Production Mode

Important: Replace the development CDN links with production-ready versions.

How to Build a Simple React Stopwatch Timer

Published March 23, 2024 | By Matt

Project Setup

Prerequisites: Ensure you have Node.js and npm (or yarn) installed on your system.

Create React App:

Bash

npx create-react-app my-stopwatch-app
cd my-stopwatch-app

Component Structure

Create a Component: Inside your src folder, create a file named Stopwatch.jsx. This will contain the logic and structure of your stopwatch.

Basic Stopwatch Implementation

JavaScript

import React, { useState, useEffect, useRef } from 'react';

function Stopwatch() {
  const [timer, setTimer] = useState(0);
  const [isRunning, setIsRunning] = useState(false);
  const intervalRef = useRef(null);

  useEffect(() => {
    if (isRunning) {
      intervalRef.current = setInterval(() => {
        setTimer((prevTimer) => prevTimer + 10);
      }, 10);
    } else if (!isRunning) {
      clearInterval(intervalRef.current);
    }

    return () => clearInterval(intervalRef.current);
  }, [isRunning]);

  const startTimer = () => {
    setIsRunning(true);
  };

  const stopTimer = () => {
    setIsRunning(false);
  };

  const resetTimer = () => {
    setTimer(0);
  };

  const formatTime = (timer) => {
    const getSeconds = `0${(timer / 1000) % 60}`.slice(-2);
    const minutes = `${Math.floor(timer / 60000)}`.padStart(2, '0');
    const milliseconds = `0${(timer % 1000)}`.slice(-3);

    return `${minutes} : ${getSeconds} : ${milliseconds}`;
  };

  return (
    <div className="stopwatch">
      <h2>Stopwatch</h2>
      <div className="stopwatch-display">
        {formatTime(timer)}
      </div>
      <div className="stopwatch-buttons">
        <button onClick={startTimer}>Start</button>
        <button onClick={stopTimer}>Stop</button>
        <button onClick={resetTimer}>Reset</button>
      </div>
    </div>
  );
}

export default Stopwatch;

Explanation

State:
- timer: Stores the elapsed time in milliseconds.
- isRunning: Indicates if the stopwatch is running.
useRef:
- intervalRef stores the interval ID, allowing us to clear the interval when needed.
useEffect:
- Manages the interval for updating the timer when isRunning changes.
- The cleanup function clears the interval when the component unmounts or isRunning becomes false.
Functions:
- startTimer: Sets isRunning to true to start the timer.
- stopTimer: Sets isRunning to false to stop the timer.
- resetTimer: Resets the timer state to 0.
formatTime: Helper function to format the time display.

Rendering the Stopwatch

In your main App.js file:

JavaScript

import React from 'react';
import Stopwatch from './Stopwatch';

function App() {
  return (
    <div className="App">
      <Stopwatch />
    </div>
  );
}

export default App;

Styling

Add some CSS in a Stopwatch.css file (and import it into your Stopwatch.jsx):

CSS

/* Stopwatch.css */
.stopwatch { /* ... */ }
.stopwatch-display { /* ... */ }
.stopwatch-buttons { /* ... */ }

Start the App:

Bash

npm start

How to deploy mern app to heroku

Published March 22, 2024 | By Matt

Heroku is a powerful cloud platform that makes deploying and managing web applications remarkably easy. Its seamless support for Node.js, along with its free tier for basic apps, makes Heroku a popular choice for deploying MERN stack applications. In this guide, we’ll walk you through the steps of deploying your MERN app to Heroku.

Prerequisites

Before you begin, ensure you have the following:

A free Heroku account (https://signup.heroku.com/)
The Heroku CLI installed (https://devcenter.heroku.com/articles/heroku-cli)
A ready-to-deploy MERN application (both backend and frontend code).
Git is installed, and your project is under Git version control.

Steps for Deployment

1. Prepare Your Backend for Deployment

Production Build (React): In your React project’s directory (usually client), create an optimized production build using:
Bash
npm run build
Use code with caution.
content_copy
Server Configuration: Verify that your Express server is set up to serve the static files created by your React build. Here’s a common way to do this:
JavaScript
// In your server’s index.js or main server file
const path = require(‘path’);
app.use(express.static(path.join(__dirname, ‘client’, ‘build’)));
// … other server code
Start Script: Add a “start” script in your backend’s package.json to tell Heroku how to launch your server (e.g., “start”: “node index.js”)

2. Create a Heroku App

Login: Open a terminal and log in to your Heroku account:
Bash
heroku login
Create App: Give your app a unique name:
Bash
heroku create <your-unique-app-name>

3. Database Setup (If Needed)

MongoDB: If your app uses MongoDB, add a database instance. Heroku offers add-ons like MongoDB Atlas (which usually has a free tier). Follow the instructions for the chosen add-on to provision your database.
Environment Variables: Set your MongoDB connection string in Heroku’s app settings under “Config Vars.”

4. Git Deployment

Initialize Git (if needed): Use git init within your project’s root directory.
Add Heroku Remote:
Bash
heroku git:remote -a <your-unique-app-name>
Push Code:
Bash
git add .
git commit -m “Ready for Heroku deployment”
git push heroku master

Testing and Troubleshooting

Open Your App: Visit https://your-unique-app-name.herokuapp.com to see your deployed MERN application.
Check Logs: Use the Heroku CLI command heroku logs to debug any issues during the deployment process.

Uncategorized

Building Dynamic Navigation in React with React Router

🚀 React Router Navigation

What is useNavigate?

Basic Usage

Common Use Cases

Options

🔀 React Router Redirects

Redirecting in React Router v6

React Router v5 (Older Method)

React Router v6 (Updated Method)

🔥 Advanced React Router Techniques

1️⃣ Form Submissions with Feedback

2️⃣ Data Fetching with Loading States

🛠️ Troubleshooting Common Issues

✅ Common Redirect Problems & Fixes

🏆 Key Points

Getting Started with Local Storage in React

(adsbygoogle = window.adsbygoogle || []).push({});

How to Save Data with Local Storage in React

Building a Note-Taking App with Persistent Storage

Why Choose Local Storage?

Beyond the Basics: Advanced Local Storage Techniques

Elevate Your Note-Taking App

(adsbygoogle = window.adsbygoogle || []).push({});

Wrapping Up

What is `useNavigate`?