Imagine you have a super cool toy building set called "React"! It's like having special blocks that you can use to build amazing castles, cars, or even robots on your computer. Each block represents a different part of what you want to build, like a block for the wheels of your car, a block for the windows of your castle, or a block for the eyes of your robot. You can put these blocks together in a way that makes your creation come to life on the screen, and the best part is, if you want to change something—like adding more windows to your castle or making your robot dance—you can do it easily by moving around the blocks! React helps you build awesome things on your computer, just like playing with your favourite toy-building set!

React is popular because it offers a declarative and component-based approach to building user interfaces, optimizing performance with its virtual DOM and enabling developers to write JSX for more seamless integration of HTML-like syntax within JavaScript.

What is React?

React is a JavaScript library developed by Facebook for building user interfaces, particularly for single-page applications where UI updates happen dynamically. It allows developers to create reusable UI components and manage their state efficiently.

learning React can be as simple and playful as building with blocks! Let's imagine React components as building blocks and a React app as a fun structure we create.

1. Building Blocks ( Components )

   Just like different types of building blocks, React has different types of components. Here are a few examples:

   • Button Block ( Button Components ): A Button you can Click.

   • Text Block ( Text Component ): A Block of text you can display.

   • Counter Block ( Counter Component ): A block that counts and shows a number.

2. Creating a React App ( Our Playground )

   Let's create a simple React app using these building blocks. We'll build a Counter app.

   • Setting Up using Vite

     Imagine you have a magic crayon box called "Vite for React" that helps you draw pictures super fast! It's like having all the perfect crayons you need to create a picture of a cute puppy right away—brown for its fur, black for its nose, and pink for its tongue. When you start colouring, the puppy appears instantly on the page just the way you want it. And if you want to change something, like making the puppy bigger or giving it a blue-collar, you can do it in a snap! With Vite for React, drawing fun and colourful pictures (or making websites!) becomes super easy and exciting, like using a magic colouring book!

       npm create vite@latest react-playground --template react-ts
     
       cd react-playground
       npm install
       npm run dev
     

After Creating a Project You can Find different Folders on the Project.

3. Creating Components

In the src folder, create three files:- Button.tsx, Text.tsx and Counter.tsx

On the Button.tsx

import React, { ReactNode } from 'react';

interface ButtonProps {
  onClick: () => void;
  children: ReactNode;
}

function Button({ onClick, children }: ButtonProps) {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
}

export default Button;

On the Text.tsx

import React, { ReactNode } from 'react';

interface TextProps {
  children: ReactNode;
}

function Text({ children }: TextProps) {
  return <p>{children}</p>;
}

export default Text;

On the Counter.tsx

import React, { useState } from 'react';
import Button from './Button';
import Text from './Text';

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

  return (
    <div>
      <Text>Count: {count}</Text>
      <Button onClick={() => setCount(count + 1)}>Increase</Button>
      <Button onClick={() => setCount(count - 1)}>Decrease</Button>
    </div>
  );
}

export default Counter;

4. Using Components (Block)

Now, let's use our components in App.tsx:

import React from 'react';
import Counter from './Counter';

function App() {
  return (
    <div>
      <h1>Welcome to our Playground!</h1>
      <Counter />
    </div>
  );
}

export default App;

5. Playing in Our React Playground

Now, start your app on the terminal (npm run dev) and open it in the browser (http://localhost:5173). You'll see:

• Count: This shows the count, starting from 0.

• Increase: Click this button to increase the count.

• Decrease: Click this button to decrease the count.

With these simple building blocks, you've created your interactive app! This playful approach helps in understanding how React components work together to create dynamic and engaging user interfaces. Have fun exploring and building more in your React playground! 🚀