前端学习笔记 React (1) 准备的环境

准备环境

facebook, 官方文字教程

ES6, JSX

  • BrowserSync: npm install -g browser-sync 让代码有更改后自动刷新浏览器
  • Jspm: npm install -g jspm 前端包管理集成工具
  • Babel: npm install -g babel Es6, Jsx 解析器

babel 有相关的其他插件模块, babel-cli, babel-core, babel-loader, babel-preset-env, babel-preset-react 等等.

  • Webpack: npm install -g webpack 另一个前端包集成工具

Webpack 也有一些相关功能辅助插件, html-webpack-plugin, webpack-cli, webpack-dev-server…

  • React:
1
2
3
npm install jspm react-hot-loader --save-dev
jspm install react react-dom --save
jspm install semantic-ui css --save

结构

  • app: 存放项目内容
  • jspm_packages, node_modules: 存放前后端依赖包.
  • index.html 项目入口
  • config.js 存放配置

让程序跑起来

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html language="zh-hans">
<head>
<meta charset="utf-8" />
<title>One Key Candy!</title>
</head>
<body>
<div class="ui container" style="padding: 30px;">
<button class="ui green button">Hello</button>
</div>
<script type="text/javascript" src="jspm_packages/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import('app/main');
</script>
</body>
</html>

app/main.js

1
2
3
'use strict';

import 'semantic-ui/semantic.min.css!'; // 注意感叹号

更改后自动重连浏览器:

1
browser-sync start --server --no-notify --files 'index.html, app/**/*.js'
Donate - Support to make this site better.
捐助 - 支持我让我做得更好.