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