Reactify

Setting Up Your Environment

If you haven’t set up a React project yet, you can use Create React App:

bashCopy codenpx create-react-app reactify
cd reactify

Step 2: Create Basic Components

We’ll create two main components: SongList and AddSong.

1. Create SongList.js

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

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

const SongList = ({ songs }) => {
  return (
    <ul>
      {songs.map((song, index) => (
        <li key={index}>{song}</li>
      ))}
    </ul>
  );
};

export default SongList;

2. Create AddSong.js

Now create another file called AddSong.js:

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

const AddSong = ({ 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 a new song"
      />
      <button type="submit">Add</button>
    </form>
  );
};

export default AddSong;

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 SongList from './SongList';
import AddSong from './AddSong';

const App = () => {
  const [songs, setSongs] = useState([]);

  const addSong = (song) => {
    setSongs([...songs, song]);
  };

  return (
    <div>
      <h1>My Playlist</h1>
      <AddSong onAdd={addSong} />
      <SongList songs={songs} />
    </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 songs to a playlist. You can enhance it by adding features like:

• Removing songs
• Persisting the playlist to local storage
• Adding additional song details (artist, album)

Summary

This tutorial walked you through creating a simple React application with a playlist feature. You learned how to manage state and create reusable components in React.