React环境搭建、jsx语法、渲染语句、绑定属性以及事件响应

你华还是你华

已于 2024-09-21 12:02:18 修改

阅读量746

点赞数 3

分类专栏： React 文章标签： react npm

于 2020-04-22 01:06:38 首次发布

本文链接：https://blog.csdn.net/weixin_44103733/article/details/105671335

版权

React 专栏收录该内容

4 篇文章 8 订阅

订阅专栏

本文目录

前言
1、React环境搭建
2、jsx语法以及变量绑定和三种渲染语句
3、绑定属性
4、绑定事件以及事件的响应

前言

在前端开发的广阔领域中，React凭借其独特的组件化架构、高效的性能优化和活跃的社区支持，成为了构建现代Web应用的热门选择。对于初学者而言，掌握React的基础知识是踏入这个强大框架的第一步。
本篇文章将直接针对React的基础内容进行实战教学，从开发环境的搭建出发，逐步深入到JSX语法的使用、变量绑定、条件渲染的多种方式（if语句、三元运算符、逻辑运算符），以及React中如何绑定属性和处理事件。每一部分都紧密围绕React的核心概念，旨在帮助读者快速上手并理解React的工作原理。

1、React环境搭建

首先在桌面创建文件夹react-demo，拖到编辑器，VsCode或者WebStorm都可以。我这边使用VsCode。在根目录下创建src文件夹。在根目录下创建index.html文件输入！按Tab快速输出网页模板，在body里创建<div id="app"> </div>在head标签中引入React，CDN文件如下：

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

（PS：这些在官网都可以找到，那这边为什么会有两个CDN文件呢，学过Vue的都应该知道Vue的话只有一个CDN文件，那么在React中其实第一个是基础React语法比如jsx语法还有一些核心的语法都在这个里面，第二个CDN，react-dom就是把我们的这个react渲染到web页面的一个库，为什么分开呢，之前还合在一起，因为现在react能做很多，不仅仅是web页面，还可以开发App（react-native），现在引入react-dom告诉react现在应用的是dom的平台也就是网页平台。如果你写好的东西要引入app里就要引入react-native。）
再在根目录下创建public文件夹，再在public文件下创建scripts文件夹，再在scripts文件夹下创建app.js，并且在index.html下引入这个app.js。
最后index.html内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="./public/scripts/app.js"></script>
</body>
</html>

目录结构树如下：

react-demo
├── index.html
├── public
│   └── scripts
│       └── app.js
├── src
│   ├── app.js

安装本地服务器live-server去运行项目，首先得先安装node，node的安装很简单，直接去官网安装，然后在编辑器下打开终端输入命令npm install -g live-server 全局安装。输入live-server，就会在本地8080端口开启服务。在public文件夹下的scripts文件夹下app.js中打印两个变量console.log(React);console.log(ReactDOM) 因为引入了React的CND所以在全局有两个变量。F12或者右键鼠标点击检查调出浏览器控制台，查看打印出来没有报错，说明准备工作完绪。如图所示：
接着熟悉jsx语法，在javascript（public文件夹下的scripts文件夹下app.js）里面去写html代码，
const template = 我是一个P标签 然后再调用ReactDom的变量ReactDOM.render(template, document.getElementById('app'))
（ps：ReactDOM接收两个参数，first-param：template，second-param：dom）
一刷新发现报错，如图：

为什么，因为jsx不是浏览器认识的语法，所有要将jsx换成JavaScript语法，所以采用babel插件，将jsx语法转化为JavaScript语法（babel插件本质上将jsx语法转为React.createElement( )函数）例如这段代码
ReactDOM.render(React.createElement('div', {id: 'unique'}, [React.createElement('p', null, '我是一个p标签'),'我是一个div标签']), document.getElementById('app')
会生产代码如图：

但是这种方式创建太麻烦。

直接以这种写法： const template = 我是一个P标签 然后再调用ReactDom的变量ReactDOM.render(template, document.getElementById('app')) 会简单很多，因为就是jsx语法，所以安装babel插件，新建终端，输入命令，npm init -y 快速生产项目说明书，然后在输入命令
npm install @babel/core @babel/cli @babel/preset-env @babel/preset-react --save-dev
然后在package.json里面的scripts里面配置，"babel": "babel", 在根目录文件下创建.babelrc文件写入{ "presets": ["@babel/preset-env", "@babel/preset-react"]} ，紧接着我们把public文件下的scripts文件下的app.js里面的
const template = 我是一个P标签
ReactDOM.render(template, document.getElementById('app')) 这两行代码剪切下来，复制到src文件夹下的app.js中。
然后在终端输入命令 npm run babel -- src/app.js -o public/scripts/app.js -w 发现public/scripts/app.js文件里就转化成ReactDOM.render(template, document.getElementById('app')) 这样格式的代码了，附上一张美美的图如下：

至此就可以用这个项目来跑一些react小demo。

2、jsx语法以及变量绑定和三种渲染语句

(tips: 在我们写
const template = 我是一个P标签时，可以个html写过括号括起来
const template = (我是一个P标签)
这样可读性就会比较好。)

2.1 变量绑定

1、变量的绑定：在src文件夹下app.js中我们写了html代码，费劲心思转换为html真正能运行的代码，那为什么不直接在index.html直接写呢，其实不然，我们还可以进行变量的绑定。例如下图：
在这里插入图片描述
我们定义了一个a变量，并且在html中用了{ }花括号将变量写入，这就是变量的绑定语法，（熟悉Vue的应该知道，在Vue里用双大花括号{{}}去绑定变量。）
我们打开public文件夹下的scripts文件夹下的app.js如下图：
在这里插入图片描述
我们发现已经渲染并且生效好了，而且在浏览器里也展示了：
我们还可以绑定一个函数，如下图：

此时打开浏览发现浏览变空白了，打开终端发现报错了：

这是为什么呢？因为在react中数据绑定不能绑定一个对象，因为在这里它不知道你要渲染对象里的哪个值，所以报错了，我们改成：
在这里插入图片描述
看见浏览器正确输出：

2.2 三种渲染语句

2.2.1 if 语句进行条件渲染

if 语句进行条件渲染，如下图：在这里插入图片描述
可以看到浏览器输出：

当我们修改product为空数组可以发现浏览器显示：
这就是jsx可以在一个函数里面去写html设计类语言，并且可以根据值是否有而决定渲染的语句。

2.2.2 三步运算符进行条件渲染

如下图：
在这里插入图片描述
可以看到浏览器显示：

将删除product里的favorite字段，浏览器显示：

2.2.3 逻辑运算符进行条件语句渲染

逻辑运算符进行条件语句渲染：
在这里插入图片描述
可以看到浏览器显示：

同样的将favorite属性删除，浏览器什么都不显示。

至此，我们简单的熟悉了React中的两小块基础。

3、绑定属性

绑定属性：
我们用vscode打开之前在桌面建好的react-demo文件，打开vscode终端命令行输入命令live-server启动服务，再在vscode再开启一个命令行输入

npm run babel -- src/app.js -o public/scripts/app.js -w

我们最后写了如下代码：

// 逻辑运算符进行条件渲染
let product = {
    favorite: 'React'
}
const template = (
    <div>
        {product.favorite && <div>我喜欢的语言有: {product.favorite}</div>}
    </div>
)
ReactDOM.render(template, document.getElementById('app'))

可以看到此时网页显示的内容：在这里插入图片描述
好的，平常我们在html元素上可以写写很多属性，例如 id，class等等，那我们这边也给这个常量template中的div加上id 以及class

<div id="react" class="react-class">
     {product.favorite && <div>我喜欢的语言有: {product.favorite}</div>}
</div>

发现浏览器终端已经报错了：
在这里插入图片描述
这是为什么呢？因为我们写的是jsx语法，在js中去写了html，而在js中class已经是关键词了，所有不能有冲突，报错其实已经给我们提示了，把class改成className就可以了，具体更多的属性冲突问题可以查看这里。

4、绑定事件以及事件的响应

绑定事件以及事件的响应

let count = 0;
let add = () => {
    count++
    console.log(`count = ${count}`)
}
const template = (
    <div>
        <div>{count}</div>
        <button onClick={add}>+1</button>  
    </div>
)

ReactDOM.render(template, document.getElementById('app'))

在React里事件绑定例如点击事件用onClick绑定在标签上，并且花括号的形式将外界函数写入，当然也可以写成这种形式：

<button onClick={
            () => {
            count++
            console.log(`count = ${count}`)
            }
        }>+1</button>

直接在花括号里去写，这边还是建议写在外面，单独用函数定义。此时界面如下：
在这里插入图片描述
我们点击按钮+1，会发现：

控制台输出了count每次+1的值，那为什么这边页面却还显示0呢，这里

const template = (
    <div>
        <div>{count}</div>
        <button onClick={add}>+1</button>  
    </div>
)

页面监听的是count没有错啊，为什么不改变新值呢？那这个react的机制就是这样，从一开始我们使用了ReactDOM.render(template, document.getElementById('app'))去渲染这个模板了，一开始count的值为0渲染上，但是在后面的运行中，还需要重新的去运行这段ReactDOM.render(template, document.getElementById('app'))代码才能将count的值重新渲染，接下来我们把代码改成如下：

let count = 0;
let add = () => {
    count++
    reactRenderFunc()
    console.log(`count = ${count}`)
}
const reactRenderFunc = () => {
    const template = (
        <div>
            <div>{count}</div>
            <button onClick={add}>+1</button>  
        </div>
    )
    ReactDOM.render(template, document.getElementById('app'))
}

reactRenderFunc()