前端学习笔记 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

<!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'