小白教程
所有教程
关于
Search
172.71.254.44
172.71.254.44
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“React 教程”的源代码
本页内容
下一节:
React_安装
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:React 教程}}[[Category:React 教程|1]] = React 教程 = React 是一个用于构建用户界面的 JAVASCRIPT 库。 React 主要用于构建 UI,很多人认为 React 是 MVC 中的 V(视图)。 React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。 React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。 == React 特点 == * '''1.声明式设计''' −React采用声明范式,可以轻松描述应用。 * '''2.高效''' −React通过对DOM的模拟,最大限度地减少与DOM的交互。 * '''3.灵活''' −React可以与已知的库或框架很好地配合。 * '''4.JSX''' − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。 * '''5.组件''' − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。 * '''6.单向响应的数据流''' − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。 == 阅读本教程前,您需要了解的知识: == 在开始学习 React 之前,您需要具备以下基础知识: * [[html tutorial|HTML 教程]] * [[css tutorial|CSS 教程]] * [[js tutorial|JavaScript 教程]] * [[es6 tutorial|ES6 教程]] == React 第一个实例 == 在每个章节中,您可以在线编辑实例,然后点击按钮查看结果。 本教程使用了 React 的版本为 16.4.0,你可以在官网 https://reactjs.org/ 下载最新版。 == React 实例 == <sample title="" desc="" lang="html" hererun="1"> <div id="example"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') ); </script> </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') ); </script> </body> </html> </run> 或者使用 create-react-app 工具(下一章节会介绍)创建的 react 开发环境: <sample title="" desc="" lang="html" hererun="1"> import React from "react"; import ReactDOM from "react-dom"; function Hello(props) { return <h1>Hello World!</h1>; } ReactDOM.render(<Hello />, document.getElementById("root")); </sample> 这时候浏览器打开 '''http://localhost:3000/''' 就会输出: <pre>Hello World!</pre>
返回至“
React 教程
”。
下一节:
React_安装