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

posted @ 2018-01-03 16:41  古宝只  阅读(1180)  评论(0编辑  收藏  举报