React学习笔记 - Hello World

时间：2022-10-26 22:18:59

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&amp&semi;声明周期

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

  7. React学习笔记 - 组件&amp&semi;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. 如何在Microsoft Edge浏览器中添加一个Hello World插件

    注:本文提到的代码示例下载地址> How to add a Hello World extension to Microsoft Edge Microsoft Edge 随着Win 10一起推出 ...

  2. Marza Gift for GDC 2016

    这个帖子还是用中文写了,主要是面向国内. 这是一个趋势,就是基于UE.Unity这些日趋完善的游戏引擎以及编辑器制作便宜的3D动画.国内有<超黑学院>这种为代表,还有其他许多国漫,勉强能耐 ...

  3. git学习相关资料

    入门还是廖大师的博客. 搭建git服务器: http://blog.csdn.net/code_style/article/details/38764203

  4. &lbrack;转&rsqb;centos7 配置yum源&lpar;本地&plus;光盘&rpar;

    from:http://wangyan.org/blog/setup-local-yum-repo.html 一,本地 1.创建本地yum仓库 1.mkdir -p /yum/local #可以有N级 ...

  5. rsync 安装与配置

    1.什么是rsync Rsync(remote synchronize)是一个远程数据同步工具,可通过LAN/WAN快速同步多台主机间的文件.Rsync使用所谓的“Rsync算法”来使本地和远 程两个 ...

  6. Flips测试类（page43）

    测试用例:所用java类: StdOut,StdIn , Counter, StdRandom, public class Flips { public static void main(String ...

  7. SDKInitializer&period;initialize报错求助

    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);     ...

  8. Hadoop的安装与配置说明

    安装hadoop是一件非常容易的事情,读者可以在官网上下载到最近的几个hadoop版本.网址为http://apache.etoak.com//hadoop/core/.   目前,hadoop可以运 ...

  9. Visual Studio - 提升幸福感的N个快捷键

    现代化IDE给程序猿提供了极大的方便,掌握一些优秀的开发工具,使我们写代码时有行云流水般的快感. VS作为宇宙最强没有之一的IDE,用起来也是好幸福.下面是我最常用的快捷键,已经印在手指上,每次好像不 ...

  10. C part 1 -- 指令篇

    Windows系统的cmd(command命令行工具): Shutdown -s -t 600:表示600秒后自动关机 Shutdown -a :可取消定时关机 Shutdown -r -t 600: ...

相关文章