React Props And State Complete Guide

Step 1: Setting Up a React Environment

First, ensure you have Node.js and npm (Node Package Manager) installed on your machine. Then, create a new React application using create-react-app.

npx create-react-app react-props-state-demo
cd react-props-state-demo
npm start

This will start the development server and open your new app in the browser.

Step 2: Understanding React Props

Props (short for properties) are a way to pass data from one component to another in React. They are read-only and immutable, meaning you cannot change them inside the component.

Example: Passing a Name as a Prop

ParentComponent.js: Create a parent component that passes a name to a child component.

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

function ParentComponent() {
  return (
    <div>
      <h1>Parent Component</h1>
      <ChildComponent name="Alice" />
    </div>
  );
}

export default ParentComponent;

ChildComponent.js: Create a child component that receives the name as a prop and displays it.

import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      <h2>Hello, {props.name}!</h2>
    </div>
  );
}

export default ChildComponent;

App.js: Import and use ParentComponent in your main App component.

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

function App() {
  return (
    <div className="App">
      <ParentComponent />
    </div>
  );
}

export default App;

When you run the app, you should see "Hello, Alice!" displayed.

Step 3: Understanding React State

State is a local data storage within a component that can change over time. Unlike props, state is mutable and can be updated using the setState method in class components or the useState hook in functional components.

Example: Using State in a Functional Component

Counter.js: Create a functional component that uses state to keep track of a counter.

import React, { useState } from 'react';

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

  // Function to increment count
  const incrementCount = () => {
    setCount(count + 1);
  };

  // Function to decrement count
  const decrementCount = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={incrementCount}>Increment</button>
      <button onClick={decrementCount}>Decrement</button>
    </div>
  );
}

export default Counter;

App.js: Import and use Counter in your main App component.

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

function App() {
  return (
    <div className="App">
      <ParentComponent />
      <Counter />
    </div>
  );
}

export default App;

When you run the app, you should see a counter that you can increment and decrement using the buttons.

Step 4: Combining Props and State

Let's combine props and state by creating a more complex component that accepts initial count as a prop and uses state to manage the count.

DynamicCounter.js: Create a dynamic counter component.

import React, { useState } from 'react';

function DynamicCounter(props) {
  // Initialize state with initialCount prop
  const [count, setCount] = useState(props.initialCount);

  // Function to increment count
  const incrementCount = () => {
    setCount(count + 1);
  };

  // Function to decrement count
  const decrementCount = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h1>Dynamic Counter: {count}</h1>
      <button onClick={incrementCount}>Increment</button>
      <button onClick={decrementCount}>Decrement</button>
    </div>
  );
}

export default DynamicCounter;

App.js: Import and use DynamicCounter in your main App component.

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

function App() {
  return (
    <div className="App">
      <ParentComponent />
      <Counter />
      <DynamicCounter initialCount={10} />
    </div>
  );
}

export default App;

When you run the app, you should see a dynamic counter starting at 10 which you can increment and decrement.

Conclusion