facebook的官方脚手架
1）、安装 create-react-app
npm install create-react-app -g | yarn global add create-react-app
2）、用脚手架创建 react项目
create-react-app 项目名称
如：create-react-app reactapp01
注意：项目名称不能有大写字母。
3）、 启动项目：
npm start | yarn start
目录解析：
4.1）第一级目录
node-modules:是项目依赖的模块
src：是程序员写代码的地方，src是source的缩写，表示源代码
public: 静态资源。
4.2）展开目录：
Public：
index.html：是html网页，是个容器。这个文件千万不敢删除，也不能改名。
只有Public目录下 的文件才会被index.html文件引用，这是静态资源，index.html不会引用src目录下的文件
manifest.json： 生成一个网页的桌面快捷方式时，会以这个文件中的内容作为图标和文字的显示内容
src：
src目录是源代码，webpack只会打包这个目录下的文件，所以，把需要打包的文件都放在这个目录下。
Index.js：是主js文件，千万不敢删除，也不能改名
Index.css：是index.js引入的css文件（也是模块，webpack会把css也打包成模块） 千万不敢删除，也不能改名
App.js：是一个组件示例（模块），在 index.js里会引入这个组件。我们自己需要写组件时，只需要复制App.js文件即可。
App.css：是App.js文件引入的css文件（也是模块，webpack会打包）。
Logo.svg：是图片
registerServiceWorker.js：支持离线访问，所以用起来和原生app的体验很接近,只有打包生成线上版本的react项目时，registerServiceWorker.js才会有效。服务器必须采用https协议
5）、打包
npm run build | yarn build
在脚手架里做项目的步骤：
1）、创建目录
在src目录下创建以下文件夹：
-
assets ：静态资源文件夹
-
components：组件文件夹
/components/a组件/ a.js 和 a.css
-
pages：页面文件夹
-
styles：样式文件夹
2）、图片文件夹
1．在public里放图片。
把图片放到public文件夹中 直接使用图片名使用，这样的图片不会打包
2．使用require引用require(‘图片的相对路径')，Require中只能使用字符串不能使用变量，这样的图片会打包。如：
<img src={require("../../assets/img/banner04.jpg")} />
如果要解构出配置文件：**
npm run eject | yarn eject 解构出所有的配置文件 可选
如果需要调试，安装react-dev-tools工具**
-
通过git clone https://github.com/facebook/react-devtools.git下载到本地（或者直接点击下载）
-
下载之后进入到react-devtools目录下，用npm安装依赖
npm --registry https://registry.npm.taobao.org install
- 然后在npm run build:extension:chrome
环境配置
1、把配置解构
npm run eject | yarn eject
报git错误时:
git add . -> git commit -m 'init' -> yarn eject
报缺少babel 包: 安装一下
2、修改端口
//修改script/start.js
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3001;
3、去除eslint 警告
//config/webpack.config.js
//注释关于eslint的导入和rules规则
资源限制
-
本地资源导入(import) 不可以导入src之外的包
-
相对 指向src，绝对路径 指向了 public目录 <img src="/img/1.jpg" />
-
前景图片, 相对 和 绝对路径 都指向了 public目录
第三方脚手架
yeomen/dva/umi
网友评论