react 环境搭建之本地方法

最新推荐文章于 2022-07-22 13:38:03 发布

马红权

最新推荐文章于 2022-07-22 13:38:03 发布

阅读量798

点赞数

分类专栏：前端 react

本文链接：https://blog.csdn.net/mahongquan/article/details/81012061

版权

前端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

react

5 篇文章 0 订阅

订阅专栏

一标准方法

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

马红权

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react 环境搭建之本地方法

一标准方法安装node,yarnyarn create react-app my-appcd my-appyarn start环境搭建已经如此简单了,之后就是编写代码和调试.二 local方法另一种无需server的方法是利用electron和babel.目录结构:my-app├── .babelrc├── package.json├── main.js...
复制链接

扫一扫