【React全解0】React起步+JSX语法

最新推荐文章于 2021-12-06 14:59:48 发布

不知名网友小H

最新推荐文章于 2021-12-06 14:59:48 发布

阅读量173

点赞数 1

分类专栏：前端 React 笔记文章标签： javascript reactjs html5

本文链接：https://blog.csdn.net/qq_44906900/article/details/109593891

版权

前端同时被 3 个专栏收录

46 篇文章 0 订阅

订阅专栏

笔记

23 篇文章 0 订阅

订阅专栏

React

7 篇文章 3 订阅

订阅专栏

React 是一个用于构建用户界面的 JavaScript 库。个人而言，对比Vue。React注重函数式和类的编程，对JS基础要求较高，它只是为我们提供一些有用的API。Vue则不同，自己封装了各种各样的自己的东西。对新手十分友好，而且能快速上手，十分易懂。
Vue：能做的都帮你做了，只要学会Vue即可。

React：能不做的都不帮你做，它在促使我们思考函数的本质。

写React当做JS写即可。

二、引入React的方式

1、从CDN引入React

BootCDN

直接在里面搜索React即可。
CDN引入（注意顺序）
1. 引入React：http://…/react.min.js
2. 引入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的区别
1. cjs：全称为CommonJS，是Node.js支持的模块规范
2. umd：统一模块定义，兼容各种模块规范（含浏览器）
3. 理论上优先使用umd，同时支持Node.js和浏览器。最新的模块规范是使用import和export关键字。

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'));

不知名网友小H

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【React全解0】React起步+JSX语法

目录React简介引入React的方式JSX语法控制语句React初体验--实现+1功能一、React简介React 是一个用于构建用户界面的 JavaScript 库。个人而言，对比Vue。React注重函数式和类的编程，对JS基础要求较高，它只是为我们提供一些有用的API。Vue则不同，自己封装了各种各样的自己的东西。对新手十分友好，而且能快速上手，十分易懂。Vue：能做的都帮你做了，只要学会Vue即可。React：能不做的都不帮你做，它在促使我们思考函数的本质。写Re
复制链接

扫一扫