Is React a Frontend or Backend library? Created and maintained by Facebook, React is a front-end library that runs on a browser. So We will make a ReactJs Food Recipe Web App

Learn more about ReactJS please visit its official website https://reactjs.org/
You can download the Project : Download Project
Now We will use an API for getting all the data from website (https://developer.edamam.com/) . To get API from this website you will have to set up an account on this site (https://developer.edamam.com/) .
So first install some packages for this project ( npm install axios and npm instal lweb-vitals).
First we will create a App.js file
App.js
import './App.css';
import React, {useState , useEffect} from 'react';
import Header from './components/Header';
import Recipes from './components/Recipes';
import Axios from 'axios';
function App() {
const [search,setSearch] = useState("chicken");
const [recpies,setRecipes] = useState([]);
const APP_ID = "Your ID"; // Get API ID from here https://developer.edamam.com/
const APP_KEY = "Your API Key"; // Get API KEY from here https://developer.edamam.com/
useEffect(() => { getRecipes();},[]);
const getRecipes = async()=> {
const result = await Axios.get(`https://api.edamam.com/search?q=chicken&app_id=${APP_ID}&app_key=${APP_KEY}&from=0&to=3&calories=591-722&health=alcohol-free`)
setRecipes(result.data.hits);
}
const onInputChange = e => {
console.log(e.target.value);
}
return (
<div className="App">
<Header mysearch={search} onInputChange = {onInputChange}/>
<div className="container">
<Recipes recipes={recpies}/>
</div>
</div>
);
}
export default App;
Now make a folder with name components ( src/components/Header.js )
Header.js
import React from "react";
const Header = props => {
const {search, onInputChange}= props;
return (
<div classname="jumbotron py-5" style="{{backgroundColor:"#969696;"}}">
<h4 classname="display-4">
<span classname="material-icons brand-icon">fastfood</span> Food Recipe</h4>
<div class="input-group mb-3 w-50 mx-auto">
<input type="text" class="form-control" placeholder="Search Recipie" value="{search}" onchange="{onInputChange}">
<button class="btn btn-light">Search Recipe</button>
</div>
</div>
);
};
export default Header;
Now we will create a file insode the components folder ( src/components/Recipes.js )
Recipes.js
import React from "react";
import RecipeItems from './RecipeItems'
const Recipes = props =>{
const { recipes }= props;
return(
<div class="row">
{recipes.map(recipe =>
<RecipeItems
name={recipe.recipe.label}
image = {recipe.recipe.image}
ingredientLines = {recipe.recipe.ingredientLines}
/>
)}
</div>
);
};
export default Recipes;
Now we will create another file in same folder ( src/components/RecipeItems.js )
RecipeItems.js
import React from "react";
const RecipeItems = props => {
const { name, image, ingredientLines} = props;
return(
<div class="col-md-4">
<div class="card">
<img src={image} class="img-fluid"/>
<div class="card-body">
<h4>{name}</h4>
</div>
<ul class="list-group">
{ingredientLines.map(ingredient => (
<li class="list-group-item">
{ingredient}
</li>
))}
</ul>
</div>
</div>
);};
export default RecipeItems;
Now you will try this project on browser .