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 ...

随机推荐

Pollard_Rho 整数分解法【学习笔记】
引文:如果要对比较大的整数分解,显然之前所学的筛选法和是试除法都将不再适用.所以我们需要学习速度更快的Pollard_Rho算法. 算法原理: 生成两个整数a和b,计算p=gcd(a-b, n),知道 ...
HDU 6357.Hills And Valleys-动态规划(区间翻转l，r找最长非递减子序列)
题意:给一串由n个数字组成的字符串,选择其中一个区间进行翻转,要求翻转后该字符串的最长非降子序列长度最长,输出这个最长非降子序列的长度以及翻转的区间的左右端点 #include<bits/std ...
BZOJ - 2005 莫比乌斯水题
\(gcd=k+1\)时,每一个的贡献都是\(2k+1\) \(gcd=1\)时,每一个贡献为\(1\) #include<iostream> #include<algorithm& ...
关于es6 import export的学习随笔
记得之前的一次面试中,有个面试官问了我关于es6导入和导出的一些知识点,可惜当时对这方面没在意,只知道每次机械的import和export,也不知道为啥要这样用,现在静下心来,好好的把这块看了下,顺便 ...
Scala构建工具sbt的配置
时间是17年12月24日.初学Scala,想使用它的标配构建工具sbt,结果好大一轮折腾,因为公司隔离外网,需要内部代理,所以尤其折腾.下面的配置参考了好多篇不同的文章,已经没法一一留下出处了.而且还 ...
关于在scrapy中使用xpath
1. 还是以虎嗅为例,他给我返回的是一个json格式的json串 2.那么我需要操作的就是把json串转换成我们的字典格式再进行操作 str=json.loads(response.body)['da ...
转帖 JS的基础语法
1.变量 1)变量是用来存储信息的容器. 2)在javascript中使用var 运算符(variable 的缩写)加变量名定义的. varx = 10; vary = 10.1; varz = “H ...
shell 操作符详解
= 赋值操作符,可以用于算术和字符串赋值 + 加法计算 - 减法运算 * 乘法运算 / 除法运算 ** 幂运算 % 模运算取他除后的剩余数因此这个十分好求公约数 += &qu ...
[TimesTen]TT7001: User authentication failed
在使用sqldeveloper连接TimesTen一直报[TimesTen][TimesTen 11.2.2.8.0 ODBC Driver][TimesTen]TT7001: User authen ...
Java中forEach, 用来遍历数组
这里的for是Java中forEach, 用来遍历数组的.for(int i : d) 就是遍历int型数组d的每一次访问数组d的时候读取的数据放入int型的i中.和for(int i=0;i< ...

React学习笔记 - Hello World