React学习笔记 - Hello World
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 ...
随机推荐
- 用 ASP.NET MVC 实现基于 XMLHttpRequest long polling(长轮询) 的 Comet
ASP.NET 计时器 http://www.cnblogs.com/dudu/archive/2011/10/17/2215321.html http://www.cnblogs.com/w ...
- codeforces1097D Makoto and a Blackboard 数学+期望dp
题目传送门 题目大意: 给出一个n和k,每次操作可以把n等概率的变成自己的某一个因数,(6可以变成1,2,3,6,并且概率相等),问经过k次操作后,期望是多少? 思路:数学和期望dp 好题好题!! ...
- Ubuntu 15.04 下apt-get安装JDK
[From] http://blog.csdn.net/skykingf/article/details/45250017 1.删除自带的OpenJDK [python] view plain cop ...
- MySQL 重设root密码
Mysql 5.6.15版本的windows下的重设root密码,找了n个帖子终于弄明白了. 1. 开一个cmd窗口,进入Mysql的安装目录的bin文件夹,然后运行这个: mysqld --skip ...
- 合唱团---DP
https://www.nowcoder.com/practice/661c49118ca241909add3a11c96408c8?tpId=85&tqId=29830&tPage= ...
- Gradle发布项目到 maven 之gradle-bintray-plugin(2)
上传的方式有两种,第一种是通过 bintray 官方出的插件 bintray/gradle-bintray-plugin 第二种是一个国外组织开源的插件 novoda/bintray-release ...
- oracle 笔记---(四)__数据字典
数据字典 user_* 该视图存储了关于当前用户所拥有的对象的信息.(即所有在该用户模式下的对象) all_* 该试图存储了当前用户能够访问的对象的信息.(与user_*相比,all_* 并不需要拥 ...
- Oracle RAC集群添加节点
一,节点环境 所有节点分发/etc/hosts,这里我添加两个节点,一个是上次删除的节点,另一个是什么都没有的节点,尝试添加 服务器介绍什么的都在这hosts文件了,大家自己琢磨下 [grid@nod ...
- NodeJS 实现阿里云推送。
虽然阿里云推送也有 NodeJS SDK ,只要在项目中引用 aliyun-sdk 就可以使用了.里面的推送功能了. 我在这里就不写怎么使用aliyun-sdk.给出来的DEMO是回调形式的.用起来有 ...
- MongoDB的MapReduce用法及php示例代码
MongoDB虽然不像我们常用的mysql,sqlserver,oracle等关系型数据库有group by函数那样方便分组,但是MongoDB要实现分组也有3个办法: * Mongodb三种分组方式 ...