【React入门学习】-1.初识React、使用node + npm 新建React项目

574 阅读1分钟

React是什么? react.docschina.org/docs/gettin…

React 是一个用于构建用户界面的 JavaScript 库。流行的 React 工具链,它们有助于完成如下任务:

扩展文件和组件的规模。

使用来自 npm 的第三方库。

尽早发现常见错误。

在开发中实时编辑 CSS 和 JS。

优化生产输出。

Create React App 不会处理后端逻辑或操纵数据库;它只是创建一个前端构建流水线(build pipeline),所以你可以使用它来配合任何你想使用的后端。它在内部使用 Babel 和 webpack,但你无需了解它们的任何细节。

当你准备好部署到生产环境时,执行 npm run build 会在 build 文件夹内生成你应用的优化版本。你能从它的 README 和用户指南了解 Create React App 的更多信息。

image.png

前期准备:

1.Node >= 14.0.0 和 npm >= 5.6

2.创建项目文件夹

创建React项目文件夹(右键新建或者代码创建都可)

image.png

进入React文件夹,右键-终端-在终端输入指令(也可以通过编码工具-终端-输入指令)。

image.png

npx create-react-app my-app

create 提示报错,这里的报错主要是我本地没有安装create-react-app,npm找不到对应的配置,所以创建失败

image.png

输入下面的代码,全局安装create-react-app

npm install -g create-react-app

出现create-react-app@4.0.3提示,安装成功

image.png

全局安装create-react-app后,重新执行 npx create-react-app my-app操作

image.png

安装成功

image.png

终端输入下面指令 cd my-app 进入my-app项目中

cd my-app

image.png

进入项目后 输入 npm start运行项目

npm start

image.png