一 标准方法
安装node,yarn
yarn create react-app my-app
cd my-app
yarn start
环境搭建已经如此简单了,之后就是编写代码和调试.
二 local方法
另一种无需server的方法是利用electron和babel.
目录结构:
my-app
├── .babelrc
├── package.json
├── main.js
└── src
├── index.local.js
├── App.js
└── index.html
.babelrc文件内容
{
"presets": [
[
"react",
"es2015",
"stage-1"
]
}
electron 包说明文件
{
"name": "htmleditor",
"homepage": ".",
"main": "main.js",
"scripts": {
"local": "electron . --local",
}
}
main.js文件
...
mainWindow.loadURL(`file://${__dirname}/src/index.html`);
...
index.html文件
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="root">root</div>
<script>
require('babel-register');
require('babel-polyfill');
require('./index_local.js');
</script>
</body>
</html>
index.local.js文件就是react app 的入口.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));