Introduction to React for Beginners Part 1

React is a popular JavaScript library for building user interfaces, particularly for single-page applications. It's maintained by Meta (formerly Facebook) and a community of individual developers and companies¹[6]6.

React Version History

React was first released on May 29, 2013¹[6]6. Since then, it has undergone multiple updates and improvements. The most recent stable version as of 2024 is React 18²[5]5. Each version brought new features and enhancements to make React more efficient and easier to use.

React Basics

React code is made up of entities called components. These components are modular and reusable. A React application typically consists of many layers of components¹[6]6.

Here's an example of a simple React component:

function HelloWorld() {
  return <h1>Hello, World!</h1>;
}

This HelloWorld function is a component that returns a single HTML element (an H1 tag with the text "Hello, World!").

JSX

React introduces a syntax extension called JSX, which allows you to write JavaScript that looks like HTML. This makes it more intuitive to create and understand your components¹[6]6.

Here's an example of JSX in action:

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

In this example, props is an object that holds the properties passed to the component. We're using it to display a dynamic name in the greeting.

State and Props

In React, each component has its own state and props. The state is a data structure that starts with a default value when a component mounts and then gets updated over time, usually as a result of user events¹[6]6.

Props (short for properties) are variables that are passed from a parent component to a child component. They are used to pass data and event handlers down the component tree¹[6]6.

React Hooks

React Hooks, introduced in React 16.8, are functions that let you use state and other React features without writing a class¹[6]6. The most commonly used hooks are useState and useEffect.

Here's an example of using the useState hook:

import React, { useState } from "react";

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}