Build A Dynamic React JS Interactive Simple Interactive Recipe App

Are you tired of endlessly scrolling through recipe websites, struggling to find that perfect dish? Do you dream of a personalized cooking experience where you can easily store, organize, and share your favorite recipes? In this comprehensive tutorial, we’ll dive into the world of React JS and build a dynamic, interactive recipe application. This project will not only teach you the fundamentals of React but also provide a practical, hands-on experience, equipping you with the skills to create modern, user-friendly web applications.

Why Build a Recipe App?

Building a recipe app is an excellent learning project for several reasons:

Practical Application: Recipes are relatable. Everyone eats! This provides a tangible context for understanding React concepts.
Data Handling: You’ll learn how to manage and manipulate data, a core skill in web development.
User Interface (UI) Design: Creating a visually appealing and intuitive UI is crucial, and React excels at component-based UI development.
State Management: You’ll get hands-on experience with managing application state, an essential aspect of React development.
Component Reusability: React encourages building reusable components, a fundamental principle for efficient coding.

By the end of this tutorial, you’ll have a fully functional recipe app, and a solid understanding of React’s core principles. You’ll be able to add, edit, and delete recipes, view recipe details, and potentially even implement search and filtering features. Let’s get started!

Setting Up Your React Project

Before we start coding, we need to set up our React development environment. We’ll use Create React App, a popular tool that simplifies the process of creating a React project.

Step 1: Install Node.js and npm

If you haven’t already, download and install Node.js from the official website (nodejs.org). npm (Node Package Manager) comes bundled with Node.js, so you’ll get it automatically.

Step 2: Create a React App

Open your terminal or command prompt and navigate to the directory where you want to create your project. Then, run the following command:

npx create-react-app recipe-app

This command will create a new directory called recipe-app with all the necessary files and dependencies for your React project.

Step 3: Navigate to Your Project Directory

Change your directory to the newly created project:

cd recipe-app

Step 4: Start the Development Server

Run the following command to start the development server:

npm start

This will open your app in your default web browser, usually at http://localhost:3000. You should see the default React app’s welcome screen.

Project Structure and Core Components

Now that our project is set up, let’s understand the basic structure of a typical React application and the components we will create for our recipe app.

Project Structure

The recipe-app directory created by Create React App has a specific structure. Here’s a breakdown of the key files and directories:

src/: This directory contains the source code of your application.
src/App.js: This is the main component of your application. It’s the entry point where everything starts.
src/index.js: This file renders the App component into the DOM.
src/index.css: This is where you’ll put your global styles.
public/: Contains static assets like index.html (the main HTML file) and the favicon.
package.json: Contains project metadata and dependencies.

Core Components

We’ll break down our recipe app into several components. Here’s a basic outline:

App.js: The main component. It will manage the overall state of the application and render other components.
RecipeList.js: Displays a list of recipes.
Recipe.js: Displays the details of a single recipe.
RecipeForm.js: Allows users to add or edit recipes.

Building the RecipeList Component

Let’s start by creating the RecipeList component. This component will be responsible for displaying a list of recipes.

Step 1: Create RecipeList.js

Inside the src directory, create a new file named RecipeList.js.

Step 2: Basic Component Structure

Add the following code to RecipeList.js:

import React from 'react';

function RecipeList() {
  return (
    <div className="recipe-list">
      <h2>Recipes</h2>
      <!-- Recipe items will go here -->
    </div>
  );
}

export default RecipeList;

This code defines a functional React component named RecipeList. It renders a div with the class name recipe-list and an h2 heading. We’ll add the recipe display logic later.

Step 3: Import and Render RecipeList in App.js

Open App.js and modify it to import and render the RecipeList component:

import React from 'react';
import RecipeList from './RecipeList';
import './App.css'; // Import your CSS file

function App() {
  return (
    <div className="App">
      <h1>My Recipe App</h1>
      <RecipeList />
    </div>
  );
}

export default App;

We import RecipeList and include it within the App component’s JSX. Also, make sure that you import the css file.

Step 4: Add Basic Styling (App.css)

Create a file named App.css in the src directory and add some basic styling:

.App {
  text-align: center;
  padding: 20px;
}

.recipe-list {
  margin-top: 20px;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
}

This provides basic styling for the app and the recipe list.

Step 5: Add Sample Recipe Data

To display recipes, we’ll need some data. For now, let’s create a sample array of recipe objects within the App.js component.

import React, { useState } from 'react';
import RecipeList from './RecipeList';
import './App.css';

function App() {
  const [recipes, setRecipes] = useState([
    {
      id: 1,
      name: 'Spaghetti Carbonara',
      ingredients: ['Spaghetti', 'Eggs', 'Pancetta', 'Parmesan'],
      instructions: 'Cook spaghetti. Fry pancetta. Mix eggs and cheese. Combine.',
    },
    {
      id: 2,
      name: 'Chicken Stir-Fry',
      ingredients: ['Chicken', 'Vegetables', 'Soy Sauce', 'Rice'],
      instructions: 'Stir-fry chicken and vegetables. Add soy sauce. Serve with rice.',
    },
  ]);

  return (
    <div className="App">
      <h1>My Recipe App</h1>
      <RecipeList recipes={recipes} />
    </div>
  );
}

export default App;

We’re using the useState hook to manage the recipes state. This array will hold our recipe data. We’re also passing the recipes array as a prop to the RecipeList component.

Step 6: Display Recipes in RecipeList

Now, let’s modify RecipeList.js to display the recipes. We’ll map over the recipes prop and render a Recipe component for each recipe. First, we will need to create the Recipe component.

Step 7: Create Recipe.js

Create a file named Recipe.js in the src directory.

Step 8: Basic Recipe Component

Add the following code to Recipe.js:

import React from 'react';

function Recipe({ recipe }) {
  return (
    <div className="recipe-item">
      <h3>{recipe.name}</h3>
      <p>Ingredients: {recipe.ingredients.join(', ')}</p>
      <p>Instructions: {recipe.instructions}</p>
    </div>
  );
}

export default Recipe;

This component receives a recipe prop (an individual recipe object) and displays its name, ingredients, and instructions.

Step 9: Update RecipeList.js to render Recipe components

Now, update RecipeList.js to use the Recipe component and display the recipes.

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

function RecipeList({ recipes }) {
  return (
    <div className="recipe-list">
      <h2>Recipes</h2>
      {
        recipes.map(recipe => (
          <Recipe key={recipe.id} recipe={recipe} />
        ))
      }
    </div>
  );
}

export default RecipeList;

We import the Recipe component and use the map function to iterate over the recipes array (passed as a prop). For each recipe, we render a Recipe component, passing the recipe data as a prop.

Step 10: Add Basic Styling (Recipe.css)

Create a file named Recipe.css in the src directory and add some basic styling:

.recipe-item {
  border: 1px solid #eee;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}

Step 11: Import Recipe.css and RecipeList.css in their corresponding files

Import Recipe.css in Recipe.js and RecipeList.css in RecipeList.js

// Recipe.js
import './Recipe.css';

// RecipeList.js
import './RecipeList.css';

Common Mistakes and Solutions:

Missing Key Prop: When mapping over an array in React, you must provide a unique key prop to each element. This helps React efficiently update the DOM. Make sure the key prop is unique for each recipe. In our case, we used the recipe’s id.
Incorrect Prop Names: Double-check that you are passing the correct props to your components and that you’re accessing them correctly within the components.
CSS Import Errors: Ensure you’ve imported your CSS files correctly (e.g., import './Recipe.css';) and that the class names in your CSS match the class names in your JSX.

Adding the RecipeForm Component

Now, let’s create the RecipeForm component, which will allow users to add new recipes to our app.

Step 1: Create RecipeForm.js

Create a file named RecipeForm.js inside the src directory.

Step 2: Basic Form Structure

Add the following code to RecipeForm.js:

import React, { useState } from 'react';

function RecipeForm({ onAddRecipe }) {
  const [name, setName] = useState('');
  const [ingredients, setIngredients] = useState('');
  const [instructions, setInstructions] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    const newRecipe = {
      id: Date.now(), // Generate a unique ID
      name,
      ingredients: ingredients.split(',').map(ingredient => ingredient.trim()),
      instructions,
    };
    onAddRecipe(newRecipe);
    setName('');
    setIngredients('');
    setInstructions('');
  };

  return (
    <div className="recipe-form">
      <h3>Add Recipe</h3>
      <form onSubmit={handleSubmit}>
        <label htmlFor="name">Recipe Name:</label>
        <input
          type="text"
          id="name"
          value={name}
          onChange={(e) => setName(e.target.value)}
          required
        />
        <br />
        <label htmlFor="ingredients">Ingredients (comma separated):</label>
        <input
          type="text"
          id="ingredients"
          value={ingredients}
          onChange={(e) => setIngredients(e.target.value)}
          required
        />
        <br />
        <label htmlFor="instructions">Instructions:</label>
        <textarea
          id="instructions"
          value={instructions}
          onChange={(e) => setInstructions(e.target.value)}
          required
        />
        <br />
        <button type="submit">Add Recipe</button>
      </form>
    </div>
  );
}

export default RecipeForm;

This component uses the useState hook to manage the form’s input fields (name, ingredients, instructions). It also includes a handleSubmit function that is called when the form is submitted. The onAddRecipe prop is a function passed from the parent component (App.js) that will be used to add the new recipe to the recipe list.

Step 3: Add RecipeForm to App.js

Import and render the RecipeForm component in App.js:

import React, { useState } from 'react';
import RecipeList from './RecipeList';
import RecipeForm from './RecipeForm';
import './App.css';

function App() {
  const [recipes, setRecipes] = useState([
    {
      id: 1,
      name: 'Spaghetti Carbonara',
      ingredients: ['Spaghetti', 'Eggs', 'Pancetta', 'Parmesan'],
      instructions: 'Cook spaghetti. Fry pancetta. Mix eggs and cheese. Combine.',
    },
    {
      id: 2,
      name: 'Chicken Stir-Fry',
      ingredients: ['Chicken', 'Vegetables', 'Soy Sauce', 'Rice'],
      instructions: 'Stir-fry chicken and vegetables. Add soy sauce. Serve with rice.',
    },
  ]);

  const handleAddRecipe = (newRecipe) => {
    setRecipes([...recipes, newRecipe]);
  };

  return (
    <div className="App">
      <h1>My Recipe App</h1>
      <RecipeForm onAddRecipe={handleAddRecipe} />
      <RecipeList recipes={recipes} />
    </div>
  );
}

export default App;

We import RecipeForm and render it within the App component. We also pass the handleAddRecipe function as a prop to RecipeForm. This function will be called when the form is submitted, and it will update the recipes state by adding the new recipe.

Step 4: Add Basic Styling (RecipeForm.css)

Create a file named RecipeForm.css in the src directory and add some basic styling:

.recipe-form {
  margin-top: 20px;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
}

.recipe-form label {
  display: block;
  margin-bottom: 5px;
}

.recipe-form input[type="text"],
.recipe-form textarea {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box; /* Important for width calculation */
}

.recipe-form button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.recipe-form button:hover {
  background-color: #3e8e41;
}

Step 5: Import RecipeForm.css

Import RecipeForm.css in RecipeForm.js


import './RecipeForm.css';

Common Mistakes and Solutions:

Missing Event.preventDefault(): In the handleSubmit function, make sure to call e.preventDefault() to prevent the default form submission behavior, which would cause the page to refresh.
Incorrect State Updates: When updating the recipes state, you must create a new array. Avoid directly modifying the existing recipes array. We use the spread operator (...) to create a new array with the existing recipes and the new recipe.
Incorrect Input Handling: Make sure your input fields are correctly bound to the state variables using the value and onChange props.

Adding Edit and Delete Functionality

Let’s add the ability to edit and delete recipes.

Step 1: Add Edit and Delete Buttons to Recipe.js

Modify the Recipe.js component to include edit and delete buttons:


import React from 'react';
import './Recipe.css';

function Recipe({ recipe, onDeleteRecipe, onEditRecipe }) {
  return (
    <div className="recipe-item">
      <h3>{recipe.name}</h3>
      <p>Ingredients: {recipe.ingredients.join(', ')}</p>
      <p>Instructions: {recipe.instructions}</p>
      <button onClick={() => onEditRecipe(recipe.id)}>Edit</button>
      <button onClick={() => onDeleteRecipe(recipe.id)}>Delete</button>
    </div>
  );
}

export default Recipe;

We’ve added two buttons: “Edit” and “Delete”. We will pass functions to handle these actions via props, onDeleteRecipe and onEditRecipe. We will also import the css file.

Step 2: Implement Delete Functionality in App.js

In App.js, implement the handleDeleteRecipe function and pass it as a prop to Recipe.


import React, { useState } from 'react';
import RecipeList from './RecipeList';
import RecipeForm from './RecipeForm';
import './App.css';

function App() {
  const [recipes, setRecipes] = useState([
    {
      id: 1,
      name: 'Spaghetti Carbonara',
      ingredients: ['Spaghetti', 'Eggs', 'Pancetta', 'Parmesan'],
      instructions: 'Cook spaghetti. Fry pancetta. Mix eggs and cheese. Combine.',
    },
    {
      id: 2,
      name: 'Chicken Stir-Fry',
      ingredients: ['Chicken', 'Vegetables', 'Soy Sauce', 'Rice'],
      instructions: 'Stir-fry chicken and vegetables. Add soy sauce. Serve with rice.',
    },
  ]);

  const handleAddRecipe = (newRecipe) => {
    setRecipes([...recipes, newRecipe]);
  };

  const handleDeleteRecipe = (id) => {
    setRecipes(recipes.filter(recipe => recipe.id !== id));
  };

  return (
    <div className="App">
      <h1>My Recipe App</h1>
      <RecipeForm onAddRecipe={handleAddRecipe} />
      <RecipeList recipes={recipes} onDeleteRecipe={handleDeleteRecipe} />
    </div>
  );
}

export default App;

We’ve added the handleDeleteRecipe function. It takes a recipe ID as an argument and filters the recipes array to remove the recipe with the matching ID. We then pass this function to the RecipeList component.

Step 3: Pass onDeleteRecipe prop to RecipeList.js

In RecipeList.js, receive the onDeleteRecipe prop and pass it to the Recipe component:


import React from 'react';
import Recipe from './Recipe';
import './RecipeList.css';

function RecipeList({ recipes, onDeleteRecipe }) {
  return (
    <div className="recipe-list">
      <h2>Recipes</h2>
      {
        recipes.map(recipe => (
          <Recipe
            key={recipe.id}
            recipe={recipe}
            onDeleteRecipe={onDeleteRecipe}
          />
        ))
      }
    </div>
  );
}

export default RecipeList;

Step 4: Pass onDeleteRecipe prop to Recipe.js

In Recipe.js, receive the onDeleteRecipe prop and pass it to the Recipe component:


import React from 'react';
import './Recipe.css';

function Recipe({ recipe, onDeleteRecipe }) {
  return (
    <div className="recipe-item">
      <h3>{recipe.name}</h3>
      <p>Ingredients: {recipe.ingredients.join(', ')}</p>
      <p>Instructions: {recipe.instructions}</p>
      <button onClick={() => onDeleteRecipe(recipe.id)}>Delete</button>
    </div>
  );
}

export default Recipe;

Step 5: Implement Edit Functionality (Outline)

Implementing the edit functionality involves several steps:

State for Editing: Add a state variable in App.js to track the recipe being edited.
Edit Form: Create a form (similar to RecipeForm) to allow users to edit the recipe details.
Populate the Form: When the edit button is clicked, populate the edit form with the recipe’s current data.
Update Recipe: When the edit form is submitted, update the recipe in the recipes array.

Due to the length constraints of this tutorial, the full implementation of the edit feature is beyond the scope. However, the steps above outline the key tasks involved.

Common Mistakes and Solutions:

Incorrect Prop Drilling: Make sure you correctly pass props from parent to child components. For example, onDeleteRecipe needs to be passed from App.js to RecipeList.js and then to Recipe.js.
State Updates: When deleting a recipe, ensure you’re creating a new array using the filter method to avoid directly mutating the original recipes array.

Summary/Key Takeaways

In this tutorial, we’ve built a functional recipe application using React. You’ve learned how to:

Set up a React project using Create React App.
Create and structure React components.
Manage application state using the useState hook.
Pass data between components using props.
Handle form submissions.
Add and delete items from a list.

This tutorial provides a solid foundation for building more complex React applications. You can extend this app by adding features like:

Recipe Search and Filtering
User Authentication
Recipe Categories
Local Storage or a Backend Database

FAQ

Q: What is React?

A: React is a JavaScript library for building user interfaces. It’s component-based, which means you build UIs by combining reusable components.

Q: What is JSX?

A: JSX is a syntax extension to JavaScript that allows you to write HTML-like structures within your JavaScript code. It makes it easier to define the structure of your UI.

Q: What are props?

A: Props (short for properties) are a way to pass data from a parent component to a child component. They are read-only within the child component.

Q: What is state?

A: State is a data structure that represents the component’s internal data. When the state changes, React re-renders the component to reflect the updated data.

Q: How do I handle form submissions in React?

A: You can handle form submissions by using the onSubmit event on the <form> element and creating a function to handle the form data. Use the useState hook to manage the form’s input fields.

Building a recipe app in React is a rewarding project that allows you to apply core React concepts in a practical way. With the knowledge gained from this tutorial, you are well-equipped to create more complex and interactive web applications. Explore further by adding more features. Happy coding!

Build a Dynamic React JS Interactive Simple Interactive Recipe App

Why Build a Recipe App?

Setting Up Your React Project

Project Structure and Core Components

Project Structure

Core Components

Building the RecipeList Component

Adding the RecipeForm Component

Adding Edit and Delete Functionality

Summary/Key Takeaways

FAQ

More posts

Why Build a To-Do List App?

Build a Simple Interactive Quiz with HTML: A Beginner’s Guide

Build a Simple To-Do List App with HTML: A Beginner’s Guide

Build a Simple Website with HTML: A Beginner’s Guide