【01】react 之 hello world
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。
官网：http://facebook.github.io/react/
1、环境搭建
》》》普通的用法：需要三个文件。react.js核心文件、react-dom就是适应amd 、cmd 等进行的封装、bebel就是es6和jsx转译。上线之后就不用了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
代码。。。。</script>
</body>
</html>
》》》CommonJS 模式 browserify or webpack
// main.js
var React = require('react');
var ReactDOM = require('react-dom'); ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
2、hello ， world 例子
重点语法：先创建一个组件 var Hello = React.createClass({}); 组件内定义render 并返回 ，使用组件渲染：ReactDOM.render(,)两个参数，一个是要渲染的组件。
<div id="example"></div>
<script type="text/babel">
var Hello = React.createClass({
render:function(){
return <h1>hello word</h1>
}
})
ReactDOM.render(
<Hello />,
document.getElementById('example')
);
</script>
3、jsx 组件 单项数据绑定 虚拟DOM
》》》jsx ： HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写。JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。
》》》组件 ： React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。组件类的第一个字母必须大写，否则会报错。
》》》虚拟DOM ：在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并。
》》》单项数据绑定：不同于mvc，类似于php和html混写的写法
【01】react 之 hello world的更多相关文章
- React笔记01——React开发环境准备
1 React简介 2013年由Facebook推出,代码开源,函数式编程.目前使用人数最多的前端框架.健全的文档与完善的社区. 官网:reactjs.org 阅读文档:官网中的Docs React ...
- React 也就这样 01——React 元素的创建和渲染
React 是一个用于构建用户界面的 JavaScript 库 它包括两个库:react.js 和 react-dom.js react.js:React 的核心库,提供了 React.js 的核心功 ...
- react 也就这么回事 01 —— React 元素的创建和渲染
React 是一个用于构建用户界面的 JavaScript 库 它包括两个库:react.js 和 react-dom.js react.js:React 的核心库,提供了 React.js 的核心功 ...
- 【视频合集】极客时间 react实战进阶45讲 【更新中】
https://up2.v.sharedaka.com/video/ochvq0AVfpa71A24bmugS5EewhFM1553702519936.mp4 01 React出现的历史背景及特性介绍 ...
- Redux学习day1
01.React介绍 Redux是一个用来管理管理数据状态和UI状态的JavaScript应用工具.随着JavaScript单页应用(SPA)开发日趋复杂,JavaScript需要管理比任何时候都要多 ...
- React 实践记录 01 组件开发入门
Introduction 本文组成: Ryan Clark文章Getting started with React的翻译. 博主的实践心得. React由Facebook的程序员创建,是一个非常强大的 ...
- React Native 开发之 (01) 配置开发环境
一 React Native React Native 是由Facebook发布的开源框架,着力于提高多平台开发的开发效率 —— 仅需学习一次,编写任何平台.(Learn once, write an ...
- React Native 学习-01
React Native 学习 (学习版本 0.39) 一.环境配置 二.IDE选择 webstorm 1.webstorm配置 ①.首先是可以选择使用汉化包汉化.eu68 ②.安装插件和外部库. 由 ...
- react学习笔记-01
1. HTML模板 Jsx是react的语法糖,最终会被编译成js语法.因此需要第三方库browser将jsx转换成js. 由于react 0.14版本之后,将react和react-dom拆分,所以 ...
- react学习01
react react render()函数返回只能是一个标签(里面可以包其他东西) state(状态) vs props(属性) state 改变,视图改变,state是一个组件里面的状态,然后pr ...
随机推荐
- 处理侧滑返回与 ScrollView 手势冲突
与处理双击.单击手势互斥原则一样: // 手势互斥(侧滑返回手势失效后才响应UITableView的滑动手势) [tableView.panGestureRecognizer requireGestu ...
- jrtplib移植
jrtplib版本:3.11.1 jthread版本:1.3.3 libsrtp版本:1.6.0 jrtplib库有两种编译方式: 1. 使能jthread编译,此方式可使jrtplib自动在后台轮询 ...
- 爬虫学习（八）——带cookie的网页进行爬取
# 前提:# # 通常,很多网站需要登录才能进行浏览,所以在爬取这些网站时,也需要进行登录,并拿取登录时的cookie# # 登录网页,服务器会给客户端一个牌子cookie# # 访问登录页面时,带着 ...
- Linux系统故障分析与排查--日志分析
处理Linux系统出现的各种故障时,故障的症状是最先发现的,而导致这以故障的原因才是最终排除故障的关键.熟悉Linux系统的日志管理,了解常见故障的分析与解决办法,将有助于管理员快速定位故障点,“对症 ...
- nodeJS 服务端文件上传
var http = require('http'); var path = require('path'); var fs = require('fs'); function uploadFile( ...
- 二 python并发编程之多进程-重点
一 multiprocessing模块介绍 python中的多线程无法利用多核优势,如果想要充分地使用多核CPU的资源(os.cpu_count()查看),在python中大部分情况需要使用多进程.P ...
- 二 python并发编程之多进程-理论
一 什么是进程 进程:正在进行的一个过程或者说一个任务.而负责执行任务则是cpu. 举例(单核+多道,实现多个进程的并发执行): egon在一个时间段内有很多任务要做:python备课的任务,写书的任 ...
- jupyter notebook（三）——IOPub_data_rate_limit报错
一.问题 运行jupyter notebook,然后运行python代码,读取文件处理时,会报错.发现时IO读取时错误.应该是IO速率问题. 下面是问题报错: IOPub data rate exce ...
- 【CSS】CSS 的优先级总结
样式的优先级 多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External styl ...
- ZendFramework-2.4 源代码 - 关于MVC - View层 - 在模板内渲染子模板
<?php // 方式一: // 1.在模板内直接编写如下内容即可 $viewModel = new ViewModel(); $viewModel->setTemplate('album ...