React JS Fundamentals – A Beginner’s Guide To Learn React JS

React is a JavaScript library for building user interfaces. It helps you create fast, interactive, and reusable components on the web. Whether you’re building a personal project or working at scale, React makes UI development more predictable and efficient. This guide covers React fundamentals step by step, and the official React docs are the best companion.

In this guide, we’ll cover the core concepts you need to understand React:

• Components
• JSX
• Props
• State

Let’s get started by building your first React component.

Your First React Component

import React from "react";

function Car() {
  return (
    <div>
      <h2>This is a car.</h2>
    </div>
  );
}

export default Car;

What’s happening here:

• We’re importing React so we can use JSX.
• Car is a functional component — it’s just a JavaScript function that returns some UI.
• <div> and <h2> are HTML-like syntax, but written in JSX.
• We export the component so we can use it elsewhere.

What is JSX?

JSX stands for JavaScript XML. It allows you to write HTML-like syntax directly within your JavaScript code. JSX is not required, but it’s the standard in React because it makes code easier to read and write.

const element = <h1>Hello, world!</h1>;

Under the hood, JSX gets compiled to React.createElement(). You can also write JavaScript expressions inside JSX by wrapping them in curly braces:

const name = "Sarah";
const greeting = <h2>Hello, {name}!</h2>;

Custom Components

Components in React can be composed together. For example, we can build a small app using two components — one for a button and one for displaying a label.

import React from "react";

function Button() {
  return <button>Click me</button>;
}

function App() {
  return (
    <div>
      <h1>Welcome</h1>
      <Button />
    </div>
  );
}

export default App;

Here, <Button /> is a custom component being used inside another element. This is what makes React powerful — you can build small pieces and compose them into bigger ones.

Props

Props (short for “properties”) let you pass data into components. They are read-only and help you customize components.

Let’s update our Car component to use props:

function Car(props) {
  return (
    <div>
      <h2>This car is a {props.brand}.</h2>
    </div>
  );
}

function App() {
  return <Car brand="Toyota" />;
}

What’s happening:

• Car receives props as an argument.
• We pass brand="Toyota" When rendering it inside App.
• The Car component displays that value dynamically.

State

Unlike props, state is data that changes over time. You can add a state to any component using the useState hook.

Let’s extend the Car component to track how many times a user has “started” the car:

import React, { useState } from "react";

function Car(props) {
  const [starts, setStarts] = useState(0);

  const handleStart = () => {
    setStarts(starts + 1);
  };

  return (
    <div>
      <h2>This car is a {props.brand}.</h2>
      <p>You've started it {starts} times.</p>
      <button onClick={handleStart}>Start Car</button>
    </div>
  );
}

function App() {
  return <Car brand="Tesla" />;
}

export default App;

Here’s what’s happening:

• useState(0) creates a starts variable with an initial value of 0.
• When the button is clicked, setStarts updates the value.
• The UI automatically updates to reflect the new value — that’s React’s reactivity in action.

Final Thoughts on React Fundamentals

That’s the high-level overview of React fundamentals. If you understand components, JSX, props, and state, you’re already off to a great start. From here, you can delve into more advanced topics, such as effects, context, routing, and performance optimization.

To learn more, check out the official React documentation.