React 教程 | 菜鸟教程


本站和网页 https://www.runoob.com/react/react-tutorial.html 的作者无关,不对其内容负责。快照谨为网络故障时之索引,不代表被搜索网站的即时页面。

React 教程 | 菜鸟教程
菜鸟教程 -- 学的不仅是技术,更是梦想!
首页
HTML
CSS
JavaScript
Vue
Bootstrap
NodeJS
Python3
Python2
Java
C++
C#
Go
SQL
Linux
jQuery
本地书签
首页
HTML
CSS
JS
本地书签
Search
Python3 教程
Python2 教程
Vue3 教程
vue2 教程
Bootstrap3 教程
Bootstrap4 教程
Bootstrap5 教程
Bootstrap2 教程
React 教程
React 教程
React 安装
React 元素渲染
React JSX
React 组件
React State(状态)
React Props
React 事件处理
React 条件渲染
React 列表 & Keys
React 组件 API
React 组件生命周期
React AJAX
React 表单与事件
React Refs
React 安装
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 教程
CSS 教程
JavaScript 教程
ES6 教程
React 第一个实例
在每个章节中,您可以在线编辑实例,然后点击按钮查看结果。
本教程使用了 React 的版本为 16.4.0,你可以在官网 https://reactjs.org/ 下载最新版。
React 实例
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
尝试一下 »
或者使用 create-react-app 工具(下一章节会介绍)创建的 react 开发环境:
实例
import React from "react";
import ReactDOM from "react-dom";
function Hello&#40;props&#41; &#123;
return <h1>Hello World!</h1>;
&#125;
ReactDOM.render&#40;<Hello />, document.getElementById&#40;"root"&#41;&#41;;
这时候浏览器打开 http://localhost:3000/ 就会输出:
Hello World!
React 安装
点我分享笔记
取消
分享笔记
昵称昵称 (必填)
邮箱邮箱 (必填)
引用地址引用地址
分类导航
HTML / CSSHTML 教程HTML5 教程CSS 教程CSS3 教程Bootstrap3 教程Bootstrap4 教程Bootstrap5 教程Font Awesome 教程Foundation 教程 JavaScriptJavaScript 教程HTML DOM 教程jQuery 教程AngularJS 教程AngularJS2 教程Vue.js 教程Vue3 教程React 教程TypeScript 教程jQuery UI 教程jQuery EasyUI 教程Node.js 教程AJAX 教程JSON 教程Echarts 教程Chart.js 教程Highcharts 教程Google 地图 教程 服务端Python 教程Python2.x 教程Linux 教程Docker 教程Ruby 教程Java 教程C 教程C++ 教程Perl 教程Servlet 教程JSP 教程Lua 教程Rust 教程Scala 教程Go 教程PHP 教程数据结构与算法Django 教程Zookeeper 教程设计模式正则表达式Maven 教程Verilog 教程ASP 教程AppML 教程VBScript 教程 数据库SQL 教程MySQL 教程PostgreSQL 教程SQLite 教程MongoDB 教程Redis 教程Memcached 教程 数据分析Python 教程NumPy 教程Pandas 教程Matplotlib 教程Scipy 教程R 教程Julia 教程 移动端Android 教程Swift 教程jQuery Mobile 教程ionic 教程Kotlin 教程 XML 教程XML 教程DTD 教程XML DOM 教程XSLT 教程XPath 教程XQuery 教程XLink 教程XPointer 教程XML Schema 教程XSL-FO 教程SVG 教程 ASP.NETASP.NET 教程C# 教程Web Pages 教程Razor 教程MVC 教程Web Forms 教程 Web ServiceWeb Service 教程WSDL 教程SOAP 教程RSS 教程RDF 教程 开发工具Eclipse 教程Git 教程Svn 教程Markdown 教程 网站建设HTTP 教程网站建设指南浏览器信息网站主机教程TCP/IP 教程W3C 教程网站品质
Advertisement
反馈/建议
在线实例
&middot;HTML 实例
&middot;CSS 实例
&middot;JavaScript 实例
&middot;Ajax 实例
&middot;jQuery 实例
&middot;XML 实例
&middot;Java 实例
字符集&工具
&middot; HTML 字符集设置
&middot; HTML ASCII 字符集
&middot; JS 混淆/加密
&middot; PNG/JPEG 图片压缩
&middot; HTML 拾色器
&middot; JSON 格式化工具
&middot; 随机数生成器
最新更新
&middot;
Go fmt.Printf ...
&middot;
CSS backdrop-filte
&middot;
使用 JS 的 down...
&middot;
Navigator produ...
&middot;
Navigator onLin...
&middot;
Navigator langu...
&middot;
Navigator geolo...
站点信息
&middot;
意见反馈
&middot;
免责声明
&middot;
关于我们
&middot;
文章归档
关注微信
Copyright 2013-2022 菜鸟教程
runoob.com All Rights Reserved. 备案号:闽ICP备15012807号-1
微信关注