react小知识

安装以来；依赖：下载node.js
node.js
淘宝镜像加快安装速度：
npm config set registry https://registry.npm.taobao.org
npm config get registry
npm i nrm -g


webpack
全局安装：npm install -g webpack
局部安装：npm install webpack --save-dev
卸载
npm uninstall webpack -g ,//没试
 npm uninstall webpack

vue
1.安装vue脚手架
（1）安装淘宝镜像：npm config set registry http://registry.npm.taobao.org
（2）创建脚手架，只需创建一次：npm install -g @vue/cli
（3）创建项目：vue create vue_test(项目名称)
（4）运行：npm run serve


第一次运行vue需要运行
npm install --legacy-peer-deps  //npm安装，忽略其他(用于vue启动项目)




react
1.创建react脚手架（初始化项目）：
npx create-react-app react basic     // npx临时安装包，create-react-app是react脚手架名称,react basic表示项目名称

需要在src里新建四个文件夹：assets用来存放资源（图片，字体图标）、components用来存放公共组件、page存放页面的js文件、untils工具型函数

要重新引入：import React from "react"
import  ReactDOM  from "react-dom"
2.启动项目
yarn start  or   npm start

3.npm i prop-types   props校验安装的包
导入props校验包   import PropTypes from "prop-types"

4.React路由的基本使用
安装路由包： npm install react-router-dom
导入路由包：import { BrowserRouter as Router,Route,Link} from 'react-router-dom' ;
使用Router组件包裹整个应用
使用Link组件作为导航菜单（路由入口）
使用Route组件作为导航菜单（路由出口）

5.导入图片
import img from '路径'  //图片文件夹要放在src包文件夹里
使用图片：<img src={img} alt='  ' />

6.组件库   https://mobile.ant.design
使用指南：（1.）安装组件库  npm install --save antd-mobile
                （2.）在app.js中导入要使用的组件，直接引入组件即可，antd-mobile 会自动为你加载 css 样式文件：   import { Button } from 'antd-mobile'   
                  (3.)在页面中渲染
                （4.）安装路由组件，导入路由组件


React Native
1.（1.）全局安装react-native脚手架：npm install -g react-native-cli
（2.）安装yarn：npm install -g yarn
（3.）创建React native 项目 （限制版本）：npx react-native init 项目名称 --version  0.64.0     /0.68.2
（4.）运行react native项目：npm run start
         启动Android模拟器：react-native run-android
（5.）安裝字体图标库：http://reactnative.directory
         命令：npm install --save react-native-vector-icons
                  npx react-native link react-native-vector-icons
          引入：import icon from 'react-native-vector-icons'  要使用哪个名称就import icon from 'react-native-vector-icons/图标名称
（6.）react-navigation路由
        a.使用 NPM 安装：npm install --save react-navigation
       使用 Yarn 安装：yarn add react-navigation
       b.要自动进行所有必要的更改，请在项目的根文件夹中运行：npx rnn-link


2.react-native报错No Babel config file detected for xxx
   可以尝试在.eslintrc文件中添加以下内容：
      "parser":"@babel/eslint-parser",
      "parserOptions":{"requireConfigFile":false}
3.报错Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): "jsx", "flow", "typescript". (6:4)eslint
（1.）安装启用 babel 正确解析 jsx 所需的依赖项：
     npm install --save-dev @babel/preset-react
（2.） 配置 Babel，.babelrc项目根目录下的文件：
         "@babel/preset-react"
（3.）指定解析器.eslintrc.json（因此您的控制台和 VSCode 将使用相同的） - 此处显示完整的 eslintrc：
{
    "parser": "@babel/eslint-parser",
    "settings": {
        "react": {
            "version": "detect"
        }
    },
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "plugin:react/recommended",
        "standard",
        "plugin:react/jsx-runtime",
        "plugin:testing-library/react",
        "plugin:jest/all"
    ],
    "parserOptions": {
        "sourceType": "module"
    },
    "rules": {}
}



Android：
adb shell input keyevent 82