欢迎加入本专栏!我将带领您从零开始快速掌握React,从搭建项目到深入理解React项目。后续还会将主流的Umi Max作为前端应用框架,并借助Ant Design Pro来设计用户界面。在这个专栏中,我将为您揭示开发过程中常见功能的实现方法,并通过实际案例展示这些技术的实际应用。让我们一起开启这场技术之旅吧!
需要准备node环境,在本专栏中我将使用node v16.18.0和npm 8.19.0作为基础环境进行搭建和开发项目案例。
接着我们需要把npm镜像更改为国内淘宝镜像,这样在下载依赖的时候能够更快。
查看npm源镜像
npm config get registry
切换npm源镜像
npm config set registry https://registry.npm.taobao.org
create-react-app是Facebook的React团队官方出的一款构建React单页面应用的脚手架工具。它本身集成了Webpack,并配置了一系列内置的loader和默认的npm的脚本,能实现零配置就可以开发React的应用。
优势:
进入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
很快啊,一分钟左右就能创建好项目。创建好以后跟着命令中的提示,cd react 进行项目,通过npm start就能启动项目了。
启动成功以后会自动打开浏览器,如果没有自动打开,可以根据提示,在浏览器中访问http://localhost:3000/
到这里我们的项目就成功的搭建好了。
Vite是尤雨溪大佬开发的,他也是Vue的创作者,所以顾名思义,Vite肯定是和Vue更加的搭配,但是呢它也支持我们去构建React项目。根据官网文档,我们只需要执行下面一行命令即可创建支持TypeScript的React脚手架
npm create vite@latest react-vite-demo -- --template react-ts
大概10秒左右就能创建好,不得不说Vite就是快,因为它默认不帮我安装相关依赖。所以跟着提示进入项目,通过npm install安装相关依赖。安装完成以后执行npm run dev启动项目即可
是不是超级简单。
这个呢就更简单了,直接跟着官网文档搞就好了
但是不同的地方是,我们需要先创建好项目名称,然后在项目根目录下执行此命令
接着根据自己的环境已经需求去选择就好
项目搭建完成以后直接执行npm start 就能启动项目了
还有其他构建React项目的方式,这里就举这三种比较常用的列子,至于选择哪一种去构建,根据自己的需求以及项目的复杂程度。如果你需要快速构建简单的React应用程序,可以选择Create-React-App或Vite。如果你需要构建复杂的React应用程序,并希望拥有更多的控制权和可扩展性,可以选择Umi-Max。
我是Etc.End。如果文章对你有所帮助,能否帮我点个免费的赞和收藏。