I'm going through this .net tutorial https://docs.microsoft.com/en-us/learn/modules/build-web-api-minimal-spa/3-exercise-create-front-end
I've followed the steps and even copy/pasted their code for Main.js:
import React, { useState } from "react";
import styled from "styled-components";
const PizzaFrame = styled.div\`
border: solid 1px gray;
padding: 10px;
margin: 15px 10px;
border-radius: 5px;
box-shadow: 0 0 5px grey;
font-family: Arial;
`;
const Input = styled.input\`
border: solid 1px black;
padding: 5px;
border-radius: 3px;
`;
const Title = styled(Input)\`
text-transform: uppercase;
`;
const Save = styled.button\`
width: 100px;
margin: 10px;
background: green;
color: white;
font-size: 16px;
padding: 10px;
border-radius: 5px;
`;
let pizzas = [{
id: 1, name: 'Cheese pizza', description: 'very cheesy'
},
{
id: 2, name: 'Al Tono pizza', description: 'lots of tuna'
}];
const Pizza = ({ pizza }) => {
const [data, setData] = useState(pizza);
const [dirty, setDirty] = useState(false);
function update(value, fieldName, obj) {
setData({ ...obj, [fieldName] : value });
setDirty(true);
}
function onSave() {
setDirty(false);
// make REST call
}
return (<React.Fragment>
<PizzaFrame>
<h3>
<Title onChange={(evt) => update(evt.target.value, 'name', data)} value={data.name} />
</h3>
<div>
<Input onChange={(evt) => update(evt.target.value, 'description', data)} value={data.description} />
</div>
{dirty ?
<div><Save onClick={onSave}>Save</Save></div> : null
}
</PizzaFrame>
</React.Fragment>)
}
const Main = () => {
const data = pizzas.map(pizza => <Pizza pizza={pizza} />)
return (<React.Fragment>
{data}
</React.Fragment>)
}
export default Main;
In my VS Code I get errors Invalid character.ts(1127)
for everything starting at the "`" here:
const PizzaFrame = styled.div\`
border: solid 1px gray;
padding: 10px;
margin: 15px 10px;
border-radius: 5px;
box-shadow: 0 0 5px grey;
font-family: Arial;
`;
const Input = styled.input\`
border: solid 1px black;
padding: 5px;
border-radius: 3px;
`;
const Title = styled(Input)\`
text-transform: uppercase;
`;
const Save = styled.button\`
width: 100px;
margin: 10px;
background: green;
color: white;
font-size: 16px;
padding: 10px;
border-radius: 5px;
`;
and it won't compile:
Failed to compile.
SyntaxError: C:\..\net_react\pizza-web\src\Main.js: Expecting Unicode escape sequence \uXXXX. (4:30)
2 | import styled from "styled-components";
3 |
> 4 | const PizzaFrame = styled.div\`
I also get warnings when running or when doing yarn add styled-components
:
warning Pattern ["styled-components@^5.3.5"] is trying to unpack in the same destination "C:\\Users\\...\\AppData\\Local\\Yarn\\Cache\\v6\\npm-styled-components-5.3.5-a750a398d01f1ca73af16a241dec3da6deae5ec4-integrity\\node_modules\\styled-components" as pattern ["styled-components@^5"]. This could result in non-deterministic behavior, skipping.
[3/4] Linking dependencies...
warning " > @testing-library/[email protected]" has unmet peer dependency "@testing-library/dom@>=7.21.4".
warning "react-scripts > [email protected]" has unmet peer dependency "autoprefixer@^10.0.2".
warning "react-scripts > eslint-config-react-app > [email protected]" has unmet peer dependency "@babel/plugin-syntax-flow@^7.14.5".
warning "react-scripts > eslint-config-react-app > [email protected]" has unmet peer dependency "@babel/plugin-transform-react-jsx@^7.14.9".
warning "react-scripts > react-dev-utils > [email protected]" has unmet peer depend
I added this "styled-components" to my package.json:
{
"name": "pizza-web",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.3",
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^13.5.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "5.0.0",
"styled-components": "^5.3.5",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"resolutions": {
"styled-components": "^5"
}
}
I'm not sure if it's because "styled-components" is not properly installed?
CodePudding user response:
I don't know why they are escaping the first backtick, but that's wrong, this is how you use styled-components:
const PizzaFrame = styled.div`
border: solid 1px gray;
padding: 10px;
margin: 15px 10px;
border-radius: 5px;
box-shadow: 0 0 5px grey;
font-family: Arial;
`;
styled-components are based off a JS feature called Tagged Template Literals, that lets you call a function with backticks `` instead of (), so styled.div
is just a common JS function: MDN
If you are not sure to have installed correctly styled-components
package, just do :
yarn remove styled-components
and
yarn add styled-components