IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 我学习React框架的开端 -> 正文阅读

[JavaScript知识库]我学习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遍历渲染了一个简单的列表。

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

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-07-27 16:07:20  更:2021-07-27 16:08:19 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 0:25:57-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码