React简单入门

Posted 2oex

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React简单入门相关的知识,希望对你有一定的参考价值。

React功能

React功能
1 React是一个用于构建用户界面的javascript
2 React主要用于构建UI,很多人认为React是MVC中的V(视图)
3 React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源
4 React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。

特点

特点介绍
声明式设计 React采用声明范式,可以轻松描述应用。
高效 React通过对DOM的模拟,最大限度地减少与DOM的交互。
灵活 React可以与已知的库或框架很好地配合。
JSX JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。
组件 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。
单向响应的数据流 React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。

引入的库

<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>

react.min.js --- React的核心库
react-dom.min.js --- 提供与 DOM 相关的功能
babel.min.js ---- Babel 可以将 ES6 代码转为 ES5 代码,这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包(package)一同使用可以让源码的语法渲染上升到一个全新的水平。

注意:
如果我们需要使用 JSX,则 <script> 标签的 type 属性需要设置为 text/babel。

jsx(React 使用 JSX 来替代常规的 JavaScript)

优点:
1. JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。

2. 它是类型安全的,在编译过程中就能发现错误。

3. 使用 JSX 编写模板更加简单快速。

虚拟Dom

1.节约资源
2.存放在内存中
3.会利用dom diff算法
4.高效

大小内存

寄存器(小) > 内存 > 硬盘

脚手架

全局安装:
npm install –-global create- react- app
初始化项目:
create- react- app myReactApp
启动服务:
	cd myReactApp 
    npm start

react

核心库

react-dom

高功能,客户端
做dom,在浏览器

渲染页面

react-native

上有一个web-view

native web

native 给一个浏览器就可以打开h5 app

manifest.json

暂存H5页面

ReactDOM.render(x,y) x: 挂载组件 y:挂载位置

webpack

historyApiFallback 重定向

以上是关于React简单入门的主要内容,如果未能解决你的问题,请参考以下文章

已解决在react+ts中 atnd 用 upload 组件报错Failed to execute ‘readAsArrayBuffer,param 1 is notof type Blob(代码片段

已解决在react+ts中 atnd 用 upload 组件报错Failed to execute ‘readAsArrayBuffer,param 1 is notof type Blob(代码片段

react入门

react-native 入门基础介绍

五子棋游戏(简单易懂,入门都能学)

React入门