目录
React简介
引入React的方式
JSX语法
控制语句
React初体验--实现+1功能
一、React简介
React 是一个用于构建用户界面的 JavaScript 库。个人而言,对比Vue。
React注重函数式和类的编程,对JS基础要求较高
,它只是为我们提供一些有用的API。Vue则不同,自己封装了各种各样的自己的东西。对新手十分友好,而且能快速上手,十分易懂。
Vue:能做的都帮你做了,只要学会Vue即可。
React:能不做的都不帮你做,它在
促使我们思考函数的本质
。
写React当做JS写即可。
二、引入React的方式
1、从CDN引入React
- 直接在里面搜索
React
即可。 CDN引入(注意顺序)
- 引入React:http://…/react.min.js
- 引入ReactDOM:http://…/react-dom.x.min.js
演示示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>从BootCDN引入React</title>
</head>
<body>
<script src="https://cdn.bootcss.com/react/16.10.2/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.10.2/umd/react-dom.development.js"></script>
</body>
</html>
cjs和umd的区别
- cjs:全称为
CommonJS
,是Node.js支持的模块规范
- umd:统一模块定义,
兼容各种模块规范(含浏览器)
- 理论上优先使用umd,同时支持Node.js和浏览器。最新的模块规范是使用
import
和export
关键字。
- cjs:全称为
2、通过webpack引入
全局安装React
yarn add react react-dom
import ... from ...
import React from 'react';
import ReactDOM from 'react-dom';
其他
除webpack外,
rollup、parcel也支持上面写法
3、create-react-app–创建React项目
create-react-app 类似于 @Vue/cli的脚手架工具,它能为我们创建一个对应的react项目,它会自动为我们配置好react的相关文件。
新手用:create-react-app
老手用:webpack/rollup
全局安装create-react-app
yarn global add create-react-app
创建一个React项目
cd /* 选择你创建项目的位置 */
create-react-app /* 这里写你的项目名 */
/*
如何在当前目录创建项目
create-react-app react-demo . =>看清楚个点'.'
*/
三、JSX语法
x表示扩展,
jsx就是对JavaScript的扩展
-
对比Vue
Vue有Vue-loader,能在Vue组件中写
<template><script><style>
React有JSX,能将
<button onClick='add'>+1</button>变成React.createElement('button',{onClick:...},'+1')
。但是React不是用jsx-loader,而是用babel-loader取代,而babel-loader被webpack内置了。
React组件中的返回也
必须有一个包裹的标签
。
1、使用JSX
-
方法一、
BootCDN引入
babel.min.js
,将<script>改成<script type='text/babel'>
。babel会自动进行转译
-
方法二、
webpack+babel-loader -
方法三、
create-react-app
2、JSX基本语法
类名 -- 使用className
–而不是class
<div className='red'>类名-demo</div>
=> 转译为:React.createElement('div',{className:'red'},"n")
插入变量
标签里面的
所有JS代码使用{}包起来
{}用法
let n = 10;
<div>变量n:{n}</div>
return后面加()
在return后面加()的原因:
js会自动在return 后面补上undefined
function fn(a,b) {
return
a+b;
}
fn(1,2); //不好意思,这里打印出undefined
<React.Fragments><React.Fragments>占位符
React与Vue一样,返回的HTML里面,
最外层必须有一个包裹的标签
。但是我们又不想有多余的div等标签,怎么办?使用React提供的占位符咯。
<React.Fragments><React.Fragments>
缩写 =><></>
const App=()=>{
let n=10;
return (
<>
<div>div1</div>
<span>显示一行文字</span>
<div>变量n:{n}</div>
/* 打印对象时,最外层{}表示{}里面是JS语法,第二层{}表示对象{name:'frank',age:18} */
<div>对象obj:{{name:'frank',age:18}}</div>
</>
)
}
四、控制语句 – 对比Vue
1、条件判断
Vue的条件判断
<template>
<div>
<div v-if='n%2===0'>n是偶数</div>
<div v-else>n是奇数</div>
</div>
</template>
JSX的条件判断
const Component=()=>{
return (
n%2 ? <div>n是奇数</div>:<div>n是偶数</div>
)
}
# 或者
const Component=()=>{
return (
<div>
n%2 ? <div>n是奇数</div>:<div>n是偶数</div>
</div>
)
}
# 或者
.
.
.
小结
在Vue里:只能用Vue提供的语法进行判断
在React里:你想™怎么写就™怎么写,你就是在写JS
2、循环语句
Vue的循环语句
<template>
<div>
<div v-for="(n,index) in numbers" :key="index">
下标:{{index}}
<hr/>
值:{{n}}
</div>
</div>
</template>
React的循环语句
因为React就是在写JS,所以可以使用一些数组的API进行遍历循环等。
const Component1=(props)=>{
return (
props.numbers.map((n,index)=>{
return <div>下标:{index}--值:{n}</div>
})
)
}
# 或者
const Component2=(props)=>{
const array=[];
for(let i=0;i<props.numbers.length;i++){
array.push(<div>下标:{index}--值:{props.numbers[i]}</div>)
}
return <div>{array}</div>
}
五、React初体验–实现+1功能
题目:在页面上要求有个变动的值n和一个内容为’+1’的button按钮。点击’+1’按钮后n值变化并自增1,在页面中更新显示。
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title> 实现+1功能 </title>
</head>
<body>
<div id="root"></div>
</body>
</html>
JSX代码--后缀还是js,只不过编译器会提示你更改为JSX模式
import React from 'react';
import ReactDOM from 'react-dom';
const App=()=>{
const [n,setN]=React.useState(0);
return (
<>
<div>n:{n}</div>
<button onClick={()=>setN(i=>i+1)}>+1<button>
</>
)
}
ReactDOM.render(<App />,document.getElementById('root'));