Guided: Build a Recipe Sharing App in React

In this React guided lab, you'll enhance a starter app into a recipe sharing platform for Globomantics. The guided steps in this lab will cover React fundamentals such as component creation, state management, props handling, and form interactions.

You can validate your tasks by clicking the checkboxes next to them. If you need help or want to compare solutions, a solution directory is provided. You can launch the app at any time during the lab by doing the following:

1. Click the Run button at the bottom right of the Terminal.
2. View the web page by clicking this link: {{localhost:3000}}.

• You can also refresh the Web Browser tab to view the page once the app is running. It may take a moment for the page to load.

In this part of the lab, you'll be building a core piece of the app - the RecipeList component. This component will be responsible for displaying a list of recipes. You will also integrate this component into the main application (App.js). Now that you have created the RecipeList.js file, it's time to define the RecipeList component within it. You'll start by making RecipeList accept two props: recipes and selectRecipe. The recipes prop will be an array of recipe objects that you'll be displaying in the list. The selectRecipe prop is a function intended for setting the currently viewed recipe. With the RecipeList component in place, the next step is to dynamically render the list of recipes. You'll achieve this by iterating over the recipes prop using the map function. This approach not only renders the recipe names, but also sets the stage for further interactivity, such as selecting a recipe to view more details. After rendering the recipe names, the next step is to make these items interactive. By adding an onClick event handler to each recipe's <div>, you enable users to interact with the list. This handler will call the selectRecipe function, passing the clicked recipe's data. This functionality is foundational for allowing users to select a recipe and view more details about it. Before integrating the RecipeList component, it's important to prepare the App component with the necessary state. This involves using React's useState hook to create a state variable that will store your recipes. Initializing this state with a couple of example recipes will later allow you to see how RecipeList renders this data. With the state set up, the next step is to import the RecipeList component into App.js. Additionally, you'll define a placeholder function named selectRecipe. This function will be crucial for handling user interactions with the recipe list, but its detailed implementation will come later. Now that you have your state and functions ready, it's time to render the RecipeList component within App.js. By passing the recipes state and selectRecipe function as props, you're connecting App's state to RecipeList, enabling it to display the list of recipes and respond to user actions.

In this step, you'll develop the RecipeDetails component to show detailed information about a selected recipe, including its name, ingredients, and instructions. You'll first create the RecipeDetails component and then update App.js to manage state and conditionally render the recipe details based on user selection from the RecipeList. Now, you'll focus on enhancing the RecipeDetails component to display a recipe's name, ingredients, and instructions. This task is aimed at presenting these key details clearly, making the recipe user-friendly. In the next task, you'll update App.js to include a state variable that keeps track of the currently selected recipe. Additionally, you'll modify the selectRecipe function to update this state, effectively managing which recipe is selected at any given time. This addition is key to dynamically displaying recipe details based on user interactions. Next, you'll implement conditional rendering within your React application. Conditional rendering in React is a powerful technique used to display components or elements based on certain conditions. In this specific task, the condition revolves around whether a recipe is selected or not.

The core idea here is to render the RecipeDetails component only when there is a recipe currently selected, i.e., when the recipe state variable is not null. This dynamic rendering approach ensures that the RecipeDetails component and its content are only shown to the user when relevant, enhancing the application's interactivity and user experience.

To achieve this, you will utilize the existing recipe state in App.js. Based on its value (whether it's null or holds a recipe object), the RecipeDetails component will be rendered accordingly. You can do this by using the && operator, e.g:

conditionThatMustBeTrue && <Component />

This would only render Component if conditionThatMustBeTrue was a truthy value. It's time is to test your application's functionality! Ensure that selecting a recipe from the list updates the displayed details in the RecipeDetails component.

In this step, you'll be enhancing the functionality of your Recipe Sharing App by adding a form that allows users to submit new recipes. This involves creating a RecipeForm component, managing form state, and handling a form submission to update the main application state with the new recipe. Now that the RecipeForm component has been created, the next step is to enhance its functionality by adding form elements. This involves integrating input fields for the recipe's name, ingredients, and instructions. These additions are key for enabling users to input and submit their own recipes, making the form an interactive and essential feature of your application. Now that you have your form component, the next step is to create its internal state. This will allow you to track the user's input as they fill out the form. Now, you will bind each input field to its corresponding state variable using the value attribute and set up onChange handlers. These handlers will update the state variables whenever the user types into the fields, ensuring the component reacts to user input. To enable users to submit their recipes, you will need to add a submit button to your form. Hitting this button is what will allow you to kick off the onSubmit handler you will create in later tasks. In the last step you created and implemented a submit button, but currently it doesn't do much. Let's create a handleSubmit function that will allow you to handle the form submissions, using custom logic that you implement. The focus now is on finalizing the form submission process. After submitting the recipe data, it's important to clear the form fields to allow for new entries. This is achieved by resetting the state variables name, ingredients, and instructions to empty strings. Resetting these fields ensures a clean state for the next submission, enhancing user experience by preventing the need to manually clear the form after each entry.

Furthermore, attaching the handleSubmit function to the form's onSubmit event is crucial. This linkage ensures that when the form is submitted, your custom handleSubmit function is triggered instead of the default form submission behavior. It allows the application to handle the form data according to the defined logic in handleSubmit, which includes both processing the current input and preparing the form for subsequent entries. This step encapsulates the core functionality of form handling in React, combining state management with event handling for effective and responsive user interactions. Next, you'll integrate the RecipeForm into your application, allowing for the addition of new recipes. When you update the recipes state in the addRecipe function, you'll use the spread operator. This operator is key in React's state management, as it enables you to create a new array by spreading out the elements of the existing recipes array and then adding the new recipe to it. This approach ensures that your state updates immutably, maintaining React's state consistency and reactivity. By passing addRecipe as a prop to RecipeForm, you enable the form to submit new recipes, which then get displayed in your recipe list.

You're almost there! As a final task, you need to import the RecipeForm component that you've been building, render it, and pass it the necessary props so that it can update the state in App.js Congratulations on successfully building a basic recipe sharing app for Globomantics! You've mastered the intricacies of React, from setting up components to managing state and handling form submissions. To enhance your app's appearance, you can create a corresponding CSS file for each component in src/components/styles. Import these CSS files into their respective components (e.g., import RecipeList.css in RecipeList.js) to customize the look and feel of your app.

This application is a great foundation for building more complex applications. Keep experimenting and refining your skills. Happy coding!