DEV Community: Shruti Kapoor

Top 5 in Frontend and AI this week - AI Is Making Us Dumber + useEffect gets banned

Shruti Kapoor — Fri, 20 Mar 2026 22:28:37 +0000

This week's top 5 posts in Frontend and AI that you need to know -

1️⃣ What's happening in Modern CSS? by Daniel Schwarz. CSS now has randomness, anchor positioning, and clip-path tricks that replace entire JavaScript libraries.

2️⃣ NEW TanStack Hotkeys Library by Web Dev Simplified - Add keyboard shortcuts with zero boilerplate, cross-platform modifier keys, and smart scoping built in.

3️⃣ The Hidden Cost of AI Code We Are All Dealing With by Addy Osmani - AI writes code faster than we can review it, and your team's understanding of the codebase quietly shrinks with every merge.

4️⃣ Why we rolled our own React Server Components framework by Josh Wilson - The Aha! team built their own RSC framework in under 1,000 lines and cut time-to-interactive by over 80%.

5️⃣ Why we banned React's useEffect by Alvin Sng - Most useEffect usage compensates for things React already handles better, and AI agents are making it worse by adding it "just in case."

Read the full post here - https://shrutikapoor.substack.com/p/top-5-in-frontend-and-ai-this-week

React 2025 Full Course – Build a Netflix Clone with Tailwind, TanStack Router, TanStack Query & Zustand

Shruti Kapoor — Fri, 03 Oct 2025 04:22:36 +0000

GPT-5 - Hype or Legit Amazing? Front End Developer's honest review

Shruti Kapoor — Tue, 12 Aug 2025 07:27:33 +0000

New day, New model. GPT-5 is announced, but here's the real question - Does GPT‑5 feel like a genuine leap forward for developers, or is the excitement overblown?

In this video, I evaluate GPT‑5 specifically within React and JavaScript development workflows, testing how it performs on real-world coding tasks rather than theoretical benchmarks.

What is covered in this video -

Real coding scenarios with React and JS, showing whether GPT-5 generates clean, maintainable code.
Comparisons against previous models (e.g., GPT-4o or other GPT versions), especially in frontend tasks.
Observations on accuracy, style, and developer usability—does GPT-5 just “work,” or is it still messy or off-target?
A verdict on whether GPT-5 is a practical upgrade for frontend developers, or if the excitement is mostly hype.

AI 101 for Frontend Devs: LLMs, Transformers, RAG Explained Simply

Shruti Kapoor — Mon, 21 Jul 2025 08:41:00 +0000

Lately, AI has become a huge HYPE. But most of the terms floating around feel confusing or too technical.

LLMs.
Foundation models.
RAG.
Transformers.
MCP
RLHF

I kept seeing these everywhere and felt like I should understand them, but didn’t. So I took time to actually learn how it all works, and then made a short video explaining everything in plain English with clear visuals, hoping it helps both a tech person and a non-tech person

Watch this video to see these explanations in detail

Here's a quick summary -

1. The Layers of the AI Ecosystem

1.1 Hardware:

At the foundation, companies like Nvidia, AMD, Intel, and Huawei manufacture the physical processors that power AI computation. These chips are the "brain cells" of AI, enabling models to run, train, and perform tasks.

1.2 Cloud Providers:

Since hardware is expensive, cloud providers such as AWS, Google Cloud, Alibaba, and Microsoft Azure rent out these chips, offering computational resources to others. Think of them as factories providing the necessary tools for building products.

1.3 Model Builders:

On top of cloud providers, companies like OpenAI, Anthropic, Hugging Face, Meta, and Google use this computational power to create models—the "brains" of AI systems.

1.4 Applications:

These models power applications like ChatGPT, Claude, Midjourney, Canva AI, and more, which are the tools users interact with directly.

Developers work on foundational models.
Users interact with applications.

Here's the terms in short -

2.1 AI

Artificial Intelligence (AI) is a field of computer science focused on making systems that can perform as well as human intelligence. The goal is to create systems that can think, recognize patterns, make predictions, and understand language like humans.

The term "artificial intelligence" was coined in 1956.
Alan Turing's 1950 paper introduced the "imitation game", now called the Turing test, to see if machines can match human intelligence.

2.2 Machine Learning

Machine learning (ML) is a type of AI where machines learn from data.

Instead of explicit instructions, machines find patterns and make predictions.

Example:

If you provide the sequence 2, 4, 6, 8, 10, the model learns the pattern and predicts 12 as the next number.

Real-world ML examples:

Netflix recommending movies
Email clients learning to filter spam

2.3 Neural Networks

Neural networks are popular ML approaches that mimic brain cells.

They consist of layers of "neurons" making yes/no decisions together.

Example:

For image recognition (cat vs dog):

Input layer: receives the image data
Hidden layers: process features like fur, legs, facial features, whiskers
Output layer: predicts, e.g., 85% cat, 15% dog

2.4 Deep Learning:

Deep Learning is a kind of machine learning that uses many layers of neural networks.

The more hidden layers there are, the “deeper” the network.
Deep learning is behind modern speech recognition, image recognition, and natural language processing systems.

3. AI Terms Simplified

3.1 Model

A model is the “brain” of an AI system. It’s a core unit trained on data to make predictions, generate content, or solve specific tasks. For example, GPT-4 is a model trained on massive amounts of text, capable of understanding and generating human language.

Models are built by companies like OpenAI, Anthropic, Hugging Face, Meta, and Google.
Think of a model as a trained dog that performs certain tasks.

3.2 Foundational Models

Foundational models are powerful models trained on enormous datasets—trillions of words, books, and texts. Their strength lies in adaptability: many applications can be built on top of them, either by using them as they are or by fine-tuning for specialized tasks (like medical or customer service applications).

Examples: GPT-4 (OpenAI), Claude (Anthropic)
Analogy: A foundational model is like a guide dog trained with numerous tricks, ready for many situations.

3.3 Large Language Models (LLM)

An LLM is a type of model trained specifically on vast text data, excelling at understanding and generating human language.

Capabilities: predicting the next word, generating scripts, summarizing text, answering questions.
Analogy: An LLM is like a dog that understands and responds to commands in multiple human languages.
Example: ChatGPT is a popular LLM.

3.4 Generative AI

Generative AI refers to models that can create entirely new content—text, images, music—based on input prompts.

Example: Given a prompt like “a woman eating cake while riding a camel on a mountaintop,” generative AI can produce a unique image that never existed before.
Generative models are not limited to analyzing data; they create new ideas, code, text, and media.

3.5 Transformer

A transformer is the architecture that powers modern language models.

It enables models to understand not just individual words, but the context of entire sentences using “attention.”
Example: In the sentence “The trophy didn’t fit in the suitcase because it was too big,” a transformer helps the AI know “it” refers to the trophy.
First introduced in the paper “Attention Is All You Need” (2017).

3.6 GPT (Generative Pre-trained Transformer)

GPT stands for Generative Pre-trained Transformer, the technology behind models like ChatGPT.

Generative: Can create new content from input.
Pre-trained: Trained on large datasets beforehand.
Transformer: Uses the transformer architecture for context and understanding.

3.7 Prompts

A prompt is the input or question you give to an AI model (especially an LLM).

The quality of the prompt determines the quality of the output.
Prompt engineering is the craft of writing clear, informative prompts to get the best results.

Prompt Types:

Zero-shot: No examples, just the question.
Few-shot: Some examples given to help the model understand context.
Chain of thought: Encourages the model to reason step by step.

CRISPR Method for Prompts:

Context, Role, Intent, Specificity, Parameters, Refinement

3.8 Token

A token is a chunk of text (word or part of a word) that the AI processes.

More tokens in your prompt = higher computational cost.
Example: “A cat and a dog” may be four tokens.

3.9 Hallucinations

Hallucinations happen when an AI model confidently produces incorrect or made-up answers.

Always verify AI-generated information.
Example: Asking an AI for the definition of MCP may yield a wrong answer.

4. Training Approaches

4.1 Supervised Learning

What it is: The AI learns from examples that already have the right answers (labels).
How it works: You show the model lots of data with correct answers, like pictures labeled “cat” or “dog.”
Result: Next time the AI sees a new picture, it can guess if it’s a cat or a dog because it learned from the labeled examples.

4.2 Unsupervised Learning

What it is: The AI is given data without any answers or labels.
How it works: The model looks for patterns and groups in the data all by itself, without anyone telling it what’s right or wrong.
Result: It can find clusters, trends, or common features in the data (like grouping customers by shopping habits).

4.3 Reinforcement Learning from Human Feedback (RLHF)

What it is: The AI learns by getting feedback from humans.
How it works: The model makes a prediction or does a task, and you give it a thumbs up or thumbs down. This feedback helps it improve over time.
Result: The AI gets better at giving useful or correct answers because it learns from the feedback.

4.4 Fine-Tuning

What it is: Making an already trained model smarter for a specific job.
How it works: You take a big, general model (like GPT-4) and train it further on special data, like medical texts or legal documents.
Result: The AI becomes an expert in a particular area without having to start learning from scratch.

5. AI Tools

5.1 RAG (Retrieval Augmented Generation)

What it is: A method to help AI models answer questions more accurately by giving them access to extra information.
How it works: Instead of only relying on what the model was trained on, you let the AI “retrieve” specific data (like from a database or document) when you ask a question.
Result: The AI can use up-to-date or company-specific info to give better, more relevant answers.
Difference from Fine-Tuning: RAG doesn’t train the model on new data—it just gives extra info to look up when responding.

5.2 AI Agents

What they are: Software systems that can act autonomously or semi-autonomously to perform tasks using multiple tools or sources.
Examples:
- A code editor agent that reviews your work and suggests improvements.
- A travel booking agent that creates an itinerary and recommends hotels.
How autonomous? Most agents today help you by gathering information or making recommendations, but don’t fully automate everything. Their independence is expected to grow in the future.

5.3 MCP (Model Context Protocol)

What it is: A standardized way for AI systems and smart devices to communicate with each other.
How it works: Instead of building a custom link for each device or tool, MCP lets different systems talk using agreed-upon rules—making integration easier.
Why it matters: MCP helps developers connect their tools to many AI systems without extra work, speeding up innovation and compatibility.

In the video I also explain:

Machine learning vs deep learning
Neural networks
Prompt engineering
Tokens and how they affect cost
Hallucinations
RLHF (Reinforcement Learning from Human Feedback)
Agents, MCP, and more

You can watch it here:

Connect with Me:
YouTube: https://www.youtube.com/@shrutikapoor08
Keep up in tech with bi-weekly newsletter: https://substack.com/@shrutikapoor
Discord: bit.ly/shruti-discord

What tip would you give to someone who wants to get promoted?

Shruti Kapoor — Thu, 19 Jun 2025 08:02:08 +0000

React Best Practices: State Management

Shruti Kapoor — Fri, 30 May 2025 19:09:45 +0000

We are almost about to hit our goal!

Shruti Kapoor — Tue, 25 Feb 2025 23:08:27 +0000

I CAN'T KEEP CALM BECAUSE WE ABOUT TO REACH OUR GOAL OF 3000 PEOPLE IN THE TRIBE!
WOHOOOOOO 🎉

Join the tribe now - https://youtube.com/shrutikapoor08

I migrated from Create React App to Vite. Here's what I learnt -

Shruti Kapoor — Fri, 21 Feb 2025 22:49:41 +0000

This week, I migrated an old React 15 Create React App (CRA) project from 2017 to Vite. Here’s what I learned along the way.

1. Outdated React Version (React 15)

Vite auto-installs React 19, but my app was still on React 15. I was concerned that I’d need to incrementally upgrade to React 17+ before migrating.

Solution:

Downgrading Vite’s React version to 15 before migration was straightforward. I simply removed node_modules and replaced createRoot with the older ReactDOM.render.

2. Removing Create React App

The first step was to remove CRA. Since my project was using CRA’s built-in Webpack and Babel settings, I ejected the configuration:

npx react-scripts eject

This exposed Webpack and Babel configs, making it easier to transition to Vite.

3. Module Import Errors (`Cannot use import statement outside a module`)

Vite uses ES Modules (ESM), while CRA relied on CommonJS, causing import issues.

Solution:

Added "type": "module" to package.json.
Updated <script src> tags in index.html to include type="module".

4. Dependency Vulnerabilities and Security Issues

Running npm audit revealed 100s of vulnerabilities in dependencies such as postcss and node-fetch.

Solution:

Removed outdated packages.
Ran:

  npm audit fix --force

5. Handling Ejected Configuration Files

Ejecting CRA exposed Webpack and Babel configurations that Vite didn’t need.

Solution:

Deleted those files to prevent conflicts with Vite.

Watch the livestream to see this migration LIVE - https://www.youtube.com/live/fcXwlXEXuwA

I migrated from Create React App to Vite and took these steps

Shruti Kapoor — Fri, 21 Feb 2025 06:53:41 +0000

This week, I migrated an old React 15 Create React App (CRA) project from 2017 to Vite. Here’s what I learned along the way.

1. Outdated React Version (React 15)

Vite auto-installs React 19, but my app was still on React 15. I was concerned that I’d need to incrementally upgrade to React 17+ before migrating.

Solution:

Downgrading Vite’s React version to 15 before migration was straightforward. I simply removed node_modules and replaced createRoot with the older ReactDOM.render.

2. Removing Create React App

The first step was to remove CRA. Since my project was using CRA’s built-in Webpack and Babel settings, I ejected the configuration:

npx react-scripts eject

This exposed Webpack and Babel configs, making it easier to transition to Vite.

3. Module Import Errors (`Cannot use import statement outside a module`)

Vite uses ES Modules (ESM), while CRA relied on CommonJS, causing import issues.

Solution:

Added "type": "module" to package.json.
Updated <script src> tags in index.html to include type="module".

4. Dependency Vulnerabilities and Security Issues

Running npm audit revealed vulnerabilities in dependencies like postcss and node-fetch.

Solution:

Removed outdated packages.
Ran:

  npm audit fix --force

5. Handling Ejected Configuration Files

Ejecting CRA exposed Webpack and Babel configurations that Vite didn’t need.

Solution:

Deleted those files to prevent conflicts with Vite.

Watch the livestream to see this migration LIVE - https://www.youtube.com/live/fcXwlXEXuwA

Create React App is Dead. What does it mean for you?

Shruti Kapoor — Tue, 18 Feb 2025 22:48:34 +0000

This is the end of an era: Create React App is officially deprecated.

It’s been a long time coming. I have preferred Vite for a long time, so much so that I even recorded my React O'Reilly course with Vite instead of CRA.

Why is CRA deprecated?

It hasn’t been actively maintained.
With React 19, it broke things.
No built-in routing, and the default setup lacks key features. It’s slow.
Ejecting has always been a nightmare.

What should you do now?

If you have an app in CRA, migrate it to Vite. Seriously. It's fast, free, and simple. Check out my guide on setting up React with Vite

Alternatives to CRA

If you're looking for options, here are my top picks:
1️⃣ Vite – My go-to for almost everything + with TanStack Router and TanStack Query, it solves most of the problems of vanilla React.
2️⃣ Nx – If you need a monorepo setup.
3️⃣ Next.js, Remix – If you need full-stack capabilities.
4️⃣ Astro – Perfect for marketing/blog sites.

What I’m doing:

✅ I’m sticking with Vite for most of my apps.
✅ For routing, TanStack Router is my pick.
✅ For data fetching, TanStack Query all the way.
✅ When I need SSR or Server Components, I’ll reach for Next.js.

The CRA era is over. What are you switching to? Let me know in the comments.

Shruti’s Substack | Shruti Kapoor | Substack

I share Front End development knowledge through this newsletter, and a picture from my life. Click to read Shruti’s Substack, by Shruti Kapoor, a Substack publication with thousands of subscribers.

shrutikapoor.substack.com

Steps to Dealing with Overcoming Imposter Syndrome in Tech

Shruti Kapoor — Fri, 20 Dec 2024 23:54:40 +0000

If you've ever stared at your code and thought, "I have no idea what I’m doing, and everyone’s going to find out," you’re not alone. That nagging self-doubt has a name: imposter syndrome, and it’s something many developers—beginners to seasoned pros—face at some point in their careers.

What Is Imposter Syndrome?

Imposter syndrome is the persistent belief that your skills or successes aren’t real, and you fear being exposed as a fraud. Symptoms might include:

Believing others know more than you.
Attributing your success to luck or external factors.
Feeling uncomfortable with praise.
Fixating on mistakes, even minor ones.
Thinking you wouldn’t doubt yourself if you were “better.”

Sound familiar? It’s a heavy weight to carry, especially in an industry where learning never stops.

My Experience With Imposter Syndrome

I’ve felt it during daily tasks like debugging code, submitting pull requests, or tackling a new language. Even during moments of growth—like hosting Fireside Chats with amazing developers—I’ve questioned whether I was truly qualified.

Here’s the thing: imposter syndrome doesn’t discriminate. I’ve had mentors and peers, people I look up to, share similar doubts. The first step toward beating it is realizing that you’re not alone.

How to Beat Imposter Syndrome

Overcoming imposter syndrome isn’t about eliminating it entirely; it’s about learning to manage it. Here are strategies that worked for me:

1. Acknowledge the Feeling

When self-doubt strikes, pause and remind yourself: “This is imposter syndrome talking. It doesn’t define my abilities.” Naming the feeling is the first step toward breaking its hold.

2. Reframe Negative Thoughts

When fear tells you “I can’t do this,” respond with, “I don’t know how to do this yet, but I’ll learn.” Viewing challenges as growth opportunities shifts your mindset.

3. Break Down the Cause

Ask yourself:

What’s triggering these feelings?
What’s your fear saying?
Is there any evidence to support it?

This reflective practice helps you uncover the root of your doubts and take actionable steps to move forward.

4. Celebrate Evident Success

Track your wins—big and small. Fixed a tricky bug? Mastered a new tool? Write it down. Build a list of your achievements and testimonials to remind yourself of how far you’ve come.

5. Keep Learning

Feelings of inadequacy often stem from the unknown. Push back by taking action—learn something new, seek out resources, or ask questions.

6. Find Your Support System

Surround yourself with people who uplift you:

A loved one who encourages you.
A mentor who guides you.
A therapist who helps you heal.

Community matters, whether it’s peers at work, online coding groups, or mentors who’ve walked your path.

Your Journey Matters

Imposter syndrome is a sign that you’re stepping out of your comfort zone and growing—a journey worth celebrating. Overcoming it is an ongoing process, but every step forward strengthens your confidence.

Have you dealt with imposter syndrome? Share your story in the comments, or connect with me on Discord, Twitter, or Instagram. Remember, you’re not alone, and you’ve got this.

Keep coding, keep growing. You are stronger than you think!

Connect with Me:

YouTube: https://www.youtube.com/@shrutikapoor08
Discord: bit.ly/shruti-discord
Twitter: @shrutikapoor08
Instagram: @itsshrutikapoor

React 19 Actions - Simplifying form submission and loading states

Shruti Kapoor — Fri, 05 Jul 2024 08:27:29 +0000

React 19 introduces Actions, which are asynchronous functions. Actions are helpful in making form submissions easier. This blog post dives into what Actions are and how to use them.

In this blog post, we are going to learn about:

The new React 19 feature - Actions
The new React 19 hooks - useActionState and useFormStatus
Converting a React 18 form to a React 19 form

Feature: React Actions

To understand Actions, let's first take a look at how we manage forms today. In React 18 and earlier, we submit forms using the handleSubmit function in a button. Here's a simple form that has one input field name:

// Form submission in React 18
console.info('React 18 form');

const [name, setName] = useState('');
const [isPending, setIsPending] = useState(false);

const handleChange = (event) => {
  setName(event.target.value);
};

const handleSubmit = (event) => {
  event.preventDefault();
  setIsPending(true);
  setTimeout(() => {
    // call API
    setIsPending(false);
  }, 500);
};

return (
  <form>
    <input type="text" name="name" onChange={handleChange} />
    {isPending ? <p>Loading...</p> : <p>Hello in React 18, {name}</p>}
    <button onClick={handleSubmit} disabled={isPending}>
      Update
    </button>
  </form>
);

In this code, we are doing the following:

Adding a Loading State: We use a variable isPending to manually keep track of the loading state.
Form Submission: The form is submitted using the handleSubmit event handler attached to the onClick event of the button.
Capturing Submitted Value: The handleChange function captures the submitted value and stores it in state variables.

Actions

With React 19, handling forms becomes easier with Actions, inspired by frameworks such as Remix. One key feature is the enhanced use of startTransition to manage pending states.

startTransition was introduced in React 18, allowing developers to mark certain updates as less urgent. In React 19, startTransition can now handle async functions, making it even more powerful for managing asynchronous tasks and improving the user experience during form submissions.

const [isPending, startTransition] = useTransition();

const handleSubmit = () => {
  startTransition(async () => {
    const error = await updateName(name);
    if (error) {
      setError(error);
      return;
    }
    redirect('/path');
  });
};

This async function inside startTransition is called Action. What makes them cool is that actions can be used directly to submit forms like so -

<form action="{actionFn}">...</form>

This format may look familiar if you are experienced with PHP.

How to create an action?

To create an async function, we can use a new hook introduced in React 19 - useActionState. We call this hook and pass in an action function and an initial state. This hook returns the updated state and a form action actionFn, which can be used to wire up a form.

const [state, actionFn] = useActionState(submitAction, { name: '' });

Now with this wired up with the form, we have -

<form action={actionFn}>
  <input type="text" name="name" />

  <button type="submit" disabled="{pending}">
    Update
  </button>
</form>

To add a loading state, we can use a new hook introduced in React 19 called useFormStatus.

const { pending, data, method, action } = useFormStatus();

This hook provides information on the status of the form. The pending state indicates whether the form is being submitted, and data is a FormData object containing the submitted data. We use this pending state to show a loader. However, there is one caveat - this hook can only be used in a child component, not in the form itself. So, we have to create child components SubmitButton and Loader to retrieve pending state:

function Loader() {
  const { pending } = useFormStatus();
  return <div>{pending && "Loading..."}</div>;
}

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      Update
    </button>
  );
}

....

return(
<form action={formAction}>
      <input type="text" name="name" />
      <Loader />
      <SubmitButton />
    </form>
)

We can also capture useful information about the data submitted to the form by retrieving it from the state returned from useActionState.

const [state, formAction] = useActionState(submitAction, { name: '' });

So here's the final form -

function Loader() {
  const { pending } = useFormStatus();
  return <div>{pending && 'Loading...'}</div>;
}

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      Update
    </button>
  );
}

function Name({ name }) {
  return <p>Hello in 19 {name}</p>;
}

function App() {
  console.info('React 19 form');

  const [state, formAction] = useActionState(submitAction, { name: '' });

  return (
    <form action={formAction}>
      <input type="text" name="name" />
      <Loader />
      <SubmitButton />
      <Name name={state?.name} />
    </form>
  );
}

Compare this with React 18 form at the top of this post to check the difference.

Conclusion

By utilizing actions along with hooks like useActionState and useFormStatus, we can easily manage form states, capture submitted data, and provide responsive feedback to users during form submissions to show pending states. I am excited for this improved experience of handling forms in React 19, and I look forward to removing unnecessary handleSubmits, useStates and pending state.

In my next blog post, I will discuss an exciting new React feature - the React Compiler. This tool automatically memoizes, eliminating the need for useMemo and useCallback. Stay updated and get it directly in your inbox by joining my newsletter.

DEV Community: Shruti Kapoor

Top 5 in Frontend and AI this week - AI Is Making Us Dumber + useEffect gets banned

React 2025 Full Course – Build a Netflix Clone with Tailwind, TanStack Router, TanStack Query & Zustand

GPT-5 - Hype or Legit Amazing? Front End Developer's honest review

What is covered in this video -

AI 101 for Frontend Devs: LLMs, Transformers, RAG Explained Simply

1. The Layers of the AI Ecosystem

2.1 AI

2.2 Machine Learning

2.3 Neural Networks

2.4 Deep Learning:

3. AI Terms Simplified

3.1 Model

3.2 Foundational Models

3.3 Large Language Models (LLM)

3.4 Generative AI

3.5 Transformer

3.6 GPT (Generative Pre-trained Transformer)

3.7 Prompts

3.8 Token

3.9 Hallucinations

4. Training Approaches

4.1 Supervised Learning

4.2 Unsupervised Learning

4.3 Reinforcement Learning from Human Feedback (RLHF)

4.4 Fine-Tuning

5. AI Tools

5.1 RAG (Retrieval Augmented Generation)

5.2 AI Agents

5.3 MCP (Model Context Protocol)

What tip would you give to someone who wants to get promoted?

React Best Practices: State Management

We are almost about to hit our goal!

I migrated from Create React App to Vite. Here's what I learnt -

1. Outdated React Version (React 15)

2. Removing Create React App

3. Module Import Errors (Cannot use import statement outside a module)

4. Dependency Vulnerabilities and Security Issues

5. Handling Ejected Configuration Files

I migrated from Create React App to Vite and took these steps

1. Outdated React Version (React 15)

2. Removing Create React App

3. Module Import Errors (Cannot use import statement outside a module)

4. Dependency Vulnerabilities and Security Issues

5. Handling Ejected Configuration Files

Create React App is Dead. What does it mean for you?

Why is CRA deprecated?

What should you do now?

Alternatives to CRA

What I’m doing:

Shruti’s Substack | Shruti Kapoor | Substack

Steps to Dealing with Overcoming Imposter Syndrome in Tech

What Is Imposter Syndrome?

My Experience With Imposter Syndrome

How to Beat Imposter Syndrome

1. Acknowledge the Feeling

2. Reframe Negative Thoughts

3. Break Down the Cause

4. Celebrate Evident Success

5. Keep Learning

6. Find Your Support System

Your Journey Matters

Connect with Me:

React 19 Actions - Simplifying form submission and loading states

Feature: React Actions

Actions

How to create an action?

Conclusion

3. Module Import Errors (`Cannot use import statement outside a module`)

3. Module Import Errors (`Cannot use import statement outside a module`)