【无标题】

一、React介绍:

React 起源于 Facebook 的内部项目,可以开发单页面应用,组件化模块化开发。React通过对DOM的模拟,最大限度地减少与DOM的交互。

中文官网:https://react.docschina.org/

git地址: https://github.com/facebook/react

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

1、必须安装nodejs稳定版本。nodejs官网:https://nodejs.org/en/

  1. 下载后就一路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】

我这边选择了安装npm

四、搭建React开发环境:

之前老方法已经不行了

(新方法--推荐)

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

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

step1:进入指定的文件目录后,执行下面的命令

npx create-next-app

用的是mac。只前node版本是12,升级到16,然后运行时候发现还是不行,再切换到18.2,成功运行 http://localhost:3000/

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

此刻,我们的环境算是搭建好了,我们来启动一下吧

我们运行 npx next dev 就可以在3000端口运行起来我们的应用啦~

我们基于next.js的react应用就初步搭建起来了,看效果

界面比以前漂亮了许多呢

相关推荐
我命由我123452 小时前
React - state、state 的简写方式、props、props 的简写方式、类式组件中的构造器与 props、函数式组件使用 props
前端·javascript·react.js·前端框架·html·html5·js
C澒2 小时前
React + TypeScript 编码规范|统一标准 & 高效维护
前端·react.js·typescript·团队开发·代码规范
@大迁世界4 小时前
精通 React 面试:从零到中高级
前端·javascript·react.js·面试·前端框架
无知的小菜鸡6 小时前
React 零散知识记录
前端·react.js·前端框架
我命由我123457 小时前
React - React 初识、创建虚拟 DOM 的两种方式、jsx 语法规则、React 定义组件
前端·javascript·react.js·前端框架·html·html5·js
白兰地空瓶8 小时前
手写 Mini React:从 0 实现 createElement 和 render,理解 React 的底层原理
react.js
我命由我1234510 小时前
前端开发 - this 指向问题(直接调用函数、对象方法、类方法)
开发语言·前端·javascript·vue.js·react.js·html5·js
Olafur_zbj11 小时前
【AI】深度解析OpenClaw智能体循环(Agentic Loop):底层运行机制、ReAct演进与多智能体协同架构
人工智能·react.js·架构·agent·openclaw
我命由我1234511 小时前
React - ref、回调 ref 回调执行次数的问题、createRef 函数、事件处理
前端·javascript·react.js·前端框架·html·html5·js
我命由我1234511 小时前
React - 收集表单元素、收集表单元素优化、生命周期(旧)、生命周期(新)
前端·javascript·react.js·前端框架·html·html5·js