CreateComponents - himanshimahankal/React-Study GitHub Wiki

Components

Create & export components

file src\components\TodoItem.jsx

import React from "react";

const TodoItem = (props) => {
    return (
        <li className="todo-item"  >
            <span>
            <input type="checkbox" />
            <span className="todo-item-text"  >{props.text}</span>
            </span>
            <p>...</p>
        </li>
    )
} 

export default TodoItem

Use component

file src\pages\Home.jsx

import React from "react";
import TodoItem from "../components/TodoItem";

export default function Home() {
  return (
    <div className="todo-container">
      <TodoItem text="Eat"/> 
      <TodoItem text="Code"/> 
      <TodoItem text="Play"/> 
      <TodoItem text="Stude"/> 
      <TodoItem text="Sleep again"/> 
    </div>
  );
};
⚠️ **GitHub.com Fallback** ⚠️