Skip to main content
Advertisement

React: Core Concepts and Hooks (Step 2)

1. Components and JSX​

React components are JavaScript functions that define the UI. Structure is expressed using JSX, which allows for HTML-like syntax within JavaScript.

// Example of a functional component
const Welcome = ({ name }) => {
  return (
    <div className="card">
      <h1>Hello, {name}!</h1>
      <p>Welcome to the world of React.</p>
    </div>
  );
};

2. State (State Management)​

The useState hook is used to handle data that changes over time within a component.

import { useState } from 'react';

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

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

3. Props (Property Passing)​

Props are the channels through which a parent component passes data to its child components.

  • Important: Props are read-only and cannot be modified by the child component.

4. Effect (Handling Side Effects)​

The useEffect hook is used to handle side-effect logic such as data fetching, setting up subscriptions, or manually modifying the DOM.

useEffect(() => {
  console.log("This runs every time the component renders.");
}, [count]); // Runs whenever the dependency 'count' changes
Advertisement
Advertisement