Getting Started with ReactJS

Generated from Adobe firefly

What is ReactJS?

ReactJS is a popular open-source JavaScript library for building user interfaces, especially single-page applications where you need a fast, interactive user experience. It was developed by Facebook.

Key Concepts

1. Components

• Components are the building blocks of a React application.
• Each component is a reusable piece of UI (like a button, form, or entire page).
• Components can be written as JavaScript functions or classes.

Example:

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

2. JSX (JavaScript XML)

• React uses JSX, a syntax extension that lets you write HTML-like code in JavaScript.
• JSX makes it easy to visualize the UI structure.

Example:

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

3. Props (Properties)

• Props are inputs to components, allowing you to pass data from parent to child components.
• Props are read-only.

Example:

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

4. State

• State is a way for components to keep track of changing data.
• State is managed within the component (using useState in function components).

Example:

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

5. Lifecycle

• Components have a lifecycle (mounting, updating, unmounting).
• You can run code at specific points using hooks like useEffect.

Example:

import { useEffect } from 'react';

useEffect(() => {
  // Code here runs after the component renders
}, []);

Get Saumya14’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Table of Mounting, Updating and Unmounting:

| Phase       | What Happens?              | Example Method/Hook         
-----------------------------------------------------------------------------------------|
| Mounting    | Component is created       | `componentDidMount`,
              | and added to the DOM       | `useEffect(() => {}, [])` 
  
| Updating    | Component re-renders       | `componentDidUpdate`,
              | due to state/props change  | `useEffect` with dependencies
  
| Unmounting  | Component is removed       | `componentWillUnmount`, 
              | from the DOM               | cleanup in `useEffect` 

How React Works?

• React creates a virtual DOM (a lightweight copy of the real DOM).
• When data changes, React updates only the parts of the DOM that need to change, making updates fast and efficient.

The DOM stands for Document Object Model.

What is the DOM?

• The DOM is a programming interface for web documents (like HTML and XML).
• It represents the structure of a web page as a tree of objects (called “nodes”).
• Each element, attribute, and piece of text in your HTML becomes a node in this tree.

Why is the DOM important?

• Browsers use the DOM to display web pages.
• JavaScript can interact with the DOM to change the content, structure, or style of a page dynamically (without reloading).

Example:

Given this HTML:

<html>
  <body>
    <h1>Hello, world!</h1>
    <button>Click me</button>
  </body>
</html>

The DOM for this page looks like a tree:

Document
 └── html
      └── body
           ├── h1
           │    └── "Hello, world!"
           └── button
                └── "Click me"

DOM responds to user actions (like clicks) with event listeners

6. Event Handling

React lets you handle user events (like clicks, typing, and form submissions) directly in your components using event handlers.

• Event names use camelCase (e.g., onClick, onChange).
• You pass a function as the handler, not a string.

Example: Handling a Button Click

function ClickMe() {
  function handleClick() {
    alert('Button was clicked!');
  }

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

Typical React App Structure

src/
  App.js
  components/
    Header.js
    Footer.js
    ...

Summary

• React is all about building UI with reusable components.
• You use JSX to describe what the UI should look like.
• Props pass data, state manages local data, and hooks let you tap into lifecycle events.