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 Learn Note 1

React学习笔记（一）

前、Hello World

1. 创建单页面应用

2. 添加到现有应用

最新文章

热门文章