实战:react16+CRA

最新推荐文章于 2024-06-20 14:48:19 发布

snowDreamzzz

最新推荐文章于 2024-06-20 14:48:19 发布

阅读量232

点赞数

CC 4.0 BY-SA版权

分类专栏： react入门和进阶文章标签： react.js

本文链接：https://blog.youkuaiyun.com/qubes/article/details/120570301

react入门和进阶专栏收录该内容

7 篇文章

订阅专栏

文章目录

CRA
步骤
- dev
- prod
配置src相对路径
修改webpack配置

CRA

create-react-app简写为CRA

步骤

dev

npx create-react-app demo-react
cd demo-react
yarn start

prod

npm run build
serve -s ./build

配置src相对路径

创建配置⽂件 @/demo-react/jsconfig.json
新增compilerOptions.baseUrl和include属性

Xnip2021-09-27_16-49-12

修改webpack配置

npm run eject: 将CRA内部封装的webpack等配置弹射出来，缺点是⽆法回退且CRA更新后⽆法随之更新
使⽤第三⽅库：react-app-rewired

由于仅仅是demo使⽤，就⽤第⼀个⽅案了修改

启动端⼝默认是3000 改为8083
webpack-dev-server add-server使其⽀持cors
output添加⼏个选项

Xnip2021-09-27_16-50-32

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

snowDreamzzz

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【React】9、使用create-react-app（CRA）创建react项目

Coding and studying

06-01

1230

第一步，全局安装：第二步，切换到想创项目的目录，使用命令：第三步，进入项目文件夹：第四步，启动项目：你当然可以选择不全局安装你可以直接执行这样可以不安装create-react-app而直接创建你的脚手架项目你还可以执行创建一个支持TS语言的react脚手架项目。当看到这个界面在你的浏览器里自动打开的时候，你的脚手架项目就已经创建好了～ ---- 静态资源文件夹src ---- 源码文件夹App.css -------- App组件的样式App.test.js ---- 用于给App做测试index.css

使用CRA搭建基于 TypeScript 的 React项目

最新发布

qq_41051239的博客

04-01

1026

（Mock Service Worker）更适合前端模拟真实 API 请求，甚至可以拦截 fetch、XMLHttpRequest 请求。组件拆分为几个小组件所以是创建文件夹形式，一般情况下创建。大体框架就完成了，后续可根据自己的需求进行修改。默认 antd 会加载所有组件，但可以使用。使用MSW模拟登录接口返回token，存入。进行按需加载，减少打包体积。来判断用户是否登录。

参与评论您还未登录，请先登录后发表或查看评论

npx create-react-app react-app-demo ```

04-12

客户端用到的技术为React,所以下面需要使用脚手架来创建React项目。 ``` npx create-react-app react-app-demo ``` 将一些用不到的文件和内容删除掉。 ## 1、表格组件基本使用在`src`目录下面创建`views`目录，在该目录下面创建`GoodsList.js`文件，该文件的初步代码如下所示： ```react import { Component } from "react"; class GoodsList extends Component { render() { return <div>Hello World</div>; } } export default GoodsList; ``` 下面修改`App.js`文件中的代码 ```react import GoodsList from "./views/GoodsList"; function App() { return ( <div> <GoodsList></GoodsList> </div> )

React脚手架及CRA脚手架的使用

weixin_42357865的博客

11-12

1319

React 1.使用：不能直接在浏览器运行，因为有组件系统和jsx 解决方法：webpack解析组件系统、JSX 2.React脚手架 CRA - react官方推荐使用国内：蚂蚁金服： Dva - 守望先锋 Umi - 乌木 3.React框架的目的高效实现用户输入数据快速展示在界面上 4.React解决的前端问题高效实现服务端诗句渲染到页面上 5.Rea...

创建React16项目

oowweb的博客

03-07

1219

目录安装创建项目创建完成安装 npm install -g create-react-app 创建项目项目名称不能大写 create-react-app 项目名称 // 创建ts版 create-react-app 项目名称 --template typescript 创建完成 yarn 或 npm run Success! Created react007 at /Users/fanis/test/react/react007 Inside that directory, you can

create-react-app创建项目后更改react版本

Mis_lover的博客

06-25

1763

基于Node16.x+，使用create-react-app创建项目，默认为react最新版本，但日常开发中使用的是react16.x，所以需要对创建的项目进行react降级处理。执行以上命令会自动更新package.json中react-dom和react的版本号以及node_modules中的依赖包，无需手动修改删除。至此降级完毕，npm start即可运行。

React 项目安装流程

ShirleyXuMM的博客

07-12

495

create-react-app 全局安装create-react-app $ npm install -g create-react-app 如果不想全局安装，可以直接使用npx $ npx create-react-app your-app 也可以实现相同的效果创建一个项目 $ create-react-app your-app 注意命名方式 Creating a new Re...

React+umi+dva 项⽬实战-lesson6

python183360的博客

03-18

1166

React+umi+dva 项⽬实战-lesson6

React多页面应用开发实战：掌握CRA构建模板

资源摘要信息:"react-multi-page-tempalte是一个基于create-react-app（CRA）创建的多页React应用模板。通过这个模板，开发者可以快速构建包含多个页面的React应用程序。该模板可能包含了许多预配置的设置和工具，以...

React__MovieWeb:React的MovieWeb.json;

05-16

React__MovieWeb是一个基于React技术构建的Web应用项目，它使用了Create React App（CRA）工具来快速初始化和管理项目。CRA是Facebook官方提供的一个脚手架，旨在简化React应用的初始设置，使开发者可以专注于编写...

React-Redux-Toolkit项目实战：结合CRA与Redux-Toolkit

以上内容详细阐述了 React-Redux-Toolkit 项目中的关键概念和知识点，包括 React 与 Redux 的关系、Redux-Toolkit 的使用、环境变量配置、API 密钥的使用、CRA 的作用以及如何运行和构建 React 应用。掌握了这些知识...

React-cra项目初始化必做操作

jiang_ziY的博客

04-07

1012

创建好 Create React App dome 项目后完成如下操作, 让你的后续工作更丝滑 1 . 调整目录结构 2 . 调整文件内容 3 . 配置路由安装路由 react 脚手架并没有默认集成

react16开发环境搭建

jean850218的博客

06-14

1306

最近想学node，需要编写配套的前端页面，想着顺带把新的react特性都了解一遍，又不想用Create React App 创建一个新的项目，想着还是自己搭建一个react项目，顺带写个react不依赖脚手架，搭建react开发环境吧。在本地创建一个文件夹，如demo，打开命令行语句，进入该目录初始化项目 npm init ...

React学习一：创建React项目

qq_39101260的博客

06-20

1349

【代码】React学习一：创建React项目。

01-React安装(CRA)、概念、组件创建-嵌套-组合-样式-数据挂载的两种方式

qq_37970964的博客

09-16

829

一、create-react-app（CRA） 1、安装create-react-app $ npm install -g create-react-app 如果不想全局安装，可以使用npx安装 npx create-react-app appName 1、如果npm安装失败，可切换为npm淘宝镜像， 2、或者使用yarn yarn config set registry https://re...

React安装(CRA)、概念、组件创建-嵌套-组合-样式-数据挂载的两种方式

ziyer666的博客

04-11

733

react cra+dva—登录实现

宅神的博客

03-11

1002

react+dva—登录实现上一节使用react-redux实现了最简登录，我们改用dva库替代 react-redux 本节完整代码github链接注：本文是在上篇 react实现最简登录的基础上加上 dva库的使用分步骤进行：删掉store目录（不需要了，store换个形式放到dva app中注册dva app dva也提供了 connect 方法，将privateRout...

create-react-app（cra）脚手架

别来...无恙*的博客

04-20

663

之前在学习Vue的时候我们学习过怎样Vue-cli脚手架，不记得的可以查看一下这篇文章Vue-cli使用，如今我们也来学习一下react的脚手架，叫做 create-react-app ，简称 cra。 Create React App 是一个官方支持的创建 React 单页应用程序的方法。它提供了一个零配置的现代构建设置。官网 cra 的安装： npm i create-react-app ...

React高阶组件及CRA的定制，web项目开发

2401_84091628的博客

04-04

990

connect()withCopy高阶组件//高阶组件，本质上是一个函数 withCopy(Comp) 返回一个新的组件//高阶组件内部可以对传入进来的组件传递一些新的属性给他，那样的话Comp组件就可以通过this.props获取到外部传入来的属性了//connect()(UI组件) ===> 大家就理解了UI组件的props上面就可以获取到redux状态与更改redux状态的方法了render(){return (©千锋教育About组件：//引入高阶组件withCopy。