老铁们,大家好,相信还有很多朋友对于深入探索:React系列教程第二部分——create和的相关问题不太懂,没关系,今天就由我来为大家分享分享深入探索:React系列教程第二部分——create以及的问题,文章篇幅可能偏长,希望可以帮助到大家,下面一起来看看吧!
前言
React 是一个用于构建用户界面的优秀JavaScript 库。构建用户界面非常方便。然而,如果你想方便地构建一个React项目,你需要将其与一个优秀的脚手架工具配对,以便他们能够相互匹配并成为开发人员。一个前端工具。
这就不得不提到create-react-app(简称CRA),它也是Facebook出品的。它是开发React项目的脚手架工具,用于快速创建和设置React应用程序。它提供了零配置的开发体验,让开发人员可以专注于编写代码,而无需担心配置构建工具。下面详细介绍create-react-app。
1. 安装和创建项目
安装
create-react-app是一个命令行工具,可以通过npm或yarn全局安装:
npm install -g create-react-app
或者
yarn global add create-react-app 创建一个新项目
使用create-react-app 创建一个新项目非常简单:
npx 创建反应应用程序我的应用程序
或者
yarn create react-app my-appnpx 是npm 提供的命令,可以直接运行npm 包,无需全局安装。
2. 项目结构
创建的项目包含以下基本结构:
我的应用程序
节点模块
公共
favicon.ico
index.html
标志192.png
标志512.png
清单.json
机器人.txt
来源
App.css
App.js
App.test.js
索引.css
index.js
标志.svg
reportWebVitals.js
.gitignore
package.json
自述文件.md
yarn.lock/package-lock.jsonpublic/:公共文件目录,所有文件将直接复制到构建目录,不会被Webpack处理。 index.html 是入口HTML 文件。 src/:源代码目录,包含所有React组件和应用程序逻辑。 index.js:应用程序的入口文件,将React组件挂载到DOM上。 App.js:主要应用程序组件,默认的React组件结构。 package.json:项目依赖和脚本配置文件。gitignore:Git 忽略的文件列表。 README.md:项目描述文档。
3. 常用命令
在create-react-app创建的项目中,package.json文件包含一些预定义的脚本命令:
启动开发服务器
npm 启动
或者
yarn start 启动本地开发服务器,支持热重载,默认地址为http://localhost:3000。
构建生产版本
npm 运行构建
或者
yarn build 将应用程序打包成生产版本并将其输出到构建目录。
运行测试
npm测试
或者
纱线测试启动测试运行程序并使用Jest 进行测试。
弹出配置
npm 运行弹出
或者
yarnject 从react-scripts中弹出所有配置文件(如Webpack、Babel等)并将其暴露到项目根目录。请注意,此操作是不可逆的,除非需要高度定制的配置,否则通常不建议这样做。
4. 自定义配置
使用CRACO
为了避免弹出,您可以使用CRACO(Create React App Configuration Override)来扩展和自定义配置,而无需弹出配置文件。
安装CRACO:
npm 安装@craco/craco
或者
yarn add @craco/craco 修改package.json文件中的脚本:
"脚本": {
"开始": "克拉科开始",
"build": "craco 构建",
"测试": "克拉科测试"
}创建craco.config.js 文件以进行自定义配置。例如,配置Ant Design 的Less 支持:
const CracoLessPlugin=require("craco-less");
模块. 导出={
插件: [
{
插件: CracoLessPlugin,
选项: {
lessLoaderOptions: {
lessOptions: {
修改Vars: { "@primary-color": "#1DA57A" },
javascriptEnabled: 真,
},
},
},
},
],
};
5. 使用 TypeScript
create-react-app 支持使用TypeScript 模板创建项目:
npx create-react-app my-app --template typescript
或者
这将生成一个包含TypeScript 配置和文件的React 项目。
我的应用程序
节点模块
公共
来源
.gitignore
package.json
自述文件.md
纱线.lock/package-lock.json
tsconfig.json
6. 添加路由和状态管理
React 路由器
安装反应路由器:
npm 安装react-router-dom
或者
yarn add react-router-dom 在src 目录下创建一个routes.js 文件并配置路由:
从“反应”导入反应;
从"react-router-dom" 导入{ BrowserRouter as Router, Route, Switch };
从"./Home" 导入主页;
从"./About" 导入关于;
const 路线=()=();
导出默认路由;然后使用index.js中的Routes组件:
从“反应”导入反应;
从"react-dom"导入ReactDOM;
导入"./index.css";
从"./routes"导入路由;
从"./reportWebVitals"导入reportWebVitals;
ReactDOM.render(,
document.getElementById("root")
);
reportWebVitals();Redux
安装Redux 及相关库:
npm install redux react-redux @reduxjs/toolkit
或者
yarn add redux react-redux @reduxjs/toolkit 创建一个Redux 存储并将其集成到React 应用程序中:
从"@reduxjs/toolkit"导入{configureStore};
从"react-redux"导入{Provider};
从"./reducers" 导入rootReducer;
常量存储=configureStore({
减速器:根减速器,
});
ReactDOM.render(,
document.getElementById("root")
【深入探索:React系列教程第二部分——create】相关文章:
2.米颠拜石
3.王羲之临池学书
8.郑板桥轶事十则
用户评论
React系列二!我等不及想看看 “create” 会带来哪些新技术和思路。
有9位网友表示赞同!
终于到了“create”这一步了!学习创建组件,下一步就能开发自己的项目了吧?
有11位网友表示赞同!
希望这篇文章能详细解释如何使用 `create` 这个概念,我很想深入了解它的原理。
有10位网友表示赞同!
我最近也在学习 React,这篇博客对我的学习很有帮助!
有12位网友表示赞同!
我一直好奇 “create” 的用法,看完这篇文章也许就能解开谜团了。
有6位网友表示赞同!
React 学起来还是比较容易的,就是这个 "create" 有点让我疑惑,希望能解释清楚。
有14位网友表示赞同!
学习前端开发真是太酷!我现在已经用 React 打造了一些简单的网站界面。
有14位网友表示赞同!
我已经掌握了基本的 React 知识,现在可以尝试学习更高级的技巧啦!
有15位网友表示赞同!
这篇文章正好是我现在需要的,感谢分享!
有18位网友表示赞同!
"create" 这个概念的确很重要,它可以帮助我们快速构建复杂的 UI。
有15位网友表示赞同!
我想知道 `create` 可以用来做哪些具体的事情?
有6位网友表示赞同!
学习 React 一定要系统地掌握每个步骤,才能更好地运用它。
有15位网友表示赞同!
期待这个系列继续更新!
有11位网友表示赞同!
写博客的技术真的太棒了!我能学到很多新知识。
有10位网友表示赞同!
React 确实是一个很强大的框架,希望能把它运用到实际项目中去。
有18位网友表示赞同!
学习前端开发真是很有成就感!
有17位网友表示赞同!
"create" 这个方法听起来很酷,可以尝试一下子。
有7位网友表示赞同!
我之前接触过 React 的一些基础知识,现在准备深入了解它。
有14位网友表示赞同!
我希望学习到更多关于 “create” 和其他 React 相关技术的知识!
有12位网友表示赞同!