New to React? Learn what's new in React 19 (Actions, useActionState, useOptimistic) and build your first project step by step with Vite.

React is the most popular JavaScript library for building user interfaces, and React 19 is the biggest update to it in years. It makes forms, loading states and data handling much simpler, and it removes a lot of the boilerplate code that beginners used to struggle with.

If you are new to React, or coming back after a break, this guide explains what React is, what is new in React 19, and how to build your first project step by step.

What is React?

React lets you build a web page out of small, reusable pieces called components. A button, a product card, a navigation bar or a whole form can each be a component. You describe what the interface should look like for a given state, and React updates the page efficiently whenever that state changes.

This approach makes large interfaces easier to build, test and maintain. That is why React powers dashboards, e-commerce stores, booking systems and mobile apps (through React Native) around the world.

What is new in React 19?

1. Actions: easier form handling

In React 19 you can pass an async function directly to a form's action prop. React automatically handles the pending state, errors and form reset for you. Submitting a contact or enquiry form no longer needs a pile of useState calls just to track loading and errors.

2. New hooks for forms and data

  • useActionState keeps track of the result of a form action, such as a success message or validation errors.
  • useFormStatus lets a child component, like a submit button, know whether its parent form is currently submitting.
  • useOptimistic shows the expected result immediately (for example, a new comment) while the request is still being processed.

3. The new use API

The use function reads the value of a promise or context directly inside a component. Combined with Suspense, it makes loading data feel much more natural.

4. Simpler refs and context

Function components can now accept ref as a normal prop, so forwardRef is no longer needed in most cases. You can also render <Context> directly as a provider instead of writing <Context.Provider>.

5. Built-in document metadata

You can render <title>, <meta> and <link> tags inside any component, and React moves them into the page head automatically. This is very helpful for SEO in single-page applications.

6. Server Components

React Server Components run on the server and send ready-made HTML to the browser, which means less JavaScript for visitors to download. You use them through frameworks such as Next.js. They are an advanced topic, so as a beginner you can learn them after you are comfortable with the basics.

Setting up your first React 19 project

You will need Node.js installed on your computer (the current LTS version is the best choice). The recommended way to start a simple project today is Vite, because it is fast and easy. Create React App is no longer recommended for new projects.

Open a terminal and run:

npm create vite@latest my-first-app -- --template react
cd my-first-app
npm install
npm run dev

Open the address shown in the terminal (usually http://localhost:5173) and you will see your app running. Every time you save a file, the page updates instantly.

Your first component

Open src/App.jsx and replace its contents with this small counter:

import { useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <main>
      <h1>Hello React 19</h1>
      <button => setCount(count + 1)}>
        Clicked {count} times
      </button>
    </main>
  );
}

useState stores a value that can change. When you click the button, setCount updates the value and React re-renders only what is needed.

A simple form with Actions

Here is how React 19 makes a form with a loading state simple:

import { useActionState } from 'react';

async function subscribe(prevState, formData) {
  const email = formData.get('email');
  // send the email to your server here
  return 'Thanks! ' + email + ' has been subscribed.';
}

export default function Newsletter() {
  const [message, formAction, isPending] = useActionState(subscribe, '');

  return (
    <form action={formAction}>
      <input name="email" type="email" required />
      <button disabled={isPending}>
        {isPending ? 'Subscribing...' : 'Subscribe'}
      </button>
      {message && <p>{message}</p>}
    </form>
  );
}

There is no manual loading state and no event handler juggling. React tracks the pending state for you.

Tips for beginners

  • Learn modern JavaScript first: arrow functions, destructuring, array methods like map and filter, and async/await.
  • Think in components: break every screen into small pieces with one clear job.
  • Keep state minimal: store only what you cannot calculate from other values.
  • Use the React Developer Tools browser extension to inspect components and state.
  • Read the official documentation at react.dev; it is beginner-friendly and full of interactive examples.

Is React right for your business project?

React is a great choice for interactive dashboards, customer portals, booking and appointment systems, e-commerce front ends and progressive web apps. For content-focused websites, it works best together with a framework that renders pages on the server, so that search engines can read your content easily.

Conclusion

React 19 makes the library friendlier than ever: forms are simpler, loading states are automatic and common patterns need far less code. Set up a Vite project, build a few small components, and you will quickly see why so many teams rely on React.

Need a fast, modern web application for your business? Rainbow Shine Infotech builds React and PHP solutions that are quick, secure and easy to manage. See our custom software services or talk to our developers.