react杂乱笔记(一)

程序“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;