React基础学习（第一天）

本是古典何须时尚 2023-03-01 13:46 39阅读 0赞

# React #

#### 概述 : ####

*  React 是一个用于 `构建用户界面` 的 `JavaScript` 库
 *  因为框架是有一整套解决方案的，React就是纯粹写UI组件的 没有什么异步处理机制、模块化、表单验证这些。React和react-router, react-redux结合起来才叫框架，而React本身只是充当一个前端渲染的库而已
 *  如果从 MVC 的角度来看, React 仅仅是视图层( V ), 也就是只负责视图的渲染, 而非并提供了完整的 M 和 C 的功能
 *  React 起源于 Fackbook 的内部项目, 后又用来架设 Ins 的网站, 并与 2013年 5 月开源

#### 特点 ####

*  **声明式**
    
     *  你只需要描述UI (HTML) 看起来是什么样
     *  React 负责渲染UI , 并在数据变化时更新 UI
        
         *  `<h1>Hello React! 动态变化数据：{count}</h1>`
         *  `<Child></Child>`
 *  **基于组件**
    
     *  组件是 React **最重要**的内容
     *  组件表示页面中的部分内容
     *  组合、复用多个组件，可以实现完整的页面功能
 *  **学习一次, 随处使用**
    
     *  使用 React 可以开发 Web 应用
     *  使用 React 可以开发移动端混合应用（react-native）
     *  使用 React 可以开发 VR（虚拟现实）应用（react 360）
    
        我们现在做的是web页面 
        
        app应用 => 原生app + 混合app
        - 原生app => ios(苹果)/Android(安卓)
        - 混合app  =>  加一个壳子(开发一套前端代码生成的app )
                  => ios/Android壳子(前端代码)  
        
        ios/Android 开发的 => 原生应用app 
        ios(web页面)  + Android(web页面)  ==> 混合app  + 借助 react-native

## React 的基本使用 ##

> 包管理器/工具 npm cnpm yarn
> 
> 1.  npm 最火的 + 淘宝镜像
> 2.  cnpm 国内 (demo => ok 项目=> cnpm 不要弄)
> 3.  yarn : Facebook
>     
>     1.   使用前必须安装 yarn 的运行模块 `npm i yarn -g`
>     
>      *  yarn add xxx
>      *  yarn remove xxx
>      *  yarn --version

#### React 的安装 ####

*  命令 : `yarn add react react-dom`
 *  react 包 : 是核心包, 提供 `创建元素、组件`等功能
 *  react-dom包 : 渲染DOM功能

#### React 的基本使用 ####

> 需求 :
> 
> # 我是h1 #

*  **1-引入 react 和 react-dom 两个js 文件**

*  **2-创建 React 元素**

// 参数1 : 元素名称
    // 参数2 : 属性 (对象)
    // 参数3+ : 内容
    const h1 = React.createElement('h1',
    { 
         title: '啊哈哈'
    } ,
    '我是h1' )

*  **3-渲染 React 元素**

//3.1 准备一个容器
     <div id="root"></div>
    
    // 3.2 开始渲染
    // 参数1 : 需要渲染的react元素/react组件
    // 参数2 : 指定页面中的DOM容器
    ReactDOM.render(h1, document.getElementById('root'))

#### createElement方法说明 ####

// 参数1 : 元素名称 , 表示要创建的标签名称 (html标签)
    // 参数2 : 属性 (对象), 如果有就传对象,没有就传null
    // 参数3+ : 子节点 
    // 1-文本节点 字符串 
    // 2-元素节点 React.createElement() 创建)
    const h1 = React.createElement(
        'div',
        null,
        // span
        React.createElement('span', null, '我是span'),
        React.createElement('p', null, '我是p')
    )

#### 属性的特殊要求 ####

*  不推荐使用class, 而推荐使用 className :
    
     *  class => className => 因为class关键字用在创建组件类用了
 *  不推荐使用for, 而推荐使用 htmlFor
    
     *  for => htmlFor ==> 遍历使用了
 *  属性推荐使用 驼峰命名

// for 在 label 上的使用
    <label for="app">姓名</label>
    <input id="app" type="text" />

#### 小练习 : ####

*  总结 : 使用createElement创建react元素非常的麻烦，推荐您后面使用 JSX
 *  因为 JSX 需要 通过 babel 转化,所以我们使用脚手架(集成babel插件)来初始化项目完成react 的开发工作

## React 脚手架 ##

#### 使用脚手架的意义 ####

*  脚手架是开发 现代Web 应用的必备。
 *  充分利用 Webpack、Babel、ESLint 等工具辅助项目开发。
 *  零配置，无需手动配置繁琐的工具即可使用。
 *  关注业务，而不是工具配置。

#### 安装脚手架-初始化项目-01-npm ####

*  安装脚手架 : `npm i create-react-app -g`
    
     *  查看版本号 : `create-react-app -V`
 *  初始化项目 : `create-react-app demo1`

#### 安装脚手架-初始化项目- 02 - npx (官网推荐) ####

*  命令 : `npx create-react-app demo2`
    
     *  格式 : `npx 脚手架 项目名称`
     *  \[官网\] : `npx` 不是拼写错误 —— 它是npm 5.2+ 附带的 package 运行工具。
 *  npx : 简化了工具包中命令的使用方法
    
     *  原来：1 先全局安装脚手架的包 2 再使用脚手架中提供的命令，来初始化项目
     *  现在：直接使用脚手架来初始化项目即可
 *  npx 内部执行的操作：
    
     *  1 先临时安装脚手架 : `npm i create-react-app`
     *  2 使用脚手架的命令初始化项目 : `create-creat-app demo`
     *  3 使用完,删除临时安装的脚手架 : `npm un create-react-app`

> 我们推荐使用这一种, 因为以后实际上开发,不可能每天都要初始化一个项目, 而是从项目开始到结束只会初始化一个项目而已

*  运行 : `yarn start`
 *  补充说明 :以后react和yarn都是 facebook 出来的,所以以后可以多使用yarn

#### React 脚手架中使用 react ####

*  清理结构 :
    
     *  src/ : 内部文件全部 删除 , 重新创建一个 index.js 入口文件
     *  public/ : 内部 文件全部删除, 重新创建一个 index.html 入口页面 ,
        
         *  添加 容器
 *  简单演示 :

// 1 导入 react 和 reac-dom
    import React from 'react'
    import ReactDOM from 'react-dom'
    
    // 2 创建 react 元素
    const h1 = React.createElement('h1', null, 'Hello React CLI')
    
    // 3 渲染 react 元素
    ReactDOM.render(h1, document.getElementById('root'))

*  回忆小练习 :

const ul = React.createElement('ul', { 
      id : 'list',
      className : 'red'
    },
    React.createElement('li',null,'苹果'),
    React.createElement('li',null,'香蕉'),
    React.createElement('li',null,'橘子')
    )

*  JSX 改造 小练习

const ul = <ul id="list" className='red'>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橘子</li>
      </ul>

## JSX ##

\#\#\#\#JSX 的介绍

*  **JSX** 是 JavaScript XML 的简写, 是一个 JavaScript 的语法扩展。表示在 JS 中写 XML（HTML）格式的代码
    
     *  xml :
     *  html :
     *  注意 , 它既不是 xml, 也不是html, 它就是 JSX
 *  为什么要使用 JSX ？ : 爽
    
     *  1 简洁
     *  2 直观
     *  3 对开发人员友好
     *  4 几乎没有增加额外的学习成本

#### JSX 的基本使用和注意点 ####

*  **使用**

// 使用 JSX 创建 react 元素
    const h1 = <h1 className="cls">Hello JSX!</h1>
    
    // 渲染 react 元素
    ReactDOM.render(h1, document.getElementById('root'))

*  **注意点**
    
     *  注意点1 : JSX 也只能由一个根节点 可以使用 `div 或者 </>` 包裹起来. (空标签)
     *  注意点2 : 如果 结构比较复杂, 建议使用 `()` 把代码块包裹起来
     *  注意点3 : JSX 其实底层还是转化成了 React.createElement() 运行的 , [babel 中文网][babel]

const h1 =(<div>
          <div className='cls'> 我是div</div>
          <div className='cls'> 我是div</div>
      </div>)

#### 在 JSX 中嵌入表达式 ####

*  **语法** : `<div>{ js 表达式 }</div>`
    
     *  \{\} 中可以使用 任意j表达式
 *  **可以使用表达式**
    
     *  读取变量 : `<div > { name }</div>`
     *  运算 : `<div> {1+2}</div>`
     *  三元 : `<div > { true ? '真' : '假' }</div>`
     *  函数 : `<div > { [1,4,7].join('-') }</div>` \`
 *  **不能使用**
    
     *  不能使用 语句 `<div > { if(){} }</div> 报错`
 *  **注意点 :** **属性内可以使用 \{\}**
    
     *  `<div title={ name } ></div>`

[babel]: https://www.babeljs.cn/