Demo of Cocktails App Using React Js: A Mini Project in Hindi | Part 1

Welcome to our tutorial on creating a project demo for a Cocktails App using React Js. In this tutorial, we will be building a simple React mini project where users can browse and search for different cocktail recipes.

Before we dive into the coding part, make sure you have node.js installed on your computer. You can download and install it from the official website if you haven’t already.

Let’s start by creating a new React project. Open your terminal and run the following commands:

npx create-react-app cocktails-app
cd cocktails-app
npm start

This will create a new React project called "cocktails-app" and start the development server. You can access your project at http://localhost:3000/.

Next, we need to install some additional packages for our project. Run the following commands in your terminal:

npm install axios
npm install react-router-dom

The axios package will help us make API requests to fetch cocktail data, and react-router-dom will be used for routing within our app.

Now, let’s create the basic structure of our project. Inside the src folder, create a new folder called components. Inside this folder, create a new file called Header.js and add the following code:

import React from 'react';

const Header = () => {
  return (
    <header>
      <h1>Cocktails App</h1>
    </header>
  );
};

export default Header;

Next, create a new file called Footer.js in the components folder and add the following code:

import React from 'react';

const Footer = () => {
  return (
    <footer>
      <p>&copy; 2021 Cocktails App</p>
    </footer>
  );
};

export default Footer;

Now, let’s create the main component of our app. Create a new file called Home.js in the components folder and add the following code:

import React from 'react';

const Home = () => {
  return (
    <div>
      <h2>Welcome to Cocktails App!</h2>
      <p>Search for your favorite cocktail recipes here.</p>
    </div>
  );
};

export default Home;

We will also create a CocktailList.js component in the components folder to display a list of cocktails. Add the following code to the CocktailList.js file:

import React from 'react';

const CocktailList = ({ cocktails }) => {
  return (
    <div>
      {cocktails.map(cocktail => (
        <div key={cocktail.id}>
          <h3>{cocktail.name}</h3>
          <p>{cocktail.description}</p>
          <img src={cocktail.image} alt={cocktail.name} />
        </div>
      ))}
    </div>
  );
};

export default CocktailList;

Now, we will create a Search.js component in the components folder to allow users to search for cocktails. Add the following code to the Search.js file:

import React, { useState } from 'react';

const Search = ({ setSearchTerm }) => {
  const [query, setQuery] = useState('');

  const handleChange = (e) => {
    setQuery(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    setSearchTerm(query);
    setQuery('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Search for cocktails..."
        value={query}
        onChange={handleChange}
      />
      <button type="submit">Search</button>
    </form>
  );
};

export default Search;

In the next part of this tutorial, we will fetch cocktail data from an API and display it in our app. Stay tuned for Part 2!