我学习React框架的开端

2021/7/26 23:05:41

编程Tag： react 组件框架 demo 开端用户界面

本文主要是介绍我学习React框架的开端，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

前言

这篇文章是学习React框架的开始，也是预示着我又开始进步了，正在观看整篇文章的你，是否有比昨天强了一些呢？

提示：以下是本篇文章正文内容，下面案例可供参考

一、React是什么？

当然，这个问题是必不可少的环节，总结起来就以下这句话：

React.js是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。

细致化的在说一说：

Facebook 开源了 React ，这是该公司用于构建反应式图形界面的JavaScript库，已经应用于构建
Instagram网站及 Facebook 部分网站。React 基于在数据模型之上声明式指定用户界面的理
念，用户界面会自动与底层数据保持同步。与前面提及的框架不同，出于灵活性考虑，React使用
JavaScript来构建用户界面，没有选择HTML。

二、为什么要用React框架？

React 是唯一一个让我真正体验到编写代码快感和舒适感。（尽管在此之前我很排斥JSX）

简约的语法，轻量的API，组织代码时的稳健，时时刻刻让我爽到溜起…

稳定的API，每次升级都是在强化和优化，相当少少少少量的API更新，即将废弃的语法，都会有警告提示，让我们更快的升级架构。

用React这种组件化的模式敲代码让我有一种类似于搭积木一样的创造快感，每一个组件都像是一组搭好的积木，你非常清楚自己做出了什么东西，它长什么样，它有什么用。它对于你来说就是一种独立的存在，但同时，这一组组搭好的组件又可以拼凑成另一个更大的东西，就这样搭搭搭搭。这个敲代码的过程让我觉得非常爽，很符合人脑创造的过程，或者更准确的说，可能更符合现实中人创造东西的过程，很直观，出了问题也很容易定位。每写一个组件，我的脑中仿佛就有了一个形状，或者说一个模子，存放在一个仓库中。每次需要的时候，把这个模子拿出来克隆一份，只要加上不同的参数，它立马就变成你想要的样子，爽到爆炸！如果你要它在不同时刻表现不同的状态，也只要操作state数据。

三、安装React脚手架

1. 首先安装Node（直接点击跳转）

# 使用这个命令来查看你的node的版本，如果出现版本号那就是安装成功了
$ node -v

2. 安装react脚手架

$ npm install -g create-react-app

3. 新建React项目

$ create-react-app demo

demo是你的项目根目录文件夹名称

4. 启动项目

$ cd demo
$ npm start

启动项目之后会自动生成一个3000的端口 http://localhost:3000，并且自动打开默认浏览器。

在这里插入图片描述

四、React的循环数据渲染

以下代码为示例便利循环

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jsx小练习</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.development.min.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.development.min.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>
	<script type="text/babel" >
		const data = ['Angular','React','Vue']
		//1.创建虚拟DOM
		const VDOM = (
			<div>
				<h1>前端js框架列表</h1>
				<ul>
					{
						data.map((item,index)=>{
							return <li key={index}>{item}</li>
						})
					}
				</ul>
			</div>
		)
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))
	</script>
</body>
</html>

注意：babel的js文件

链接：https://pan.baidu.com/s/1TehCCYX_GQrft6wvM5HUoA
提取码：1688

总结

讲述了以下什么是 React 框架
为什么我们要用它，也就是说他的优点
安装React脚手架并且运行起来
一个小demo，利用react的特性jsx遍历渲染了一个简单的列表。

以上内容就是本篇所讲述的内容，希望会对你有帮助。

这篇关于我学习React框架的开端的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！