Finished creating project without using create-react-app, i.e. following 5.5.1, 5.5.2
parent
f027246188
commit
1418bb58ed
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"presets": ["@babel/preset-env", "@babel/preset-react"]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,72 @@
|
||||||
|
# File created using '.gitignore Generator' for Visual Studio Code: https://bit.ly/vscode-gig
|
||||||
|
|
||||||
|
# Created by https://www.toptal.com/developers/gitignore/api/windows,visualstudiocode,react
|
||||||
|
# Edit at https://www.toptal.com/developers/gitignore?templates=windows,visualstudiocode,react
|
||||||
|
|
||||||
|
### react ###
|
||||||
|
.DS_*
|
||||||
|
*.log
|
||||||
|
logs
|
||||||
|
**/*.backup.*
|
||||||
|
**/*.back.*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
bower_components
|
||||||
|
|
||||||
|
*.sublime*
|
||||||
|
|
||||||
|
psd
|
||||||
|
thumb
|
||||||
|
sketch
|
||||||
|
|
||||||
|
### VisualStudioCode ###
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/settings.json
|
||||||
|
!.vscode/tasks.json
|
||||||
|
!.vscode/launch.json
|
||||||
|
!.vscode/extensions.json
|
||||||
|
!.vscode/*.code-snippets
|
||||||
|
|
||||||
|
# Local History for Visual Studio Code
|
||||||
|
.history/
|
||||||
|
|
||||||
|
# Built Visual Studio Code Extensions
|
||||||
|
*.vsix
|
||||||
|
|
||||||
|
### VisualStudioCode Patch ###
|
||||||
|
# Ignore all local history of files
|
||||||
|
.history
|
||||||
|
.ionide
|
||||||
|
|
||||||
|
# Support for Project snippet scope
|
||||||
|
|
||||||
|
### Windows ###
|
||||||
|
# Windows thumbnail cache files
|
||||||
|
Thumbs.db
|
||||||
|
Thumbs.db:encryptable
|
||||||
|
ehthumbs.db
|
||||||
|
ehthumbs_vista.db
|
||||||
|
|
||||||
|
# Dump file
|
||||||
|
*.stackdump
|
||||||
|
|
||||||
|
# Folder config file
|
||||||
|
[Dd]esktop.ini
|
||||||
|
|
||||||
|
# Recycle Bin used on file shares
|
||||||
|
$RECYCLE.BIN/
|
||||||
|
|
||||||
|
# Windows Installer files
|
||||||
|
*.cab
|
||||||
|
*.msi
|
||||||
|
*.msix
|
||||||
|
*.msm
|
||||||
|
*.msp
|
||||||
|
|
||||||
|
# Windows shortcuts
|
||||||
|
*.lnk
|
||||||
|
|
||||||
|
# End of https://www.toptal.com/developers/gitignore/api/windows,visualstudiocode,react
|
||||||
|
|
||||||
|
# Custom rules (everything added below won't be overriden by 'Generate .gitignore File' if you use 'Update' option)
|
||||||
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
{"prettier.tabWidth": 2}
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,32 @@
|
||||||
|
/*
|
||||||
|
object-assign
|
||||||
|
(c) Sindre Sorhus
|
||||||
|
@license MIT
|
||||||
|
*/
|
||||||
|
|
||||||
|
/** @license React v0.20.2
|
||||||
|
* scheduler.production.min.js
|
||||||
|
*
|
||||||
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||||
|
*
|
||||||
|
* This source code is licensed under the MIT license found in the
|
||||||
|
* LICENSE file in the root directory of this source tree.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/** @license React v17.0.2
|
||||||
|
* react-dom.production.min.js
|
||||||
|
*
|
||||||
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||||
|
*
|
||||||
|
* This source code is licensed under the MIT license found in the
|
||||||
|
* LICENSE file in the root directory of this source tree.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/** @license React v17.0.2
|
||||||
|
* react.production.min.js
|
||||||
|
*
|
||||||
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||||
|
*
|
||||||
|
* This source code is licensed under the MIT license found in the
|
||||||
|
* LICENSE file in the root directory of this source tree.
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>React Recipes App</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script src="bundle.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
/*
|
||||||
|
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
|
||||||
|
* This devtool is neither made for production nor for readable output files.
|
||||||
|
* It uses "eval()" calls to create a separate source file in the browser devtools.
|
||||||
|
* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
|
||||||
|
* or disable the default devtool with "devtool: false".
|
||||||
|
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
|
||||||
|
*/
|
||||||
|
/******/ (() => { // webpackBootstrap
|
||||||
|
/******/ var __webpack_modules__ = ({
|
||||||
|
|
||||||
|
/***/ "./src/index.js":
|
||||||
|
/*!**********************!*\
|
||||||
|
!*** ./src/index.js ***!
|
||||||
|
\**********************/
|
||||||
|
/***/ (() => {
|
||||||
|
|
||||||
|
eval("throw new Error(\"Module parse failed: Unexpected token (6:7)\\nYou may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders\\n| import data from \\\"./data/recipes.json\\\";\\n| \\n> render(<Menu recipes={data} />, document.getElementById(\\\"root\\\"));\");\n\n//# sourceURL=webpack://recipes-app/./src/index.js?");
|
||||||
|
|
||||||
|
/***/ })
|
||||||
|
|
||||||
|
/******/ });
|
||||||
|
/************************************************************************/
|
||||||
|
/******/
|
||||||
|
/******/ // startup
|
||||||
|
/******/ // Load entry module and return exports
|
||||||
|
/******/ // This entry module doesn't tell about it's top-level declarations so it can't be inlined
|
||||||
|
/******/ var __webpack_exports__ = {};
|
||||||
|
/******/ __webpack_modules__["./src/index.js"]();
|
||||||
|
/******/
|
||||||
|
/******/ })()
|
||||||
|
;
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,26 @@
|
||||||
|
{
|
||||||
|
"name": "recipes-app",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1",
|
||||||
|
"build": "webpack --mode production"
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"react": "^17.0.2",
|
||||||
|
"react-dom": "^17.0.2",
|
||||||
|
"serve": "^13.0.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.16.7",
|
||||||
|
"@babel/preset-env": "^7.16.8",
|
||||||
|
"@babel/preset-react": "^7.16.7",
|
||||||
|
"babel-loader": "^8.2.3",
|
||||||
|
"webpack": "^5.65.0",
|
||||||
|
"webpack-cli": "^4.9.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
export default function Ingredient({ amount, measurement, name }) {
|
||||||
|
return (
|
||||||
|
<li>
|
||||||
|
{amount} {measurement} {name}
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
import React from "react";
|
||||||
|
import Ingredient from "./Ingredient";
|
||||||
|
|
||||||
|
export default function IngredientsList({ list }) {
|
||||||
|
return (
|
||||||
|
<ul className="ingredients">
|
||||||
|
{list.map((ingredient, i) => (
|
||||||
|
<Ingredient key={i} {...ingredient} />
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
export default function Instructions({ title, steps }) {
|
||||||
|
return (
|
||||||
|
<section className='instructions'>
|
||||||
|
<h2>{title}</h2>
|
||||||
|
{steps.map((s, i) => (
|
||||||
|
<p key={i}>{s}</p>
|
||||||
|
))}
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
import React from "react";
|
||||||
|
import Recipe from "./Recipe";
|
||||||
|
|
||||||
|
export default function Menu({ recipe }) {
|
||||||
|
return (
|
||||||
|
<article>
|
||||||
|
<header>
|
||||||
|
<h1>Delicious Recipes</h1>
|
||||||
|
</header>
|
||||||
|
<div className="recipes">
|
||||||
|
{recipe.map((recipe, i) => (
|
||||||
|
<Recipe key={i} {...recipe} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
import React from "react";
|
||||||
|
import IngredientsList from "./IngredientsList";
|
||||||
|
import Instructions from "./Instructions";
|
||||||
|
|
||||||
|
export default function Recipe({ name, ingredients, steps }) {
|
||||||
|
return (
|
||||||
|
<section id={name.toLowerCase().replace(/ /g, "-")}>
|
||||||
|
<h1>{name}</h1>
|
||||||
|
<IngredientsList list={ingredients} />
|
||||||
|
<IngredientsList title='Cooking Instructions' steps={steps} />
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"name": "Baked Salmon",
|
||||||
|
"ingredients": [
|
||||||
|
{ "name": "Salmon", "amount": 1, "measurement": "lb" },
|
||||||
|
{ "name": "Pine Nuts", "amount": 1, "measurement": "cup" },
|
||||||
|
{ "name": "Butter Lettuce", "amount": 2, "measurement": "cups" },
|
||||||
|
{ "name": "Yellow Squash", "amount": 1, "measurement": "med" },
|
||||||
|
{ "name": "Olive Oil", "amount": 0.5, "measurement": "cup" },
|
||||||
|
{ "name": "Garlic", "amount": 3, "measurement": "cloves" }
|
||||||
|
],
|
||||||
|
"steps": [
|
||||||
|
"Preheat the oven to 350 degrees.",
|
||||||
|
"Spread the olive oil around a glass baking dish.",
|
||||||
|
"Add the yellow squash and place in the oven for 30 mins.",
|
||||||
|
"Add the salmon, garlic, and pine nuts to the dish.",
|
||||||
|
"Bake for 15 minutes.",
|
||||||
|
"Remove from oven. Add the lettuce and serve."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Fish Tacos",
|
||||||
|
"ingredients": [
|
||||||
|
{ "name": "Whitefish", "amount": 1, "measurement": "lb" },
|
||||||
|
{ "name": "Cheese", "amount": 1, "measurement": "cup" },
|
||||||
|
{ "name": "Iceberg Lettuce", "amount": 2, "measurement": "cups" },
|
||||||
|
{ "name": "Tomatoes", "amount": 2, "measurement": "large" },
|
||||||
|
{ "name": "Tortillas", "amount": 3, "measurement": "med" }
|
||||||
|
],
|
||||||
|
"steps": [
|
||||||
|
"Cook the fish on the grill until cooked through.",
|
||||||
|
"Place the fish on the 3 tortillas.",
|
||||||
|
"Top them with lettuce, tomatoes, and cheese."
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
import React from "react";
|
||||||
|
import { render } from "react-dom";
|
||||||
|
import Menu from "./components/Menu";
|
||||||
|
import data from "./data/recipes.json";
|
||||||
|
|
||||||
|
render(<Menu recipes={data} />, document.getElementById("root"));
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
var path = require("path");
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
entry: "./src/index.js",
|
||||||
|
output: {
|
||||||
|
path: path.join(__dirname, "dist", "assets"),
|
||||||
|
filename: "bundle.js",
|
||||||
|
},
|
||||||
|
module: {
|
||||||
|
rules: [{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }],
|
||||||
|
},
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue