Reactron

Setting Up Your Environment

Make sure you have Node.js and npm installed. You can create a new React app using Create React App by running:

bashCopy codenpx create-react-app my-app
cd my-app

Step 2: Creating the Basic Components

We’ll create a simple application with two main components: ItemList and AddItem.

1. Create ItemList.js

In the src folder, create a new file called ItemList.js:

jsxCopy code// src/ItemList.js
import React from 'react';

const ItemList = ({ items }) => {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};

export default ItemList;

2. Create AddItem.js

Now create another file called AddItem.js:

jsxCopy code// src/AddItem.js
import React, { useState } from 'react';

const AddItem = ({ onAdd }) => {
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (inputValue) {
      onAdd(inputValue);
      setInputValue('');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="Add new item"
      />
      <button type="submit">Add</button>
    </form>
  );
};

export default AddItem;

Step 3: Main Application Component

Now, let’s tie everything together in App.js.

jsxCopy code// src/App.js
import React, { useState } from 'react';
import ItemList from './ItemList';
import AddItem from './AddItem';

const App = () => {
  const [items, setItems] = useState([]);

  const addItem = (item) => {
    setItems([...items, item]);
  };

  return (
    <div>
      <h1>My Item List</h1>
      <AddItem onAdd={addItem} />
      <ItemList items={items} />
    </div>
  );
};

export default App;

Step 4: Run Your Application

Now you can start your application. In your terminal, run:

bashCopy codenpm start

Step 5: Explore and Enhance

You now have a basic React application that allows you to add items to a list. You can enhance it by adding features like:

• Removing items
• Editing items
• Styling with CSS
• Persisting data to local storage

Summary

This tutorial introduced you to the basics of React by building a simple item list app. You learned how to manage state and create reusable components. As you get comfortable, try expanding the app with more features and styling!