react 入门到精通 ——安装
- 环境安装(需要安装node,npm)
npm install -g create-react-app //全局安装官方脚手架
create-react-app project-name //使用脚手架创建一个为project-name的项目
这个时候就创建了一个为project-name 的项目
- 项目结构
├─ node_modules //第三方包文件夹
├─ public //模板和静态资源文件夹
├─ src //核心代码文件夹
├─ ├─App.css
├─ ├─App.js
├─ ├─App.test.js
├─ ├─index.css
├─ ├─index.js //入口文件
├─ ├─logo.svg
├─ ├─serviceWorker.js
├─ ├─setupTests.js
├─ .gitignore //git配置文件
├─ package.json //npm包配置
├─ README.md
└─ yarn.lock
- 入口文件 index.js说明
import React from 'react'; //引入react
import ReactDOM from 'react-dom';//引入react-dom
import './index.css';//引入css
import App from './App';//引入组件App
import * as serviceWorker from './serviceWorker'; // 这个是为了用来做资源的缓存,这样你下次访问时,就可以更快的获取资源。
ReactDOM.render( //使用react的jxs语法
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root') //将内容挂载在index.html中的id为root元素中
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
- 运行
在根目录
npm run serve // 运行开发环境
npm run build //打包上线