React Learn Note 1

React学习笔记（一）

标签（空格分隔）： React JavaScript

前、Hello World

1. 创建单页面应用

使用Create React App。

npm install -g create-react-app

create-react-app my-app

cd my-app

npm start

准备好部署到生产环境中时，运行npm run build将会在build文件夹中创建一个优化好的应用。

2. 添加到现有应用

首先需要安装包：

npm init

npm install --save react react-dom

开发环境使用 react.development.js``react-dom.development.js。

生产环境使用react.production.min.js``react-dom.production.min.js。

如果使用像webpack或Browserify这样的构建工具：

import React from 'react';

import ReactDOM from 'react-dom';

ReactDOM.render(

    <h1>Hello, world</h1>,

    document.getElementById('root')

);

如果通过引用文件使用

注意script标签type是text/babel，而且需要引用 babel-standalone：

<!DOCTYPE html>

<html>

<head>

	<title>react demo</title>

	<script type="text/javascript" src="./node_modules/babel-standalone/babel.js"></script>

	<script type="text/javascript" src="./node_modules/react/umd/react.development.js"></script>

	<script type="text/javascript" src="./node_modules/react-dom/umd/react-dom.development.js"></script>

</head>

<body>

	<div id="root"></div>

	<script type="text/babel">

		ReactDOM.render(

			<h1>Hello, world!</h1>,

			document.getElementById('root')

		);

	</script>

</body>

</html>

The end... Last updated by: Jehorn, Jan 03, 2018, 4:51 PM

React学习笔记 - Hello World的更多相关文章

react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
React学习笔记--程序调试
React学习笔记二程序调试前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...
React学习笔记（一）- 入门笔记
React入门指南作者:狐狸家的鱼本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...
React学习笔记（七）条件渲染
React学习笔记(七) 六.条件渲染使用if或条件运算符来创建表示当前状态的元素. 可以使用变量来存储元素.比如: let button = null; if (isLoggedIn) { but ...
React学习笔记（六）事件处理
React学习笔记(六) 五.事件处理 React事件绑定属性的命名采用驼峰写法,不同于传统DOM全部小写. 如果采用JSX的语法,事件函数需要用大括号{}包裹函数名,不同于传统DOM字符串小括号的方 ...
React学习笔记（五）State&声明周期
React学习笔记(五) 四.State&声明周期可以为组件添加"状态(state)".状态与属性相似,但是状态是私有的,完全受控于当前组件. 局部状态就是只能用于类(定 ...
React学习笔记 - 组件&Props
React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...
React学习笔记 - 元素渲染
React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...
React学习笔记 - JSX简介
React Learn Note 2 React学习笔记(二) 标签(空格分隔): React JavaScript 一.JSX简介像const element = <h1>Hello ...

随机推荐

在windows10下vs2017配置opencv4.0.0
第一次配置时,有些.dll文件出错,所以用重新下载opencv配置了一遍,终于可以了,喜极而泣! 一.下载OpenCV4.0 直接到官网https://opencv.org/下载然后在下个页面选择 ...
HDU6395(分段+矩阵快速幂)
题目:http://acm.hdu.edu.cn/showproblem.php?pid=6395 给你一个式子,给出你A,B,C,D,P,n,让你求出第n项的式子Fn.(其中ABCDPn均在1e9的 ...
Codeforces - 675D 可持久化Treap 树形操作
题意:模拟二叉树的构造过程,给出$n$个节点,每次从根插入,小于当前节点转到左儿子,否则右儿子,输出第$[2,n]$个节点的父亲的权值直接手动模拟会被链式结构T掉网上找了下发现二叉树的性质 ...
postgreSQL 常用命令二
本次测试基与PostgreSQL 10.x版本创建用户 [postgres@rtm2 data]$ /opt/pgsql-10/bin/createuser rentaomin [postgres@ ...
[转]创建节约内存的JavaBean
转自:创建节约内存的JavaBean 如果编写节约内存的java对象编写Java代码的时候,大多数情况下,我们很少关注一个Java对象究竟有多大(占据多少内存),更多的是关注业务与逻辑.但是殊不知, ...
01-oracle限定查询-20190404
关系型数据库和半结构化数据(xml文件) oracle12c:c代表云计算 PDB,CDB sql语句执行顺序: 第一步:from子句控制数据来源: 第二步:where子句使用限定符对数据行过滤: 第 ...
Tortoise SVN 快速操作手册
1.库的存储结构版本库文件结构如图所示: Code文件夹为源码文件夹,doc为文档目录文件夹, 1.1 branch:分枝文件夹当多个人合作,可能有这样的情况出现:John突然有个想法,跟原先的设 ...
Hadoop Ecosystem related ports
本文总结了Hadoop生态系统中各个组件使用的端口,包括了HDFS,Map Reduce,HBase,Hive,Spark,WebHCat,Impala,Alluxio,Sqoop等,后续会持续更新. ...
Beam概念学习系列之PTransform数据处理
不多说,直接上干货! PTransform数据处理 PTransform对PCollection进行并行处理,每次处理1条,例如Filter过滤.Groupby分组.Combine统计.Join关联等 ...
求大神帮忙解决一下c#winfrom bindingNavigatorPositionItem加载直接跳转问题
c# winfrom bindingNavigatorPositionItem控件问题加载直接跳转到相对应的行的问题

React学习笔记 - Hello World