一直想从零搭建React环境做个记录,最近换了个电脑,刚好可以实践一下了 系统配置:Win10专业版

一、React介绍:

React 起源于 Facebook 的内部项目,可以开发单页面应用,组件化模块化开发。React通过对DOM的模拟,最大限度地减少与DOM的交互。 中文官网:https://react.docschina.org/ git地址: https://github.com/facebook/react

二、搭建React开发环境之前的准备工作:

1、必须安装nodejs稳定版本。nodejs官网:https://nodejs.org/en/ 2. 下载后就一路next下去安装完成。安装完后可以在命令行中输入node -v 查询node版本,npm -v 查询npm版本 说明安装成功,可进行下一步

三、安装cnpm和yarn

用cnpm替代npm。淘宝npm镜像:http://npm.taobao.org/ 安装命令:【npm install -g cnpm --registry=https://registry.npm.taobao.org】

或者安装yarn替代npm: 下载方法1:yarn官方文档下载:https://yarnpkg.com/zh-Hans/docs/install#windows-stable 下载方法2:用命令【npm install -g yarn】或者【cnpm install -g yarn】

我这边选择了安装yarn

四、搭建React开发环境:

第一种方法(老方法–现在不推荐了,也不再支持这种全局安装 create-react-app 的方式了)

step1:安装脚手架工具,只需安装一次: 【yarn add -g create-react-app】

step2:进入指定的文件目录后,创建项目:

【cd D:\zhyc\ReactWorksapce】

【create-react-app reactdemo01】//reactdemo01是项目名称,注意不能包含大写

step3:进入到项目根文件中,运行项目:

【cd reactdemo01】

【yarn start】 step4:在浏览器中打开 http://localhost:3000/ ,结果如下图所示:

第二种方法(新方法–推荐)

文档:https://zh-hans.reactjs.org/docs/create-a-new-react-app.html

注:此方法要保证在你的机器上安装 Node版本 >= 6 和 npm版本 >= 5.2

step1:进入指定的文件目录后,执行下面的命令 npx create-next-app

**Next.js 是一个全栈式的 React 框架。**它用途广泛,可以让你创建任意规模的 React 应用——可以是静态博客,也可以是复杂的动态应用。

此刻,我们的环境算是搭建好了,我们来启动一下吧 我们运行 npx next dev 就可以在3000端口运行起来我们的应用啦~

我们基于next.js的react应用就初步搭建起来了,看效果 界面比以前漂亮了许多呢 初始化完的package.json做个记录

{

"name": "demo-next",

"version": "0.1.0",

"private": true,

"scripts": {

"dev": "next dev",

"build": "next build",

"start": "next start",

"lint": "next lint"

},

"dependencies": {

"eslint": "8.45.0",

"eslint-config-next": "13.4.12",

"next": "13.4.12",

"react": "18.2.0",

"react-dom": "18.2.0"

}

}

总结: 最近在找工作,外面要vue和uniapp的比较多,有段时间不看react了,这次差点不会了,虽然应用是勉强搭建起来了,里面还有很多东西需要细细的研究。 真的是一日不学则殆。好好学习,天天向上~~

精彩链接

评论可见,请评论后查看内容,谢谢!!!
 您阅读本篇文章共花了: