🚀 Start Learning React - Code With Harry

🌟 Why Use React?

🔁 Reusable Components: In React, you can create reusable components, like a navbar, and use it on every page of your application.
⚡ State Management: React allows you to use states, so when you update a variable, it reflects across the page dynamically.
🧩 Component-Based Architecture: Split your app into multiple components and reuse them wherever needed.

🔍 Key Concepts React

📚 `ClassName` vs `Class`

Why use className instead of class?
Since React uses JavaScript to create applications, if you use class, React will interpret it as an Object-Oriented Programming (OOP) class instead of a CSS selector. Therefore, we use className for styling.

🎛️ `useState`

What is useState?
A special variable in React that can be updated dynamically, and these updates are reflected in the DOM.

🧩 `{ }` in React

Why use curly braces { }?
In React, curly braces allow you to include JavaScript expressions within your HTML (JSX). Without them, React will treat the content as plain HTML.

📂 `App.js`

The App.js file is the main component of your React application.
It is the entry point that renders when you run your app.

🛠️ Components

A component in React is anything that appears on your application.
Examples:
- A navbar
- A card
- A footer

🔗 Props

Props allow you to pass data from one component to another.
They enable communication between components and make them more dynamic.

📂 What is a React App?

A React App is a project built using React, a popular JavaScript library for building user interfaces.

When you create a React app (using tools like Create React App or Vite), it provides a ready-to-use folder structure and essential configurations for development. 📁

⚡ What is Vite?

Vite is a fast and modern build tool that provides a smoother development experience for React projects. 🚀
It is much faster than Create React App (CRA) and optimized for modern web development. 🔥

🛠️ Creating and Running the Project

in order to create a react project using vite you have to go to Vite and copy below commands

npm create vite@latest # create a react latest project 
npm install i # install all the required dependencies
npm run dev # run the project

If you're using npm to run your React project and encounter issues (e.g., npm run dev throws an error), it likely means npm is not installed properly. ❌
To fix this, you can install dependencies and start the project using these commands:
```
npm i    # Shortcut for npm install
npm run dev
```

🔑 Key Notes:
npm i: Installs all the required dependencies. 📦
npm run dev: Starts your development server. 🌐

📅 Day 1 - React Learning

🌟 Key Points

React components are function-based.
JSX: JSX is like HTML but acts as an entry point for React, similar to index.html in traditional HTML.

⚡ Difference Between JSX and HTML

JSX is like HTML with JavaScript, but it is more strict. For example:

<!-- In HTML -->
<img src="home.jpg"> <!-- No error -->

<!-- In JSX -->
<img src="home.jpg"> <!-- This will throw an error -->
<img src="{home.jpg}" /> <!-- Correct way: self-closing tag -->

📋 Rules in React

Proper Tag Closing:
Always close tags correctly. For self-closing tags, ensure they are properly closed:
- ✅ <img />
- ❌ <img>
Wrapper for Content:
All component content must be wrapped in a single parent element, like:
- <div> or <> (React Fragment).
Use className:
Use className="" instead of class to add CSS classes to elements.
Start the App:
Run the application using:
```
npm start
```

✨ Props in React

Props: Props is short for "properties".
- Props are used to pass data (properties or values) from one component to another.
- In simple terms, props help in passing data between components.
📚 Definition
Props are attributes passed from a parent component to a child component and are accessed using props.propertyName.
🛠️ Usage
Props are passed as attributes in the JSX tag in the parent component.
They are received as parameters in the target child component.
📋 Example: Passing Props

🏗️ Passing Props from `App.jsx`:

<Card title="Card 1" Description="Card 2 Description" />

Day 2

⚛️ Hooks in React

React Hooks are special functions that let you use React features, like state and lifecycle methods, in functional components.

🤔 What are Hooks?

🛠 React Hooks allow you to add functionality to your functional components without using class components.
🔄 They make it easier to use state, effects, and other React features.
📦 Think of hooks as tools that enhance your components.

🌟 Commonly used Hooks in React ⚛️

🔧 useState() – Manage State in Functional Components
The useState() The React useState Hook allows us to track state in a function component.
State generally refers to data or properties that need to be tracking in an application. 🎉
State is like a variable that React keeps track of.
It helps your components remember things, like user input or a counter value.

🛠 How Does `useState()` Work?

When you use useState(), it gives you two things:

🧮 The current value of the state.
🔄 A function to update the value.

🚀 Example:

import React, { useState } from "react";

function Counter() {
  // Initialize state with 0
  const [count, setCount] = useState(0);

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

count is the current value of the state.
setCount is a function to update the state.
The useState Hook can be used to keep track of strings, numbers, booleans, arrays, objects, and any combination of these!
We could create multiple state Hooks to track individual values.

🚀 Example:

import React, { useState } from "react";

function Car() {
  const [brand, setBrand] = useState("Ford");
  const [model, setModel] = useState("Mustang");
  const [year, setYear] = useState("1964");
  const [color, setColor] = useState("red");
}

📝 How to Change the Title of the Page in React ⚛️

🌐 Open the index.html file located in the public folder.
🖊️ Find the <title> tag inside the <head> section.
✏️ Change the title to whatever you want, like this:
```
<title>Zahid Khattak React App</title>
```

Day 3

UseEffect ( ) Hook in React⚛️

The useEffect hook in React is used to manage side effects in functional components. Side effects include tasks like:

1️⃣ Fetching data from an API.
2️⃣ Subscribing to a service or event.
3️⃣ Updating the document title.
4️⃣ Setting up timers.

📝 Basic Snippet of `useEffect`

useEffect(() => {
  alert('Welcome to my page');
}, []);

The empty array [ ] means the effect will only run once, right after the component is displayed on the screen (like a "welcome" message).
💡 In simple terms, the empty array ensures the code inside the useEffect runs once when the page loads in the browser.
🔄 You can use multiple useEffect() hooks within a single component.

🔄 Using Multiple `useEffect()`

const [count, setCount] = useState(0); // useState for changing the state of 'count'
const [first, setFirst] = useState(0); // useState for changing the state of 'first'

// 🛎️ useEffect for displaying the alert message once when the page just loads
useEffect(() => {
  alert('Welcome to my page');
}, []); 
// 📝 Here, the empty array means the effect will only run once, 
// right after the component is displayed on the screen.

useEffect(() => {
  alert('Count was changed');
}, [count]); 
// 📝 Here, 'count' is passed into the array, so the useEffect runs 
// only when there is a change in the 'count' state.

useEffect(() => {
  alert('First was changed');
}, [first]); 
// 📝 Here, 'first' is passed into the array, so the useEffect runs 
// only when there is a change in the 'first' state.

The empty array [ ] means the effect will only run once, right after the component is loaded on the screen.
Passing a state or prop to the array means the effect will only run when there is a change in the passed state or prop.
If changes occur only in the first state, the body of the useEffect for first will run, and not the other useEffect hooks.

🛠️ Tips & Tricks for Creating React Projects

⚡ Time-saving Shortcut:

code -r project-name # Open the project in the current working directory

ZAHIDKHATTAKCS/Learning-React-Sigma-Web-Development-CodeWithHarry

🚀 Start Learning React - Code With Harry

🌟 Why Use React?

🔍 Key Concepts React

📚 `ClassName` vs `Class`

🎛️ `useState`

🧩 `{ }` in React

📂 `App.js`

🛠️ Components

🔗 Props

📂 What is a React App?

⚡ What is Vite?

🛠️ Creating and Running the Project

📅 Day 1 - React Learning

🌟 Key Points

⚡ Difference Between JSX and HTML

📋 Rules in React

✨ Props in React

📚 Definition

🛠️ Usage

📋 Example: Passing Props

🏗️ Passing Props from `App.jsx`:

Day 2

⚛️ Hooks in React

🤔 What are Hooks?

🌟 Commonly used Hooks in React ⚛️

🛠 How Does `useState()` Work?

🚀 Example:

🚀 Example:

📝 How to Change the Title of the Page in React ⚛️

Day 3

UseEffect ( ) Hook in React⚛️

📝 Basic Snippet of `useEffect`

🔄 Using Multiple `useEffect()`

🛠️ Tips & Tricks for Creating React Projects

Best VSCode Extension for React

1. ES7+React/Redux/React/React-Nativesnippets

Happy Learning! 📚✨

ZAHIDKHATTAKCS/Learning-React-Sigma-Web-Development-CodeWithHarry

🚀 Start Learning React - Code With Harry

🌟 Why Use React?

🔍 Key Concepts React

📚 ClassName vs Class

🎛️ useState

🧩 { } in React

📂 App.js

🛠️ Components

🔗 Props

📂 What is a React App?

⚡ What is Vite?

🛠️ Creating and Running the Project

📅 Day 1 - React Learning

🌟 Key Points

⚡ Difference Between JSX and HTML

📋 Rules in React

✨ Props in React

📚 Definition

🛠️ Usage

📋 Example: Passing Props

🏗️ Passing Props from App.jsx:

Day 2

⚛️ Hooks in React

🤔 What are Hooks?

🌟 Commonly used Hooks in React ⚛️

🛠 How Does useState() Work?

🚀 Example:

🚀 Example:

📝 How to Change the Title of the Page in React ⚛️

Day 3

UseEffect ( ) Hook in React⚛️

📝 Basic Snippet of useEffect

🔄 Using Multiple useEffect()

🛠️ Tips & Tricks for Creating React Projects

Best VSCode Extension for React

1. ES7+React/Redux/React/React-Nativesnippets

Happy Learning! 📚✨

📚 `ClassName` vs `Class`

🎛️ `useState`

🧩 `{ }` in React

📂 `App.js`

🏗️ Passing Props from `App.jsx`:

🛠 How Does `useState()` Work?

📝 Basic Snippet of `useEffect`

🔄 Using Multiple `useEffect()`