react的基本使用

一，react的基本概念
React 是用于构建用户界面的 JavaScript 库
构建用户界面： User Interface，对咱们前端来说，简单理解为：HTML 页面

二，react全家桶是框架
react: 核心库
react-dom: dom操作
react-router：路由
redux：集中状态管理

三，React 特点
1.声明式
用类似于html的语法来定义页面。react中通过数据驱动视图的变化，当数据发生改变react能够高效地更新并渲染DOM

<div className="app">
    <h1>Hello React! 动态数据变化:{count}</h1>
</div>

2.组件化
组件是react中最重要的内容，组件用于表示页面中的部分内容，组合、复用多个组件，就可以实现完整的页面功能

3.学习一次，随处使用
使用react/react-dom可以开发Web应用
使用react/react-native可以开发移动端原生应用（react-native）RN
使用react可以开发VR（虚拟现实）应用（react/react360）

四，React脚手架-从零开始创建项目
1.创建方式一：
先全局安装脚手架工具包

npm i -g create-react-app

用脚手架工具来创建项目

create-react-app your-project-name

2.创建方式二：

直接使用npx来创建项目

npx create-react-app your-project-name

注意：（npx create-react-app 是固定命令，create-react-app 是 React 脚手架的名称
your-project-name 表示项目名称，可以修改）

3.启动项目：
 

npm run start

注意：

src 目录是我们写代码进行项目开发的目录
index.js是入口文件

五，使用的基本步骤

1.导入包： React， ReactDOM
2.创建 react元素
3.渲染元素到某个dom上

代码示例：

// 导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'

// 创建元素
const title = React.createElement('h1', {id:'box'}, 'hello react')

// 渲染react元素
ReactDOM.render(title, document.getElementById('root'))

 六，拓展 eslint 的配置

npm i eslint typescript -D

 在项目根目录运行

npx eslint --init

 如果想ctrl+s自动格式化 则可以在设置的配置json文件 写入一下代码

{
  "eslint.run": "onType",
  "eslint.options": {
    "extensions": [".js", ".vue", ".jsx", ".tsx"]
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

在代码中 eslint并不能处理jsx中的代码 我们可以在vscode中下载插件 prettier-now

继续在json文件中写入格式化相关代码 

{
    "eslint.run": "onType",
    "eslint.options": {
        "extensions": [
            ".js",
            ".vue",
            ".jsx",
            ".tsx"
        ]
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
     // 编辑器设置 - 保存时做格式化
  "editor.formatOnSave": true,
  // 编辑器设置 - 默认采用prettier-now做格式化
  // 如果使用的是prettier，这的设置应该是 esbenp.prettier-vscode
  "editor.defaultFormatter":"remimarsal.prettier-now",
 
  // 控制缩进
  "prettier.useTabs": false, // 缩进不使用tab，使用空格 
  "prettier.tabWidth": 2, // 缩进字节数
  
  // 函数声明时小括号前后要加空格
  // 如果你使用prettier这一项是不能做选择的，导致和eslint默认配置的冲突
  // 可以在百度中搜到很多的记录： https://www.baidu.com/s?wd=prettier%20%E5%87%BD%E6%95%B0%E7%A9%BA%E6%A0%BC
  "prettier.spaceBeforeFunctionParen": true,
 
  // react的jsx让>与结束标签同行
  "prettier.jsxBracketSameLine": true,
 
   "prettier.bracketSpacing": false,// 去掉数组前后空格
 
  "prettier.semi": false, // 不要给语句加;
  "prettier.singleQuote": true, // 采用单引号
  "prettier.trailingComma": "none", // 不要尾随逗号,
  "prettier.printWidth": 80, // 每行超过80列就换行
 
  // 在.js中，写div按下tab就可以自动补全，而不需要写<div再补全
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}