React JS Basics Every Beginner Should Know

React JS is one of the most popular JavaScript libraries for building interactive and dynamic user interfaces. It is widely used to develop modern web applications, from simple websites to complex single-page applications.

If you are starting your journey in frontend development, understanding the basics of React JS will help you build a strong foundation. In this article, let’s explore the essential React concepts every beginner should know.

1. What Is React JS?

React JS is an open-source JavaScript library used to build user interfaces. It allows developers to create reusable UI components and update the interface efficiently when application data changes.

React is commonly used for:

• Single-page applications
• E-commerce websites
• Admin dashboards
• Social media platforms
• Interactive web applications

Before learning React, it is helpful to understand HTML, CSS, JavaScript fundamentals, functions, arrays, and objects.

2. Understanding Components

Components are the building blocks of a React application. Each component represents a part of the user interface, such as a navigation bar, login form, product card, or footer.

React applications commonly use functional components.

Example:

function Welcome() {
  return <h1>Welcome to React JS!</h1>;
}

export default Welcome;

Here, Welcome is a component that displays a heading. You can reuse this component wherever it is needed in your application.

3. What Is JSX?

JSX stands for JavaScript XML. It allows developers to write HTML-like syntax inside JavaScript code.

Example:

function App() {
  const name = "React Beginner";

  return <h2>Hello, {name}!</h2>;
}

export default App;

JSX makes UI code easier to read and helps developers combine JavaScript logic with interface elements.

Remember that JSX uses className instead of the HTML class attribute and requires a single parent element or a fragment when returning multiple elements.

4. Understanding Props

Props, short for properties, allow components to receive data from their parent components.

Example:

function Student(props) {
  return <h3>Student Name: {props.name}</h3>;
}

function App() {
  return <Student name="Arun" />;
}

export default App;

In this example, the Student component receives the name "Arun" through props.

Props help developers create reusable components that display different data without rewriting the same code.

5. Learning State with useState

State is used to manage data that can change over time. React provides the useState Hook to add state to functional components.

Example:

import { useState } from "react";

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

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
}

export default Counter;

Whenever the button is clicked, the count increases and React updates the displayed value.

Understanding state is essential for building interactive applications such as counters, forms, shopping carts, and dashboards.

6. Handling Events in React

React supports events such as clicks, form submissions, and input changes. Event handlers allow developers to respond to user actions.

Example:

function ButtonExample() {
  function handleClick() {
    alert("Button clicked!");
  }

  return (
    <button onClick={handleClick}>
      Click Me
    </button>
  );
}

export default ButtonExample;

Notice that onClick uses camelCase and receives a function reference. Event handling helps make applications interactive.

7. Rendering Lists with map()

Most applications display collections of data, such as products, students, or employee details. React commonly uses JavaScript's map() method to render lists.

Example:

function Courses() {
  const courses = ["React JS", "Python", "Java"];

  return (
    <ul>
      {courses.map((course) => (
        <li key={course}>{course}</li>
      ))}
    </ul>
  );
}

export default Courses;

The key helps React identify list items when the list changes. For dynamic lists, use a stable and unique identifier whenever possible.

8. Conditional Rendering

Conditional rendering allows you to display different content depending on a condition.

Example:

function LoginStatus() {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn ? <h2>Welcome Back!</h2> : <h2>Please Login</h2>}
    </div>
  );
}

export default LoginStatus;

Here, React displays a welcome message when isLoggedIn is true. Otherwise, it displays a login message.

Conditional rendering is useful for authentication screens, loading messages, error handling, and user-specific content.

9. Using the useEffect Hook

The useEffect Hook helps manage side effects, such as fetching data from an API, synchronizing with external systems, or setting up subscriptions.

Example:

import { useEffect } from "react";

function App() {
  useEffect(() => {
    console.log("Component mounted");
  }, []);

  return <h2>Learning useEffect</h2>;
}

export default App;

The empty dependency array means this effect runs after the initial mount in normal production behavior. In development, React Strict Mode may run an additional setup-and-cleanup cycle to help identify problems.

Learn useEffect after becoming comfortable with components, props, and state.

10. Building a Simple React Project

Once you understand these fundamentals, try building a small project to practise them together.

Beginner-friendly project ideas include:

• To-Do List: Add, display, and remove tasks.
• Student Details App: Display student names and course information.
• Expense Tracker: Record expenses and calculate totals.
• Weather App: Fetch and display weather information from an API.
• Product Listing Page: Display products using reusable components.

Start with a small application and gradually add features. Building projects helps you understand how React concepts work together in real-world development.

Conclusion

Learning React JS becomes easier when you understand its core concepts, including components, JSX, props, state, event handling, list rendering, conditional rendering, and Hooks. Practising these concepts through small projects will help you develop confidence and prepare for more advanced topics such as React Router, API integration, and state management.

If you want structured learning with practical exercises and real-time projects, explore React JS Training in Chennai at Credo Systemz. Hands-on practice can help you strengthen your frontend development skills and build a solid foundation for your software development career.