前言
这篇文章是学习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 -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>
<script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.development.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.development.min.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel" >
const data = ['Angular','React','Vue']
const VDOM = (
<div>
<h1>前端js框架列表</h1>
<ul>
{
data.map((item,index)=>{
return <li key={index}>{item}</li>
})
}
</ul>
</div>
)
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
注意:babel的js 文件
链接:https://pan.baidu.com/s/1TehCCYX_GQrft6wvM5HUoA 提取码:1688
总结
- 讲述了以下什么是 React 框架
- 为什么我们要用它,也就是说他的优点
- 安装React脚手架并且运行起来
- 一个小demo,利用react的特性jsx遍历渲染了一个简单的列表。
以上内容就是本篇所讲述的内容,希望会对你有帮助。
|