3000元网站建设三年_手机做网站教程_网页平台做个业务推广_嘉兴seo外包服务商

程序“npx”无法运行: 找不到应用程序所在位置 行:1 字符: 1

解决方法;

不要在vscode中执行命令,在cmd 中可以执行

Module not found: Error: Can't resolve 'web-vitals' in 'D:\learn\react-basic\src'
ERROR in ./src/reportWebVitals.js 5:4-24
Module not found: Error: Can't resolve 'web-vitals' in 'D:\learn\react-basic\src'

webpack compiled with 1 error

解决方法:

搜索reportWebVitals,

注释掉这两行

核心包

// 根组件
const i = 199;
const getName = () => {return '王舒'
}function App() {return (<div className="App">{/* 1.字符串 */}{"大家好!   "}{/* 2.变量 */}{`我有${i}元     `}{/* 3.方法 */}{getName()}{/* 4.js对象 */}<div style={{ color: "red" }}>this is a div</div>{/* 5.方法 */}{Date.now()}</div>);
}export default App;

和原生html相同方式

React Hook "useState" cannot be called at the top level.

解决方法:

在 React 中，useState Hook 不能在组件函数的顶级作用域之外（比如在普通的 JavaScript 函数或者模块的最外层）被调用。这是因为 Hooks 的设计规则是它们必须在 React 函数组件或者自定义 Hook 内部调用。

把useState,移入到组件函数里

// useState 数据驱动视图
import { useState } from "react";function App() {const [count, setCount] = useState(0);const res = useState(1)console.log(res, 'res');function click() {setCount(count + 1)}return (<div><button onClick={click}>{count}</button></div>)
}
export default App;

// useState 数据驱动视图
import { useState } from "react";
function App() {// 修改对象中的值const [user, setUser] = useState({ name: 'kack' })function changename() {// 1.直接修改 视图不会变化// user.name = 'yom';// console.log(user);// 2.使用setUser 传入新对象setUser({...user,name: 'yom'})}return (<div><button onClick={changename}>{user.name}</button></div>)
}
export default App;

注意react 中类名规定为 className="",

.foo {font-style: italic;color: #008;font-size: 30px;
}

import "./index.css"
function App() {return (<div><div className="foo">我是 foo 类名</div><div style={{ color: "pink", fontSize: '20px' }}>行内样式</div></div>)
}
export default App;