react学习(一)之初始化一个react项目

React 是一个用于构建用户界面(UI)的 JavaScript 库,用户界面由按钮、文本和图像等小单元内容构建而成。React 帮助你把它们组合成可重用、可嵌套的 组件。从 web 端网站到移动端应用,屏幕上的所有内容都可以被分解成组件,即,可由react构建。

  • A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

    • 用来构建UI的 JavaScript库
    • React 不是一个 MVC 框架,仅仅是视图(V)层的库

 初始化react项目

要求:Node>=10.14.2 且 npm>=5.6

// 1.直接npx安装
//(npx是npm5.2+附带的package运行工具,和npm差不多版本,功能不太一样,不知道的话可以去搜一下)

npx create-react-app  "项目名称"

// 2.先安装 create-react-app,在创建react项目

npm install -g create-react-app

npx create-react-app  "项目名称"


cd my-app
npm start

官网有很多搭载了其他js的创建,根据自己需要去创建即可。我用的cra创建,npm的时候报错了一堆不知道为啥。。。可能create-react-app有啥问题吧,先不管,如下图:

运行起来,报错了,如下图:

web-vitals没找着,那就install一下

//web-vitals,即“网页指标”是 Google 的一项计划,
//旨在针对网页质量信号提供统一指南,这些信号对于提供出色的网页用户体验至关重要。
//它的目标是简化各种可用的性能测量工具,并帮助网站所有者专注于最重要的指标,即核心网页指标。

npm install web-vitals

node版本要么是14,要么大于16.14,我是16.13,所以被提示了。。。如下图: 

好了,npm start 运行成功! 

  • 10
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
对于一个 React 项目的企业初始化,你可以按照以下步骤进行: 1. 首先,你需要在 GitHub 上创建一个新的仓库,并将其命名为你的项目名称。然后,你需要将这个仓库克隆到本地电脑上。 2. 接下来,你需要选择一个适合你团队的代码编辑器,在编辑器中打开项目文件夹,然后在终端中运行以下命令: ``` npm init ``` 这个命令将会创建一个 package.json 文件,它包含了你的项目的所有依赖和配置信息。 3. 接下来,你需要安装 React 和其他必要的依赖。你可以使用以下命令来安装它们: ``` npm install react react-dom --save ``` 这个命令将会安装 ReactReact DOM,它们是你在开发 React 应用时必须要的库。 4. 接下来,你需要安装一些常用的开发工具,例如 Babel 和 Webpack。你可以使用以下命令来安装它们: ``` npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react webpack webpack-cli webpack-dev-server html-webpack-plugin ``` 这个命令将会安装 Babel 和 Webpack,它们将帮助你编译和打包你的 React 代码。 5. 现在,你可以开始在项目中编写代码了。你可以在项目文件夹中创建一个名为 src 的文件夹,然后在其中创建一个名为 index.js 的文件。在这个文件中,你可以编写你的 React 代码。 6. 最后,你需要在 package.json 文件中添加一个 script,以便你可以启动你的应用程序。你可以添加以下命令: ``` "scripts": { "start": "webpack-dev-server --mode development --open" } ``` 这个命令将会启动一个开发服务器,它将自动重新编译你的代码并刷新浏览器,以便你可以实时预览你的应用程序。 以上就是一个 React 项目的企业初始化的简单步骤。当然,在实际的开发过程中,你还需要添加其他功能和工具来提高开发效率和代码质量。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值