React(1)

React 特点

• 1.声明式设计 −React 采用声明范式，可以轻松描述应用。
• 2.高效 −React 通过对 DOM 的模拟，最大限度地减少与 DOM 的交互。
• 3.灵活 −React 可以与已知的库或框架很好地配合。
• 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
• 5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
• 6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

错误

  Aborting installation.
    npm install --save --save-exact --loglevel error react react-dom react-scripts cra-template has failed.

  Deleting generated file... package.json
  Deleting react-start/ from E:\2020React
  Done.

  npm config set registry https://registry.npm.taobao.org
  //检验是否成功
  npm config get registry
  //打印https://registry.npm.taobao.org/

+ my-project
  + node_modules（存放第三方模块）
  + public（存放静态文件）
      - favicon.ico（图标）
      - index.html（页面模板）
      - manifest.json
  + src（我们自己写的文件一般放在这个文件夹下）
      - App.css（页面入口文件的样式文件）
      - App.js（页面入口文件）
      - App.test.js（页面入口文件的测试文件）
      - index.css（程序入口文件的样式文件）
      - index.js（程序入口文件）
      - logo.svg
      - serviceWorker.js
  - .gitignore
  - package-lock.json（项目配置文件）
  - package.json（项目配置文件）
  - README.md（项目说明文档）

package.json

  {
  "name": "react1004",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

环境准备

• 搭建本地开发环境

  • nodejs
  • npx create-react-app my-app

    第一行的 npx 不是拼写错误 —— 它是 npm 5.2+ 附带的 package 运行工具。

  • 删除掉新项目中 src/ 文件夹下的所有文件。

    不要删除整个 src 文件夹，删除里面的源文件。 cd my-app cd src del * cd ..

  • 在 src/ 文件夹中创建一个名为 index.css 的文件
  • 在 src/ 文件夹下创建一个名为 index.js 的文件

• 寻求帮助

  • react 社区
  • Reactiflux Chat