目录
- 项目创建
- 目录介绍
- 页面整理
项目创建
npx create-react-app my-app
cd react-demo
yarn start
启动后，打开默认是3000端口
启动页面
目录介绍
结构介绍
node_modules -- 放置项目依赖的第三方的包
public -- 初始页面入口
favico.ico: 网页tab标签小图标
index.html: 初始页面
manifest.json: wepack打包优化相关
robots.txt: 表示任何搜索引擎，抓取工具的用户代理都可以访问这个网站的所有页面资源
src -- 放的项目所有的源代码
所有代码的入口在 index.js 里面
.gitignore -- git管理代码的时候，有的文件不希望传到git仓库中，可以把文件定义在这。
package.json -- node的包文件、项目的结束（名字/版本号/依赖的第三方的包/调用的指令等）
记录用npm安装过哪些包 ^ 代表 npm install 的时候会自动安装大版本号相同的最新的
一个版本（x.y.z），安装的是大版本
x - 大版本号，api兼容变化会改变大版本号，x 递增
y - 次版本号，新增功能时但不影响api的兼容，y 递增
z - 修订号，bug修复不影响api兼容，z
README.md -- 项目的说明文件
yarn.lock -- 项目依赖的安装包，可锁小版本，后续更新拉取代码，重新安装依赖的时候不会被影响
页面整理
- 从页面入口文件（src/index.js）开始处理，保留必要的模块
// 导入核心模块
import React from 'react';
import ReactDOM from 'react-dom';
// 导入全局样式
import './index.css';
// 入口组件（组件首字母必须大写）
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
- 再去处理我们的组件（src/App.js）
import React from "react";
export default class App extends React.Component{
render(){
return (
<div>Hello World!</div>
)
}
}
- 然后再去初始页面注释点东西
<!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
<!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
-
最后，把其它非重要的文件去掉吧
整理后的结构
这是我们整理的文件，开始书写你的代码......
