React学习笔记(六) Create React App

简介: React学习笔记(六) Create React App


1、介绍


Create React App 是官方支持的创建单页应用程序的方法,可以帮助我们快速搭建一个繁杂的脚手架

我们可以直接使用命令 npm install create-react-app -g 全局安装 Create React App

然后使用命令 create-react-app <project-name> 创建一个应用程序

  • 注意

在创建应用程序过程中,由于网络问题,我们可能会遇到下面的错误

npm ERR! code Z_BUF_ERROR
npm ERR! errno -5
npm ERR! zlib: unexpected end of file
Aborting installation.
  npm install --save --save-exact --loglevel error react react-dom react-scripts has failed.
Deleting generated file... package.json
Deleting my-propject/ from C:\Users\lenovo\Desktop
Done.

这是因为 NPM 默认使用的是一个国外的源:https://registry.npmjs.org,下载速度比较慢

使用 npm config get registry 命令可以查看使用的源

> npm config get registry
https://registry.npmjs.org

所以我们可以换成淘宝的源:https://registry.npm.taobao.org,这样可以加快下载速度

使用 npm config set registry <URL> 命令可以设置使用的源

> npm config set registry https://registry.npm.taobao.org

之后,我们重新运行 create-react-app <project-name> 命令即可


2、目录结构


成功创建应用程序之后,我们得到的目录结构如下:

+ my-project
    + node_modules(存放第三方模块)
    + public(存放静态文件)
        - favicon.ico(图标)
        - index.html(页面模板)
        - manifest.json
    + src(我们自己写的文件一般放在这个文件夹下)
        - App.css(页面入口文件的样式文件)
        - App.js(页面入口文件)
        - App.test.js(页面入口文件的测试文件)
        - index.css(程序入口文件的样式文件)
        - index.js(程序入口文件)
        - logo.svg
        - serviceWorker.js
    - .gitignore
    - package-lock.json(项目配置文件)
    - package.json(项目配置文件)
    - README.md(项目说明文档)

其中,我们重点看看项目的配置文件 package.json

{
  "name": "my-project",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}


(1)dependencies


项目的依赖包含三个,分别是 react、react-dom 和 react-scripts

react 和 react-dom 不用说,它们是 React 的核心库,而 react-scripts 则管理着项目的所有依赖

有兴趣的朋友可以直接看一下 react-scripts 的源码 node_modules\react-scripts,我们这里不细说


(2)scripts


可用的命令共有四个,分别是 npm start、npm run build、npm test 和 npm run eject

  • npm start:在开发模式下运行应用程序
  • npm run build:将应用程序构建到 build 文件夹
  • npm test:以交互式监视模式启动测试运行器
  • npm run eject:将项目的配置暴露出来,注意这是一个 单向不可逆操作


【 阅读更多关于 Create React APP 的内容,请参考 官方文档



目录
相关文章
|
5月前
|
安全
第二轮学习笔记:三、APP抓包
第二轮学习笔记:三、APP抓包
51 0
|
11天前
|
XML 移动开发 前端开发
使用duxapp开发 React Native App 事半功倍
对于Taro的壳子,或者原生React Native,都会存在 `android` `ios`这两个文件夹,而在duxapp中,这些文件夹的内容是自动生成的,那么对于需要在这些文件夹中修改的配置内容,例如包名、版本号、新架构开关等,都通过配置文件的方式配置了,而不需要需修改具体的文件
|
2月前
|
前端开发 JavaScript 中间件
React脚手架create-react-app简介
【8月更文挑战第13天】React脚手架create-react-app简介
26 4
|
2月前
|
SQL 数据库 Windows
【应用服务 App Service】当使用EntityFrameWorkCore访问Sql Server数据库时,在Azure App Service会出现Cannot create a DbSet for ** because this type is not included in the model for the context的错误
【应用服务 App Service】当使用EntityFrameWorkCore访问Sql Server数据库时,在Azure App Service会出现Cannot create a DbSet for ** because this type is not included in the model for the context的错误
|
4月前
|
移动开发 前端开发 Java
技术笔记:ReactNative学习笔记(一)————(RN)快速入门
技术笔记:ReactNative学习笔记(一)————(RN)快速入门
45 0
|
5月前
|
前端开发
【专栏】在 create-react-app 中集成 less/sass 预处理器和 react-css-modules 的方法
【4月更文挑战第29天】本文介绍了在 create-react-app 中集成 less/sass 预处理器和 react-css-modules 的方法。首先,通过 `npm` 安装 less 或 sass 依赖,然后修改 `config-overrides.js` 配置文件以支持 less/sass 编译。接着,详细阐述如何使用 less/sass 编写样式。再者,安装 react-css-modules 并配置 webpack,使能样式模块化。最后,展示了如何结合使用 less/sass 和 react-css-modules,以提升前端开发的效率和代码质量。
401 0
|
5月前
|
前端开发 Android开发 iOS开发
应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道,推送都可以收到,但是在App切到后台或者杀掉进程之后就收不到推送了,是需要配置什么吗?
【2月更文挑战第31天】应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道,推送都可以收到,但是在App切到后台或者杀掉进程之后就收不到推送了,是需要配置什么吗?
93 2
|
5月前
|
前端开发
React学习笔记(一)
React学习笔记(一)
|
5月前
|
前端开发
React学习笔记
React学习笔记
|
5月前
|
前端开发 安全 Linux
React Native 打包 App 发布 iOS 及加固混淆过程
本文将介绍如何使用 React Native 打包并发布 iOS 应用到 App Store,并介绍了如何进行应用的加固和混淆过程。
下一篇
无影云桌面