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