先聊聊 React 是啥玩意儿

说实话，React 就像厨房里的万Neng锅。

你把材料丢进去，翻炒一下一会儿就Neng端出好菜。

这锅子是 Facebook 整的，开源出来的，大家伙儿dou爱用。

Zui关键的是它让 UI 变得可预期、可维护。

先装 Node.js，npm 自带的。

打开终端敲：

npm install -g create-react-app

然后：

npx create-react-app my-first-react

等一会儿，就有个 my-first-react 目录。

进去跑：

cd my-first-react
npm start

浏览器自动弹出 localhost:3000，kan到一个转圈的 logo，那就是成功啦。

打开 src/App.js，把里面的代码全删掉，换成：

import React from 'react';
function App {
  return ;
}
export default App;

保存后页面立马刷成 “Hello React! 哈哈”。

这就是函数式组件，一行函数直接返回 JSX。

想让页面点一下按钮数字加一？这时候就需要 state。

import React, { useState } from 'react';
function Counter {
  const  = useState;
  return (
    

      
当前计数：{count}
       setCount}>点我+1
    
  );
}
export default Counter;

每次点击，setCount 会触发重新渲染，UI 自动geng新。

父组件想把数据塞给子组件，用 props。

// Parent.jsx
import React from 'react';
import Child from './Child';
function Parent {
  return ;
}
export default Parent;
// Child.jsx
import React from 'react';
function Child {
  return (
    
我叫 {props.name}，今年 {props.age} 岁。
  );
}
export default Child;

注意 props 是只读的，你不Neng在子组件里直接改它们。

有些场景，比如聚焦输入框，要直接操作真实 DOM，这时就用 ref。

 {
    inputRef.current && inputRef.current.focus;
  };
  return (
    

      
      聚焦
    
  );
}
export default FocusInput;

这个问题常被问到，我也遇到过。说实话，大多数时候是因为：

- 页面没有有效的 或者标题太普通；

- 内容重复率高，被判定为“搬运”；

- 没有外部链接指向，自然权重低；还有就是服务器返回了错误码。

# 那么解决办法呢？写独特、深入的内容；确保每篇文章dou有唯一标题和描述；Zuo好内部链接结构；Zui后检查下服务器响应头是不是正常。搞定这些，百度基本就会把你的页面收入囊中啦。

Cusom Hook 就是把多个 state/副作用封装成一个函数，再在多个组件里复用。

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot);
root.render;

Sass Neng写变量、嵌套；CSS Modules 防止类名冲突；Styled‑Components 把样式写进 JS。任选其一，douNeng让页面geng美观。

// App.module.scss
$primary: #4caf50;
.title {
  color: $primary;
  font-size: 24px;
}

- 控制台报错 “Cannot read property of undefined”，大概率是忘记给 props 加默认值或解构时写错了键名。别急，加个 {propName || ''};

- “Invalid hook call” 通常是因为 Hook 用在了普通函数里或不同版本的 react 与 react‑dom 不匹配。检查下依赖版本吧；

- 页面卡死、渲染慢，多半是列表没加 key 或 key 用了 index。给每条数据一个唯一 id 再当 key，就Neng省掉不少性Neng坑。

NPM 脚本Yi经帮我们打包好了只要执行：