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

随机推荐

Week 5: Object Oriented Programming 9. Classes and Inheritance Exercise: int set
class intSet(object): """An intSet is a set of integers The value is represented by a ...
codeforces1097D Makoto and a Blackboard 数学+期望dp
题目传送门题目大意: 给出一个n和k,每次操作可以把n等概率的变成自己的某一个因数,(6可以变成1,2,3,6,并且概率相等),问经过k次操作后,期望是多少? 思路:数学和期望dp 好题好题!! ...
Codeforces - 527C 平衡树维护几何
题意:给定一个矩形\(W*H\),一共\(n\)次切割操作(水平/垂直),求每次操作后得出的最大面积随机按tag扫CF题目找到的题,可以分别用平衡树维护割边的位置和长度(\(x/y\)各两个) 具体 ...
Apache Shiro(二)-登录认证和权限管理数据库操作
数据库支持在上一篇中使用ini 配置文件进行了相关权限数据的配置. 但是实际工作中,我们都会把权限相关的内容放在数据库里. 所以本知识点讲解如何放在数据库里来撸. RBAC 概念 RBAC 是当下权 ...
[转] DOS命令for用法详解
[From] http://www.jb51.net/article/31284.htm for帮助文档对一组文件中的每一个文件执行某个特定命令. FOR %variable IN (set) DO ...
Oracle权限关于with admin option和with grant option的用法
1.with admin option with admin option的意思是被授予该权限的用户有权将某个权限(如create any table)授予其他用户或角色,取消是不级联的. 如授予A系 ...
PIE SDK元素的选择和取消选择
1功能简介在数据的查看等时候会用到元素的选择, 目前PIE SDK支持元素的选择和去取消选择功能,下面对这两种功能如何使用进行介绍. 2功能实现说明 2.1元素的选择 2.1.1 实现思路及原理说明 ...
esper（4-3）-Non-Overlapping Context
语法 create context context_name start start_condition end end_condition 如: // 9点到17点此context才可用(以引擎的时 ...
Java面试题搜集
这里是一些Java面试题,从"程序员小灰"公众号转载过来,备用. 项目介绍明确项目是做什么的明确项目的价值.(为什么做这个项目,它解决了用户什么痛点,它带来什么价值?) 明确项 ...
Python的logger配制文件
1:logger.conf ############################################### [loggers] keys=root,manylog,daylog [lo ...

React学习笔记 - Hello World