React Js

Welcome to this beginner-friendly tutorial on upgrading a React JS application to the latest version, React 19 (released in December 2024). Upgrading React ensures your app benefits from new features, performance improvements, and bug fixes. This guide is designed for beginners who have a basic React app (e.g., built with Create React App) and want to learn how to upgrade it safely. We’ll walk through the process step-by-step, create a simple app to test the upgrade, and address common issues you might encounter.

---

Why Upgrade to React 19?

React 19 introduces exciting features and improvements that make your apps faster, more efficient, and easier to maintain:

• New Hooks: useOptimistic and useFormStatus simplify state management and form handling.
• Improved Performance: Automatic batching and the React Compiler (experimental) reduce unnecessary re-renders.
• Better Server-Side Rendering (SSR): Enhanced support for Suspense and server components.
• Simplified JSX: No need to import React for JSX.
• Future-Proofing: Keeps your app compatible with modern tools and libraries.

---

Prerequisites

Ensure you have:

• A basic React app (e.g., via Create React App or Vite)
• Node.js and npm
• Basic React/JSX/JavaScript knowledge
• A code editor (e.g., VS Code)
• A terminal

---

Step 1: Set Up a Sample App (Optional)

If needed:

npx create-react-app my-upgrade-app
cd my-upgrade-app

Update src/App.js:

import './App.css';
function App() {
  return (
    <div className="App">
      <h1>My React App</h1>
      <p>Welcome to my app! Current React version: {React.version}</p>
    </div>
  );
}
export default App;

Update src/App.css:

.App {
  text-align: center;
  padding: 50px;
  background-color: #f0f0f0;
  min-height: 100vh;
}
h1 {
  color: #333;
}

Run the app:

npm start

---

Step 2: Check Current Version

In package.json:

"dependencies": {
  "react": "^18.3.1",
  "react-dom": "^18.3.1"
}

Or check React.version in the app.

---

Step 3: Upgrade to React 19

3.1 Update React and DOM

npm install --save-exact react@19.0.0 react-dom@19.0.0

For TypeScript:

npm install --save-dev @types/react@19.0.0 @types/react-dom@19.0.0

3.2 Update React Scripts

npm install react-scripts@latest

3.3 Use New Root API

Ensure src/index.js uses createRoot:

import { createRoot } from 'react-dom/client';
import App from './App';
const root = createRoot(document.getElementById('root'));
root.render(<App />);

3.4 New JSX Transform

Remove import React from 'react'; if not needed.

---

Step 4: Test Your App

Run:

npm start

Check for errors in the browser console.

---

Step 5: Handle Breaking Changes

• Refs: ref is now a regular prop.
• Deprecated APIs: ReactDOM.render, react-test-renderer
• Strict Mode: More strict in React 19
• Codemods:

npx @codemod/cli run react/19

---

Step 6: Explore New Features

Update src/App.js:

import { useState, useOptimistic } from 'react';
import './App.css';
function App() {
  const [name, setName] = useState('');
  const [optimisticName, setOptimisticName] = useOptimistic(name);

  const handleSubmit = (e) => {
    e.preventDefault();
    setOptimisticName(name);
    setTimeout(() => setName(name), 1000);
  };

  return (
    <div className="App">
      <h1>My React App</h1>
      <p>Current React version: {React.version}</p>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="Enter your name"
          className="border p-2 m-2"
        />
        <button type="submit" className="bg-blue-500 text-white p-2 rounded">
          Submit
        </button>
      </form>
      <p>Welcome, {optimisticName || 'Guest'}!</p>
    </div>
  );
}
export default App;

---

Step 7: Deploy and Monitor

Build for Production

npm run build

Deploy

Use Vercel, Netlify, or GitHub Pages.

Monitor

Use dev tools or Sentry.

---

Common Issues and Fixes

• Module not found: Reinstall react-dom.
• Strict Mode Warnings: Temporarily remove <StrictMode>.
• Dependency Conflicts: Run npm ls react.
• Vite Issues:

npm install vite@latest @vitejs/plugin-react@latest

---