Javascript

我学习React框架的开端

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

前言

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


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

一、React是什么?

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

React.jsFacebook 推出的一个用来构建用户界面的 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


总结

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

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

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