胖蔡叨叨叨
你听我说

React 前端框架介绍

什么是React?

React 起源于Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。

由于 React的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。

阅读本教程前需要您具备如下基础知识:

  • HTML
  • CSS
  • JavaScript

React 设计特性

  • 声明式开发
    React采用声明范式,可以轻松描述应用
  • 虚拟DOM,高效速度快,跨浏览器兼容
    React的虚拟DOM,是一个存储于内存中的JavaScript对象,react先将页面发生的变化更新到虚拟DOM,每一次的变化都和上一次虚拟DOM的状态进行比较,找到变化的部分,最终React会将包含了所有变化的虚拟DOM与真实DOM进行比较,找到DOM发生变化的部分,一次性应用到DOM上,从而提高页面渲染速度与性能。
  • 组件化编程
    组件是React的核心,一个完整的react应用是由若干个组件搭建起来的,每个组件有自己的数据和方法,组件具体如何划分,需要根据不同的项目来确定。通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。
  • 单向数据流
    React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。
  • JSX
    JSX JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。
  • 框架并存
    React所控制的dom就是idrootdom,页面上的其他dom元素你页可以使用jq等其他框架。所以React是可以和其他框架并存的。

安装

React 安装使用可以通过两种方式:一种可以直接在html源码通过script标签引入,另一种可以通过npm管理工具进行下载管理。

直接引用

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8" />
 <title>React demo</title>

 <!-- 官方cdn镜像 -->
 <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
 <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 <!-- 生产环境中不建议使用 -->
 <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
 </head>
 <body>

 <div id="root"></div>
 <script type="text/babel">
 ReactDOM.render(
     <h1>Hello, Reactjs!</h1>,
     document.getElementById('root')
 );
 </script>

 </body>
 </html>

 

通过npm下载

npm下载需要本地环境以及安装了Nodejs,可以将npm设置为国内的源,加快访问速度,也可以安装yarn来替代npm处理包依赖安装。

$ npm config set registry https://registry.npm.taobao.org
 $ npm config get registry
 $ yarn config set registry https://registry.npm.taobao.org
 $ yarn config get registry
 

可以通过Facebook提供的create-react-app命令来创建react工程,完成项目的初始化创建:

$ npm install -g create-react-app
 $ create-react-app my-react-app
 $ cd my-react-app
 $ yarn start

 

显示结果如下:

React demo缩略图
赞(0) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » React 前端框架介绍
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏