react 环境搭建之本地方法

一 标准方法

安装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'));

猜你喜欢

转载自blog.csdn.net/mahongquan/article/details/81012061