Introduction

React is like a painter’s canvas, providing a flexible space where you can create interactive masterpieces for the web. Imagine each React component as a brush stroke, coming together to form a beautiful picture.

What is React?

React is a JavaScript library for building user interfaces. It’s like building with LEGO blocks—you have individual pieces that you can put together to make something amazing.

The Heart of React: Components

Components are the heart of React. They’re like individual notes in a song, each playing a crucial role in the symphony.

In simple terms, React components are like individual puzzle pieces that make up a website or application. Each component represents a part of the user interface (UI), and they can be used over and over again, just like puzzle pieces can be reused to create different pictures.

There are two main types of components in React:

Functional Components: These are like simple functions in JavaScript. They take in some data and return what should be shown on the screen. Here’s a basic example:
```
  function WelcomeMessage() {
    return <h1>Hello, welcome to my app!</h1>;
  }
```

Class Components: These are more complex and use ES6 classes. They can interact with other components and hold information that might change over time. Here’s how you might write a class component:

  class WelcomeMessage extends React.Component {
    render() {
      return <h1>Hello, welcome to my app!</h1>;
    }
  }

JSX: A Blend of HTML and JavaScript

JSX allows you to write HTML in your JavaScript code. It’s like a smoothie—blending fruits (HTML) and yogurt (JavaScript) to create a delicious treat.

const element = <h1>Welcome to React!</h1>; // jsx
//------------------ or ------------------
const element = React.createElement('h1', null, 'Welcome to React!'); //js

State: Data in React

State is like a book’s blank pages, waiting for you to write your story.

In React, state refers to data that can change over time. It’s like a variable that holds information that the component can display or manipulate.

useState Hook: The useState hook is a special function in React that lets you add state to functional components. In the example above, useState('Hello World!') is called to create a new state variable named content.
Initial State: The argument passed to useState ('Hello World!') is the initial state, which is the value that content will have when the component first renders.
State Variable: content is the state variable, and in this case, it starts off holding the string 'Hello World!'.
Setter Function: setContent is a function that allows you to update the value of content. When you call setContent with a new value, React will re-render the component with the updated state.
Rendering State: In the component’s return statement, {content} is used to display the current value of the content state variable inside an <h1> tag.
Updating State: If you wanted to change the message, you would call setContent with a new string. For example, setContent('Welcome to React!') would update the content state to 'Welcome to React!' and the component would show this new message.

In summary, the useState hook in this example is used to track a piece of data—content—that can change over time. The component will automatically update to reflect the new state whenever setContent is called with a new value. This is how React keeps the UI in sync with the state.

import React, { useState } from 'react';

function Message() {
  const [content, setContent] = useState('Hello World!');

  return <h1>{content}</h1>;
}

export default Message;

Props: Shareable Data in React

Props are like passing a baton in a relay race, handing off data from one component to another.

In React, props (short for properties) are used to pass data from one component to another, usually from a parent component to a child component.

Here’s a simple example to illustrate this:

function ParentComponent() {
  const message = 'Hello from parent!';
  return <ChildComponent text={message} />;
}

function ChildComponent(props) {
  return <h1>{props.text}</h1>;
}

In the above example:

ParentComponent has some data, a message saying “Hello from parent!”.
It wants to pass this message to ChildComponent, so it uses props to do so.
ChildComponent receives the message as props.text and displays it.

Just like the baton in a relay race, props are the mechanism for passing data and keeping the flow of information going from one component to the next in a React application. This allows components to be more dynamic and reusable, as they can receive different data and display it accordingly.

The React Lifecycle: Birth to Retirement

The lifecycle of a React component is like a journey—from creation (mounting) to growth (updating) and finally to retirement (unmounting).

Creation (Mounting): This is when the component is being built and integrated into the website for the first time. It’s like the component is being ‘born’. During this phase, React has specific methods that get called, such as constructor(), getDerivedStateFromProps(), render(), and componentDidMount()
Growth (Updating): After the component is on the page, it might need to update in response to user actions or new data. This could be a change in its internal state or new props passed down from a parent component. Methods like shouldComponentUpdate(), getSnapshotBeforeUpdate(), and componentDidUpdate() a re used in this phase.
Retirement (Unmounting): Eventually, the component may no longer be needed and gets removed from the page—like saying goodbye. The method componentWillUnmount() is called right before the component is removed from the DOM¹².

These stages ensure that a component is correctly set up, updated, and cleaned up, which helps in managing resources efficiently and keeping the app’s performance smooth.

Hooks: The New Way to React

Hooks are a newer addition to React, allowing you to use state and other features without writing a class. They’re like upgrading your old phone to a new model with more features.

React Hooks are special functions that let you “hook into” React’s features and state management in functional components, without needing to use class components. They’re called “hooks” because they allow you to hook into React’s state and lifecycle features from function components.

Before Hooks, only class components could use certain React features like state and lifecycle methods. Hooks were introduced with React version 16.8 to enable functional components to use these features, making code simpler and easier to manage.

For example, the useState Hook allows you to add state to a functional component:

In this example, useState is a Hook that lets you add React state to our Counter function component. Every time you click the button, the count state is updated, and the component re-renders with the new count. Hooks make it possible to organize logic into reusable, independent pieces, leading to cleaner and more maintainable code.

import { 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>
  );
}

Practical Example: A Greeting App in React

Setting Up

First, make sure you have Node.js installed. Then, create a new React app using the following command:

npx create-react-app greeting-app
cd greeting-app

Creating a Greeting Component

We’ll start by creating a Greeting component that accepts a name prop and displays a personalized greeting.

// Greeting.js
import React from 'react';

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

Managing State with Hooks

Now, let’s use the useState hook to manage the state of the name in our app.

// App.js
import React, { useState } from 'react';
import Greeting from './Greeting';

function App() {
  const [name, setName] = useState('World');

  return (
    <div>
      <Greeting name={name} />
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter your name"
      />
    </div>
  );
}

export default App;

Running the App

Finally, run your app to see it in action:

npm start

You should now see a greeting message that says “Hello, World!” and an input field where you can type your name to update the greeting.

This simple app demonstrates the power of React’s components, JSX, and state management with hooks. It’s a small step into the vast world of React, but remember, every journey begins with a single step. I encourage you to play around with the code, experiment with different states, and see how React responds to changes. This hands-on experience will solidify their understanding and inspire them to dive deeper into React. 🌟

Conclusion: Your React Journey

Starting your journey with React might seem daunting, but like any great adventure, it begins with a single step. With each component you build, you’ll be crafting your own digital story.

Naveen Sargam's Blog