React is an open-source JavaScript library for building user interfaces from reusable components. This React JS tutorial explains the JavaScript knowledge you need, how to create a React application, and how components, JSX, props, state, events, lists, forms, and Effects work together.

What is React JS?

React lets developers describe a user interface as a collection of components. A component is a JavaScript function that returns markup. React renders the component and updates the relevant parts of the page when its data changes.

React focuses on the user-interface layer. A complete application may also use a router, data-fetching tools, a backend API, authentication, testing libraries, and a build tool or React-based framework. The official React documentation provides the current learning material and API guidance.

JavaScript prerequisites for learning React

Learn the following JavaScript concepts before starting React. React becomes much easier when you can read and write ordinary JavaScript without treating every expression as React-specific syntax.

  • Variables declared with const and let
  • Functions and arrow functions
  • Objects, arrays, and destructuring
  • Array methods such as map(), filter(), and find()
  • Template literals and conditional expressions
  • Modules using import and export
  • Promises, async, and await
  • Basic HTML, CSS, DOM, and browser event concepts

You do not need to master every advanced JavaScript feature first. You should, however, understand functions, arrays, objects, modules, and asynchronous code well enough to recognize them inside a component.

Create a React JS application with Vite

For a local learning project, install a current Node.js release and use Vite to create the development environment. Run the following commands in a terminal:

</>
Copy
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

The terminal prints a local development URL. Open it in a browser. During development, Vite rebuilds the necessary modules when you save a source file.

A small Vite-based React project normally contains these important files:

  • index.html provides the page into which React is mounted.
  • src/main.jsx creates the React root and renders the application.
  • src/App.jsx contains the initial application component.
  • src/index.css and other CSS files contain the application styles.
  • package.json records scripts and project dependencies.

Build a React component with JSX

A React component name begins with a capital letter. The function returns JSX, a syntax extension that lets markup appear alongside JavaScript logic.

</>
Copy
function Welcome() {
  const learner = 'Maya';

  return (
    <section>
      <h1>React JS Tutorial</h1>
      <p>Welcome, {learner}.</p>
    </section>
  );
}

export default Welcome;

Curly braces insert a JavaScript expression into JSX. JSX resembles HTML, but there are a few differences: use className instead of class, close every tag, and return one enclosing element or a Fragment from a component.

Compose a React interface from reusable components

Components can render other components. Breaking a page into focused components makes repeated interface elements easier to reuse and gives each part a clear responsibility.

</>
Copy
function Header() {
  return <h1>Course Dashboard</h1>;
}

function LessonCard() {
  return <article>Components and Props</article>;
}

export default function App() {
  return (
    <main>
      <Header />
      <LessonCard />
      <LessonCard />
    </main>
  );
}

Keep components at the top level of a module instead of defining one component inside another. Nested definitions create a new component function during every render and can cause state to reset unexpectedly.

Pass data to React components with props

Props are inputs supplied by a parent component. They let the same component display different data. A component should treat its props as read-only.

</>
Copy
function LessonCard({ title, duration }) {
  return (
    <article>
      <h2>{title}</h2>
      <p>Duration: {duration} minutes</p>
    </article>
  );
}

export default function App() {
  return (
    <main>
      <LessonCard title="JSX Basics" duration={20} />
      <LessonCard title="React State" duration={35} />
    </main>
  );
}

Text can be passed in quotes. Numbers, objects, arrays, variables, and other JavaScript expressions are passed inside curly braces.

Manage changing data with React state

State is a component’s memory. Use the useState Hook when a value must persist between renders and a change to that value should update the interface.

</>
Copy
import { useState } from 'react';

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

  function increment() {
    setCount(currentCount => currentCount + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increase</button>
    </div>
  );
}

Calling the setter requests another render with the new state. Do not mutate arrays or objects stored in state. Create a replacement value instead, for example with the spread syntax, map(), or filter().

Handle user events in React

React event props use camelCase names such as onClick, onChange, and onSubmit. Pass the event-handler function rather than calling it during rendering.

</>
Copy
function DownloadButton() {
  function handleClick() {
    alert('Preparing the file');
  }

  return <button onClick={handleClick}>Download</button>;
}

Use onClick={handleClick}, not onClick={handleClick()}. The second form invokes the function immediately while React is rendering the component.

Render conditional React content

React uses ordinary JavaScript for conditional rendering. An if statement works well when entire return paths differ. A ternary expression is useful when choosing between two small pieces of JSX, while && can render content only when a condition is true.

</>
Copy
function AccountStatus({ isSignedIn, messages }) {
  return (
    <section>
      <p>{isSignedIn ? 'Signed in' : 'Guest user'}</p>
      {messages.length > 0 && (
        <p>Unread messages: {messages.length}</p>
      )}
    </section>
  );
}

Render React lists with stable keys

Use map() to transform an array into JSX elements. Each element created directly inside the loop needs a stable key that is unique among its siblings.

</>
Copy
const lessons = [
  { id: 101, title: 'Components' },
  { id: 102, title: 'Props' },
  { id: 103, title: 'State' }
];

function LessonList() {
  return (
    <ul>
      {lessons.map(lesson => (
        <li key={lesson.id}>{lesson.title}</li>
      ))}
    </ul>
  );
}

A key helps React associate rendered items with their data when an item is inserted, removed, or reordered. Prefer an ID from the data. Avoid generating a random key while rendering, and avoid an array index when the list can change order.

Build a controlled form in React

A controlled input receives its value from state and updates that state in an onChange handler. This gives the component direct access to the current form value.

</>
Copy
import { useState } from 'react';

export default function NameForm() {
  const [name, setName] = useState('');

  function handleSubmit(event) {
    event.preventDefault();
    alert(`Submitted name: ${name}`);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name
        <input
          value={name}
          onChange={event => setName(event.target.value)}
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

Synchronize React with external systems using Effects

The useEffect Hook is intended for synchronizing a component with something outside React, such as a browser API, subscription, timer, network connection, or third-party widget. It is not required for values that can be calculated directly from props or state during rendering.

</>
Copy
import { useEffect, useState } from 'react';

export default function PageTitleEditor() {
  const [title, setTitle] = useState('React Tutorial');

  useEffect(() => {
    document.title = title;
  }, [title]);

  return (
    <input
      value={title}
      onChange={event => setTitle(event.target.value)}
    />
  );
}

The dependency array tells React when the Effect must run again. If an Effect starts a subscription, timer, or connection, return a cleanup function that stops it when appropriate.

How React updates the browser DOM

When props or state change, React renders the affected components to determine what their interface should look like. It then commits the necessary changes to the browser DOM. This process is commonly described as reconciliation.

React maintains an in-memory representation of the rendered interface, often called the virtual DOM. React compares element trees and uses element types and keys to preserve or replace the appropriate parts of the interface. This avoids requiring application code to manually locate and update each DOM node.

The virtual DOM does not make every application automatically fast. Component structure, state placement, network activity, large lists, expensive calculations, and browser layout work still affect performance. Measure a real performance problem before adding memoization or other optimizations.

When React JS is a suitable choice

React is useful when an interface contains interactive state, repeated UI patterns, or components that must be shared across several screens. It can power a complete client interface or be introduced into part of an existing page.

  • Dashboards with filters, forms, and frequently changing data
  • Applications that reuse buttons, cards, dialogs, and other interface components
  • Multi-page products built with a React framework or routing solution
  • Existing websites that need an isolated interactive feature
  • Teams that want to share interface logic through custom Hooks and components

A mostly static page with very little interaction may not require React. Select it according to the interface requirements, deployment model, team experience, accessibility needs, and maintenance costs.

Recommended React JS learning order

A project-based sequence helps connect the individual React concepts:

  1. Review JavaScript functions, arrays, objects, modules, and asynchronous code.
  2. Learn JSX and create small function components.
  3. Pass data with props and compose components.
  4. Add events and local state with useState.
  5. Practise conditional rendering and list rendering with keys.
  6. Build controlled forms and validate their input.
  7. Lift shared state to the nearest common parent.
  8. Learn when an Effect is necessary and how cleanup works.
  9. Fetch data while handling loading, error, empty, and success states.
  10. Add routing, testing, and application-level state only when the project requires them.

A task list is a useful first project because it covers components, props, state, events, forms, conditional content, list rendering, and immutable array updates without requiring a complex backend.

Common React JS mistakes to avoid

  • Mutating state: replace arrays and objects instead of changing the stored value directly.
  • Calling event handlers during render: pass a function to an event prop.
  • Using unstable list keys: use persistent IDs from the underlying data.
  • Copying props into state unnecessarily: calculate derived values during rendering when possible.
  • Using Effects for ordinary calculations: reserve Effects for synchronization with external systems.
  • Placing all state at the application root: keep state close to the components that use it and lift it only when it must be shared.
  • Ignoring loading and error states: network requests do not always complete immediately or successfully.
  • Learning React before basic JavaScript: JSX still relies on JavaScript expressions, functions, objects, and arrays.

React JS tutorial FAQs

Is React JS easy to learn for a beginner?

React’s basic component model is approachable, but beginners often find JavaScript syntax, state updates, data flow, and Effects more difficult than JSX itself. Learning core JavaScript first and building several small projects makes the progression more manageable.

Should I learn JavaScript before React?

Yes. React components use ordinary JavaScript for functions, conditions, array transformations, objects, modules, and asynchronous operations. Starting React without these foundations makes it difficult to distinguish JavaScript behavior from React behavior.

Is React a library or a framework?

React describes itself as a library for building user interfaces. It does not prescribe every part of a complete application. Developers commonly use React with additional tools or a React-based framework for routing, data loading, server rendering, and deployment.

What is the difference between props and state in React?

Props are read-only inputs passed from a parent component. State is data remembered by a component and updated through a state setter. A state update requests another render, while a component must not modify its props.

Do I need Redux to learn React JS?

No. Start with props, local state, lifting state, and context where appropriate. Add an external state-management library only after the application’s shared-state requirements justify the additional abstraction.

React JS tutorial editorial QA checklist

  • Confirm that every component name begins with a capital letter and every JSX tag is closed.
  • Verify that event handlers are passed as functions rather than invoked during rendering.
  • Check that state arrays and objects are replaced instead of mutated.
  • Confirm that rendered list items use stable keys from the application data.
  • Review each Effect and verify that it synchronizes with an external system.
  • Test controlled inputs, form submission, loading states, error states, and empty results.
  • Run the examples with the project’s installed React and build-tool versions.
  • Check keyboard operation, visible labels, semantic HTML, and focus behavior for interactive components.

Continue practising React JS

After completing the examples, build one small application without copying the finished code. Begin with a component tree, identify the minimal state, pass data through props, and add Effects only where the interface must synchronize with something outside React. Refer to the official React learning guide when checking current APIs and recommended patterns.