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,// spanReact.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 基础学习采用的编程软件是vsCode 安装Simple React Snippets插件目录组成结构 src/index.js 命令注释 src/app.js 命令注释注意: 所有命 ...
React基础学习（一）
一.虚拟DOM和真实DOM <script type="text/babel"> // 此处一定要写babel!!!!!!!// 1. 创建虚拟DOM// const ...
React基础学习笔记（一）-react前端项目的两种搭建方式
1.运行环境准备需要先进行react项目的运行环境nodeJS的安装,具体安装流程可以参考: windows版本的安装配置帮助文档:https://www.cnblogs.com/liuqiyun/ ...
React基础学习视频
React最新基础学习视频 1.网址:https://www.bilibili.com/video/BV1hE411c7L1?p=1 2.最近我越来越喜欢在b站学习,和看视频了,真的有很多好东西. 3 ...
react基础学习记录一
react 学习记录自己学习,记录便于后面回顾基础知识点的记忆: state与props state是组件自己的数据,而props是父组件通过属性赋值方式将其传送给组件:这样达到了,父子组件数据的 ...
JAVA 基础学习第一天
01-Java概述 Java语言背景介绍语言:人与人交流沟通的表达方式计算机语言:人与计算机之间进行信息交流沟通的一种特殊语言 Java语言是美国Sun公司(Stanford University ...
React基础学习-1
目录 1.React概述 1.1React简介 1.2 项目搭建 1.3项目结构说明 1.4 React 基本使用 2. JSX 2.1 JSX简介 2.2 JSX中的表达式 2.3 条件渲染 2.4 ...
React基础学习（第三天）
条件渲染 1. if / else render () {if (this.state.isLoading) { // 正在加载中return <h1>Loading...</h1& ...
React基础学习（第二天）
虚拟DOM JSX 涉及到虚拟DOM ,简单聊一下定时器渲染问题 // 方法 function render() {//2. 创建react对象let el = (<div><h ...

React基础学习（第一天）

React

概述 :

特点

React 的基本使用

React 的安装

React 的基本使用

我是h1

createElement方法说明

属性的特殊要求

小练习 :

React 脚手架

使用脚手架的意义

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

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

React 脚手架中使用 react

JSX

JSX 的基本使用和注意点

在 JSX 中嵌入表达式

React基础学习（第一天）相关推荐

最新文章

热门文章