一、关联与差异

文章定位：了解环境搭建与最初项目结构，常见命令用法，一些前置知识；

一、React与React Native：关键区别、优势详细比较

1、差异

1、 React是一个JavaScript前端UI开源框架，允许开发者创建交互式用户界面。另一方面，React Native扩展了React的功能，为开发本地移动应用提供了一个框架。

2、三大体系

React.js web开发
ReactNative 移动端开发，建立在React库之上的，允许我们为Android和iOS建立原生渲染的应用程序。
ReactVR 虚拟现实开发

2、 react的合理性

1、由多个UI组件组成，每个组件都有自己的逻辑和控制。由于每个组件都是独立开发的，我们可以在任何需要的地方重复使用React组件。此外，我们可以将一个组件与其他组件嵌套在一起，以开发大型和复杂的React应用程序。

2、函数式编程，适合大型团队，合营项目；vue 有插件，框架丰富，使用简单快速；

二、React Native

react和这个差不多 React Native 中文网

React.Js(通过组件，构建用户界面的JavaScript库)基础上推出的移动开源框架：革命性。

框架语法：还有一个h5开发，将h5写好嵌入App中；React Native结构

移动APP的开发模式：（Android：java，kotlin；IOS：Swift，object-c）

一、平台要求

二、环境搭建

一、搭建JS环境与指令操作

1、先配置nvm工具：nvm安装使用及一些问题解决

2、配置node.js

官网：下载 | Node.js 中文网 (nodejs.cn)

基本介绍：node.js，搭建一个Web服务器后台，是JavaScript运行在服务器上的运行环境：什么是Node，它有什么作用_node的作用_HelloGad的博客

补充知识

历史版本网站：CNPM Binaries Mirror (npmmirror.com)
像卸载的话直接卸应用程序就行
node命令：如何快速切换和管理node版本
nvm list：查看已安装的版本
npm info react：查看react版本
使用国内镜像网站：nvm 安装 nodejs 报错 Could not retrieve https://nodejs.org/dist/latest/SHASUMS256.txt.

3、安装yarn（可选，Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载）：npm install -g yarn

yarn安装与使用&yarn : 无法加载文件...因为在此系统上禁止运行脚本_水果妹妹踩前端的坑的博客-CSDN博客

4、安装React Native脚手架：npm install -g react-native-cli;提供很多脚手架命令，例如初始化代码 react-native init myproject。

5、 pnpm(可选)

性质：解决了 npm/yarn 内部潜在的 bug，极大的优化了性能，扩展了使用场景。被誉为 最先进的包管理工具
特征：有pnpm-lock.yaml文件（必须要安装pnpm）
基本使用:pnpm : 无法将“pnpm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。
环境变量配置：

二、搭建双端环境

Windos只能打出安卓，RN官方只能搭Android，按官方流程走就行了，jdk，AS，Android SDK(AS默认会安一个，也可以在sdk了自己下，并新建配置Android home，sdk环境变量;把一些工具目录添加到环境变量 Path内新建见官网)，环境变量；
Mac->Android，Ios（xcode只能跑在IOS）。

三、编译工具

1、 Android Stdio只是用到运行环境，真是是在VS code上编译的，Flutter是AS编译的：史上最全vscode配置使用教程

常用插件

错误提示：code snippets
史上最全vscode配置使用教程
显示git记录：VSCode 如何查看git提交的历史记录或逐行记录_vscode查看git提交记录

VSCode 快速创建H5并调试
快捷键：

三、React

一、实践

一、传统方式

完成环境搭建后，先打开个html，输入!+tab自动生成html结构
使用cdn引入，但是这段我跑不起来 233

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 0.cdn 方式引入react-->
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <!-- 5. 加入babel的cdn 解析js react->原-->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

</head>

<body>
    <!-- 1. 根组件 -->
    <h1>宝可梦</h1>
    <div id="root"></div>

    <!-- 2. 创建scrpt写js代码 -->
    <script type="text/babel">    /* 6. 引入babel后增加type=*/
/*      3. 使用dom方法为指定标签创建根组件  注入标签*/
        const root = ReactDom.createRoot(document.getElementsById("root"));
        root.render(<h1>宝可梦</h1>);
        // 4.有点像直接写html在js里 但浏览器不会识别的
    </script>
</body>

</html>

二、脚手架方式

1、 cmd中处理：react脚手架安装与使用

npx create-react-app my-app
npm i 下载依赖库
nmp start 启动一个本地调试的服务器，打开应用

2、自动生成的结构：index.js（核心）中看到熟悉的ReactDom.render

用于报告网站性能指标的函数：react reportwebvitals

1.render里是jsx语法结构，可以不用分开定义html与js

也可以修改里面的内容，浏览器自动刷新

root.render(
  <h1>Hello</h1>
  // <React.StrictMode>
  //   <App />
  // </React.StrictMode>
);

更进app去看到是个组件函数(组件简化成函数定义)

3、根据数据生成用户界面，和数据绑定

return <></> 表示返回一个结构

import React from 'react';
import ReactDOM from 'react-dom/client';

function fetchTodos() {
  return [
    {
      id: 1,
      title: "唱",
      completed: false,
    },
    {
      id: 2,
      title: "跳",
      completed: false,
    },
    {
      id: 3,
      title: "rap",
      completed: true,
    },
  ]
}

function App() {
  const todos = fetchTodos();
  return (
    <>
      <ul>
          {//花括号 html中嵌js
            todos.map((todo) =>(
              <li>
                <input type='checkbox' defaultChecked={todo.completed}/>
                <label>{todo.title}</label>
              </li>
            )
            )
            }
      </ul>
    </>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<App/>
);

4、react优势：巨大的生态系统和开源库

常见的UI框架，bootstap，semantic，material-ui在react都有较好的集成

1、引入bootstrap：React-Bootstrap (tgwoo.com)

终端输 npm install react-bootstrap --save
由于现在常用ant design，所以这个不再展开

5、组件化-jsx抽出ul组件

1、传递只读属性，函数内不可修改，单向数据流模式

function TodoList(props){//把ui抽成函数 传递属性
  return (  
  <li>
    <input type='checkbox' defaultChecked={props.completed}/>
    <label>{props.title}</label>
  </li>
  )
}

function App() {
  const todos = fetchTodos();
  return (
    <>
      <ul>
          {//花括号 html中嵌js
            todos.map((todo) =>(
              TodoList(todo)
            )
            )
            }
      </ul>
    </>
  )
}

2、动态属性：states 状态

React -- useState 的使用及注意事项

setCount(count + 1)直接传值，方法内多调只会生效最后一次
setCount(count => count + 1) 函数，方法内调多次会执行多次
一把是放在点击事件里面的，可能需要和点击事件结合，直接写在顺序执行里会失效；

function TodoList(props){
  return (  
  <li>
    <input type='checkbox' defaultChecked={props.completeds}/>
    <label>{props.titles}</label>
    <button onClick={ props.handleClick }>点击更新状态</button>
  </li>
  
  )
}

function App() {
  //const todos = fetchTodos();
  /**
   * react状态管理模方式(响应式变量的 hook 函数)：useState会返回两个值
   * todos:存储当前状态变量
   * setTodos：修改状态方法setTodos()
   * fetchTodos为初始值状态
   */
 const [todos,setTodos]=useState(fetchTodos);//函数内改的话局部变量自动销毁，全局变量得考虑组件同步
  //拿到todos不能直接改，得调方法

  return (
    <>
      <ul>
          {//花括号 html中嵌js
            todos.map((todo) =>(
              <TodoList
              titles={todo.title}
              completeds={todo.completed}
              handleClick={()=>{
                setTodos([
                  {
                    id: 1,
                    title: "唱",
                    completed: false,
                  },
                  {
                    id: 2,
                    title: "跳",
                    completed: false,
                  },]
               )
              }}
              />
            )
            )
            }
      </ul>
    </>
  )
}

三、 Ant Design 主流前端UI

一、介绍 antd是一个套设计原则（设计）+配套的组件库（前端）。antd-mobile给移动端用的。

二、官网快速上手 - Ant Design，切到组件分组有各种组件。

四、Redux

数据流管理框架: react-redux一点就透，我这么笨都懂了

GIT DEMO: redux/examples/todos-with-undo at master · reduxjs/redux · GitHub

五、Antd

1、引入方式

1、npm i antd vscod可以直接跑

2、yarn add antd win+r可以直接跑

2、代码样例，按官网填进index.js即可看到效果

import React from "react";
import { createRoot } from "react-dom/client";
import { Button, DatePicker, Space, version } from "antd";
import 'antd/dist/reset.css';
import "./index.css";

const App = () => {
  return (
    <div className="App">
      <h1>antd version: {version}</h1>
      <Space>
        <DatePicker />
        <Button type="primary">Primary Button</Button>
      </Space>
    </div>
  );
};

const root = createRoot(document.getElementById("root"));
root.render(<App />);

常用指令

运行：npm start
下载(install 第三方包)：npm i
建立一个应用：npx create-react-app my-app
npm 开启了npm run dev以后怎么退出或关闭_

Ctrl+C

升级node> 17的时候出现的问题，因为他启用了OpenSSL 3.0对对各种摘要算法做了更严格的限制；
常见的方法：SET NODE_OPTIONS=--openssl-legacy-provider

参考："prod:weapp": "SET NODE_OPTIONS=--openssl-legacy-provider && cross-env APP_ENV=prod npm run build:weapp",
目的：指定 legacy 算法容器，使用 --openssl-legacy-provider

【React阶段一环境】1、React Native & React & Ant D & Redux

一、关联与差异

一、React与React Native：关键区别、优势详细比较

1、差异

2、 react的合理性

二、React Native

一、平台要求

二、环境搭建

一、搭建JS环境与指令操作

二、搭建双端环境

三、编译工具

三、React

一、实践

一、传统方式

二、脚手架方式

1、 cmd中处理：react脚手架安装与使用

2、自动生成的结构：index.js（核心）中看到熟悉的ReactDom.render

3、根据数据生成用户界面，和数据绑定

4、react优势：巨大的生态系统和开源库

5、组件化-jsx抽出ul组件

三、 Ant Design 主流前端UI

四、Redux

五、Antd

1、引入方式

2、代码样例，按官网填进index.js即可看到效果

常用指令

配置相关的问题

【React阶段一 环境】1、React Native & React & Ant D & Redux

一、关联与差异

一、React与React Native：关键区别、优势详细比较

1、 差异

2、 react的合理性

二、React Native

一、平台要求

二、环境搭建

一、搭建JS环境与指令操作

二、搭建双端环境

三、编译工具

三、React

一、实践

一、传统方式

二、脚手架方式

1、 cmd中处理：react脚手架安装与使用

2、自动生成的结构：index.js（核心）中看到熟悉的ReactDom.render

3、根据数据生成用户界面，和数据绑定

4、react优势：巨大的生态系统和开源库

5、组件化-jsx抽出ul组件

三、 Ant Design 主流前端UI

四、Redux

五、Antd

1、 引入方式

2、 代码样例，按官网填进index.js即可看到效果

常用指令

配置相关的问题

【React阶段一环境】1、React Native & React & Ant D & Redux

1、差异

1、引入方式

2、代码样例，按官网填进index.js即可看到效果