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

npm 最火的 + 淘宝镜像

cnpm 国内 (demo => ok 项目=> cnpm 不要弄)

yarn : Facebook

使用前必须安装 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 文件

<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

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" />

小练习 :

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

总结 : 使用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 中文网

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>

React基础学习（第一天）

React

概述 :

特点

React 的基本使用

React 的安装

React 的基本使用

我是h1

createElement方法说明

属性的特殊要求

小练习 :

React 脚手架

使用脚手架的意义

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

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

React 脚手架中使用 react

JSX

JSX 的基本使用和注意点

在 JSX 中嵌入表达式

猜你喜欢