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的更多相关文章

  1. react学习笔记1--基础知识

    什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...

  2. React学习笔记--程序调试

    React学习笔记 二 程序调试   前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...

  3. React学习笔记（一）- 入门笔记

    React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...

  4. React学习笔记（七）条件渲染

    React学习笔记(七) 六.条件渲染 使用if或条件运算符来创建表示当前状态的元素. 可以使用变量来存储元素.比如: let button = null; if (isLoggedIn) { but ...

  5. React学习笔记（六）事件处理

    React学习笔记(六) 五.事件处理 React事件绑定属性的命名采用驼峰写法,不同于传统DOM全部小写. 如果采用JSX的语法,事件函数需要用大括号{}包裹函数名,不同于传统DOM字符串小括号的方 ...

  6. React学习笔记（五）State&声明周期

    React学习笔记(五) 四.State&声明周期 可以为组件添加"状态(state)".状态与属性相似,但是状态是私有的,完全受控于当前组件. 局部状态就是只能用于类(定 ...

  7. React学习笔记 - 组件&Props

    React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...

  8. React学习笔记 - 元素渲染

    React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...

  9. React学习笔记 - JSX简介

    React Learn Note 2 React学习笔记(二) 标签(空格分隔): React JavaScript 一.JSX简介 像const element = <h1>Hello ...

随机推荐

  1. 洛谷 P2542 [AHOI2005]航线规划（Link-cut-tree）

    题面 洛谷 bzoj 题解 离线处理+LCT 有点像星球大战 我们可以倒着做,断边变成连边 我们可以把边变成一个点 连边时,如果两个点本身不联通,就\(val\)赋为\(1\),并连接这条边 如果,两 ...

  2. AJAX概述和简单使用

    一.ajax概述: asynchronous javascript and xml ,用于异步的向服务器发出请求,接收数据的 一种技术. 在整个过程中:页面无刷新,不打断用户的操作: 按需要获取数据, ...

  3. git 下载 安装

    1.下载Git,官网地址:https://git-scm.com/,进入官网首页 在右下方的显示器中找到最新的版本下载,点击下载,跳转到下载页面 下载完成 2.安装Git 双击刚刚下载完成的安装文件, ...

  4. VBS虚拟键盘十六进制列表

    Set WshShell=WScript.CreateObject("WScript.Shell") '打开我的电脑WshShell.Sendkeys chr(&h88b6 ...

  5. Java中filter内处理重定向遇到的问题

    这是在Java中filter内处理重定向遇到的问题.本意是写一个做URL rewrite 的filter,来重写URL,同时在处理登陆过程中要杀掉当前session,创建新session来代替. 1. ...

  6. Flutter FormatException: Bad UTF-8 encoding 0xc3 (at offset 172)

    是文件编码问题. 1,打开 Android Studio 进入设置界面 Ctrl + Alt + S 或 File --> Settings 打开如下界面: 2,将 Project Encode ...

  7. Quartz.NET 作业调度使用

    Quartz.NET的使用方法有很多,今天使用Quartz.NET3.0.6的时候发现和2.0版本的语法不太一样,百度上找了一圈也没有找到解决办法 后来在GitHub上下载源代码解决了 实现每隔10s ...

  8. Oracle RAC集群搭建(一)-ASM共享存储卷

    01, ASM共享存储卷 安装集群的话,必须要有共享磁盘,目的是为作裁决磁盘使用.还需要有数据文件的共享磁盘 02,规划 主机 裁决磁盘 数据 rac1        1G*1          20 ...

  9. oracle 备份恢复篇(一)---rman

    一,rman介绍 RMAN(Recovery Manager)是随Oracle服务器软件一同安装的工具软件,它可以用来备份和恢复数据库文件.归档日志和控制文件,用来执行完全或不完全的数据库恢复.与传统 ...

  10. AI从入门到放弃：CNN的导火索，用MLP做图像分类识别？

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:郑善友 腾讯MIG后台开发工程师 导语:在没有CNN以及更先进的神经网络的时代,朴素的想法是用多层感知机(MLP)做图片分类的识别:但 ...