1. Introduction to React.js

1. React.js Overview

   React.js is a JavaScript library for building user interfaces, primarily for single-page applications where UI updates dynamically without reloading the page

   It is component-based and allows developers to create reusable UI components

2. Components in react

   Components are the building blocks of a React application. They allow us to divide the UI into independent, reusable pieces.

   Types of Components in React.js

   1. Functional Components

   2. Class Components (Deprecated in React 18 for new projects)

3. Functional Components

   Functional components are JavaScript functions that return JSX

   They do not have their own state by default but can use React Hooks like useState and useEffect to manage state and side effects.

   Example of functional component:

    import React from "react";
   
    function Greeting(props) {
      return <h1>Hello, {props.name}!</h1>;  // this is jsx code (not html)
    }
    export default Greeting;  // export this
   

   Usage of above component

    import React from "react";
    import Greeting from "./Greeting";  // import that compoentn
   
    function App() {
      return <Greeting name="Ayush" />;  // write that component here
    }
   
    export default App;
   

4. JSX(Javascript XML)

   JSX (JavaScript XML) is a syntax extension for JavaScript used in React to write HTML-like structures inside JavaScript code.

   It makes code more readable and allows dynamic content rendering using {}.

    const element = <h1>Welcome, {username}!</h1>;
   

   • JSX must return a single parent element.

   • Self-closing tags like <br /> or <img /> are required.

   • Expressions inside JSX must be inside {}.

5. Props vs State in React.js

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

//state
import React, { useState } from "react";

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

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

6. Conditional Rendering

   Conditional rendering means rendering different UI elements based on conditions.

//using if-else
function UserGreeting(props) {
  if (props.isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please log in.</h1>;
  }
}

//using ternary operaror
function UserGreeting(props) {
  return props.isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in.</h1>;
}

Interview Questions

1. What is compositon in react ?

   Composition is a pattern where components contain other components instead of using inheritance. It helps in code reusability and better organization.

    function Card({ children }) {
      return <div className="card">{children}</div>;
    }
   

2. Why do we use key property in react list ?

   The key prop helps React efficiently update the UI by identifying which elements changed, were added, or removed. It should be unique among siblings.

    {items.map(item => <li key={item.id}>{item.name}</li>)}