React

1. Creating a Component (Functional): 

import React, { useState } from 'react';

const MyComponent = () => {

  const [count, setCount] = useState(0); // State hook

  const handleClick = () => {

    setCount(count + 1);

  };

  return (

    <div>

      <h1>Count: {count}</h1>

      <button onClick={handleClick}>Increment</button>

    </div>

  );

};

export default MyComponent;

2. Props:

// Parent Component

<ChildComponent name="Alice" age={30} />

.

// Child Component

const ChildComponent = (props) => {

  return (

    <p>Name: {props.name}, Age: {props.age}</p>

  );

};

3. Conditional Rendering:

{isLoggedIn ? <WelcomeMessage /> : <LoginPrompt />}

const items = ['Item 1', 'Item 2', 'Item 3'];

4. List Rendering:

Code:

<ul>

  {items.map((item, index) => (

    <li key={index}>{item}</li>

  ))}

</ul>

const items = ['Item 1', 'Item 2', 'Item 3'];

<ul>

  {items.map((item, index) => (

    <li key={index}>{item}</li>

  ))}

</ul>

useEffect Hook:

import React, { useEffect, useState } from 'react';

const DataFetcher = () => {

  const [data, setData] = useState(null);

  useEffect(() => {

    // Fetch data from an API

    fetch('https://api.example.com/data')

      .then(response => response.json())

      .then(result => setData(result));

  }, []); // Empty dependency array means it runs once on mount

  return (

    <div>

      {data ? <p>{data.message}</p> : <p>Loading...</p>}

    </div>

  );

};