第一章 搭建React项目

一、专栏介绍

欢迎加入本专栏!我将带领您从零开始快速掌握React,从搭建项目到深入理解React项目。后续还会将主流的Umi Max作为前端应用框架,并借助Ant Design Pro来设计用户界面。在这个专栏中,我将为您揭示开发过程中常见功能的实现方法,并通过实际案例展示这些技术的实际应用。让我们一起开启这场技术之旅吧!

二、环境准备

需要准备node环境,在本专栏中我将使用node v16.18.0和npm 8.19.0作为基础环境进行搭建和开发项目案例。

第一章 搭建React项目_第1张图片

接着我们需要把npm镜像更改为国内淘宝镜像,这样在下载依赖的时候能够更快。

查看npm源镜像

npm config get registry

切换npm源镜像

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

三、使用Create-React-App搭建

create-react-app是Facebook的React团队官方出的一款构建React单页面应用的脚手架工具。它本身集成了Webpack,并配置了一系列内置的loader和默认的npm的脚本,能实现零配置就可以开发React的应用。

优势:

  1. 无需配置:官方的配置堪称完美,几乎不用再配置任何东西,就可以上手开发项目。
  2. 高集成性:集成了对React、JSX、ES6和Flow的支持。
  3. 自带服务:集成了开发服务器,可以实现开发预览一体化。
  4. 热更新:保存自动更新。
  5. 全兼容性:自动处理CSS的兼容问题,无需添加-webkit前缀。

第一章 搭建React项目_第2张图片

进入Create-React-App后下面有这么一段命令npx create-react-app my-app,我们只需要打开cmd执行此命令就可以搭建React脚手架了,但是呢这样搭建出来默认是JavaScript,需要我们进行TypeScript的指定。这里提一嘴,可能有的小伙伴没见过npx,它也是npm的一种。想要详细的了解可以自行百度哈。在需要创建的文件夹中使用cmd终端执行下面的命令,注意my-app是你的项目名称,自行修改一下。我这里叫react-demo。所以我执行的语句就是npx create-react-app react-demo --template typescript

npx create-react-app my-app --template typescript

第一章 搭建React项目_第3张图片

第一章 搭建React项目_第4张图片

很快啊,一分钟左右就能创建好项目。创建好以后跟着命令中的提示,cd react 进行项目,通过npm start就能启动项目了。

第一章 搭建React项目_第5张图片

启动成功以后会自动打开浏览器,如果没有自动打开,可以根据提示,在浏览器中访问http://localhost:3000/

第一章 搭建React项目_第6张图片

到这里我们的项目就成功的搭建好了。

第一章 搭建React项目_第7张图片

四、使用Vite搭建React项目

Vite是尤雨溪大佬开发的,他也是Vue的创作者,所以顾名思义,Vite肯定是和Vue更加的搭配,但是呢它也支持我们去构建React项目。根据官网文档,我们只需要执行下面一行命令即可创建支持TypeScript的React脚手架

npm create vite@latest react-vite-demo -- --template react-ts

第一章 搭建React项目_第8张图片

大概10秒左右就能创建好,不得不说Vite就是快,因为它默认不帮我安装相关依赖。所以跟着提示进入项目,通过npm install安装相关依赖。安装完成以后执行npm run dev启动项目即可

第一章 搭建React项目_第9张图片

第一章 搭建React项目_第10张图片

第一章 搭建React项目_第11张图片

是不是超级简单。

五、使用Umi Max搭建React项目

这个呢就更简单了,直接跟着官网文档搞就好了

第一章 搭建React项目_第12张图片

但是不同的地方是,我们需要先创建好项目名称,然后在项目根目录下执行此命令

第一章 搭建React项目_第13张图片

接着根据自己的环境已经需求去选择就好

第一章 搭建React项目_第14张图片

项目搭建完成以后直接执行npm start 就能启动项目了

第一章 搭建React项目_第15张图片

第一章 搭建React项目_第16张图片

六、总结

还有其他构建React项目的方式,这里就举这三种比较常用的列子,至于选择哪一种去构建,根据自己的需求以及项目的复杂程度。如果你需要快速构建简单的React应用程序,可以选择Create-React-App或Vite。如果你需要构建复杂的React应用程序,并希望拥有更多的控制权和可扩展性,可以选择Umi-Max。

我是Etc.End。如果文章对你有所帮助,能否帮我点个免费的赞和收藏。

你可能感兴趣的:(开发语言,typescript,Ant,Design,React,前端框架)