react import形式简单框架

之前一直通过<script type="text/babel"></script>这种形式来做react练习

现在想通过import的格式来做，想html和js分开。在实现过程中出现Unexpected token import 这种错误，原来是需要通过webpack(模块打包器)来使js可调用模块

官网简单例子链接：https://reactjs.org/docs/add-react-to-a-new-app.html

引用了react　　react-dom　　react-scripts

react-scripts:封装了webpack

public/index.html　　固定位置和文件，index.html是起始文件

public/manifest.json　　移动app的配置文件

App.js　　自己定义的组件

index.js　　调用组件，输出到index.html

registerServiceWorker.js　　固定。注册了一个service worker，用来做资源的缓存，这样你下次访问时，就可以更快的获取资源

练习：

vscode+node.js

1.在vscode中选择一个文件夹，ctrl+~　　调出终端

2.npm init //创建package.json

3.npm install react react-dom react-scripts

4.将package.json文件修改

"scripts": {
    "start": "react-scripts start"
  }

5.创建public/index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="theme-color" content="#000000">
        
        <title></title>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

6.创建src/registerServiceWorker.js

　　即将官网例子中的这个文件拖到src下

7.创建src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
    <h1>hello world</h1>,
    document.getElementById('root')
);

registerServiceWorker();

8.执行 npm start