记react项目搭建流程及问题

最新推荐文章于 2022-11-13 23:09:20 发布
最新推荐文章于 2022-11-13 23:09:20 发布
阅读量166 收藏
点赞数
分类专栏： 前端 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wang_NiFeng/article/details/115556419
版权

目录

 

一、全局安装

二、创建react应用

三、遇到报错

      1、 eslint版本问题

      2、构建项目时，在node_modules中创建文件权限问题

     3、安装依赖报错

一、全局安装

npm install -g create-react-app

二、创建react应用

create-react-app react-project


cd react-project

// 安装依赖
sudo cnpm install

//启动
npm start

 

三、遇到报错

      1、 eslint版本问题

          解决： 查看本地全局的node_modules中eslint是否与项目下node_modules的eslint版本冲突。删除本地node_modules。

      2、构建项目时，在node_modules中创建文件权限问题

          解决：为node_modules添加权限

sudo chmod -R 777 /Users/a58/Documents/工作文档/FE-Study-Project/react-project/node_modules

     3、安装依赖报错

        node的版本问题 —— 切换node版本

 

 

wang_NiFeng
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React环境及使用
代码青春
06-28 834
在cmd命令行中输入：                    npm install -g create-react-app        等待其安装，意思是全局安装create-react-app脚手架工具，然后就可以使用命令创建新的react项目。        在cmd中输入：                    create-react-app my-new-app           ...
前端新手：React开发环境搭建过程以及遇到的问题总结
java新手的博客
11-19 426
刚刚接触react，在学习过程中，想要把自己的每一步都记录下来，本文是react开发环境搭建的过程。 搭建过程 1、想要开发react项目，需要在本地环境下安装node，（https://nodejs.org/en/）,有LTS和Current版本，一般使用LTS版本，点击下载，傻瓜式安装即可。 具体node安装可以参考：https://blog.csdn.net/william_munch/ar...
react项目开发问题整理
小白目的博客
03-04 1363
1. react中路由跳转后页面不置顶问题：从页面A跳转到页面B，页面A滚动到中间位置，跳转后页面B也会在中间位置 解决：在顶部组件的生命周期中进行判断，例如 componentWillReceiveProps(nextProps){ 　　//当路由切换到新页面时置顶 　　if(this.props.location !== nextProps.location){ 　　　　window.scrollTo(0,0)}} 2. 数组map遍历提示需要加key 但不要直接给 index, 因为如果增加或者删除
搭建react项目遇到的问题2022
lyd的博客
11-13 5817
最新搭建react项目踩坑
react项目搭建出现的问题以及解决办法
小茳辞
04-26 576
1、使用create-react-app project创建项目结果会报这样的提示 You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1). 是因为当前运行的版本落后于最新版本同时不支持全局安装 ； 首先：使用：卸载以前安装的版本 - yarn global remove create-react-app - npm uninstall -g create-react-app 如下卸载成功
一个React项目的流程记录
柚子烧酒
05-30 1099
最近想跟着教程，尝试用React做一个SPA项目。记录一下大致的流程。 1. 搭建react开发环境 使用 react-create-app 脚手架，搭建react开发环境。默认已装好 npm 和 nodejs，终端输入： > npm install -g react-create-app > react-create-app folder-name 这时就已经搭建好了react开发...
React入门——项目搭建
01-08
React入门教程：项目搭建与环境配置 React是Facebook推出的一款流行的JavaScript前端框架，它将用户界面拆分成可重用的组件，便于维护和扩展。React的核心理念是利用虚拟DOM（Document Object Model）来提高性能，...
快速搭建ReactNative项目的一个starter
08-10
二、项目搭建步骤 1. 安装环境：首先确保已经安装了Node.js和npm（Node包管理器），因为React Native项目依赖它们。同时，需要安装Java Development Kit (JDK) 和Android Studio或Xcode（针对iOS）来支持Android和...
从无到有搭建28388项目程序.rar
10-03
在给定的文件列表中，"从无到有搭建28388项目程序.docx"很可能就是这样的文档，详细记录了项目搭建的过程和步骤。 14. **项目管理**：敏捷开发方法（如Scrum或Kanban）可能被采用，以灵活应对需求变化，并通过工具...
前端项目-react-semantify.zip
09-03
这个压缩包包含了一个名为"react-semantify-master"的文件夹，我们可以推测这可能是一个已经初始化并配置好的React项目。 React是Facebook开发的一款开源JavaScript库，主要用于构建用户界面，特别是单页应用。它...
react-基于reactredux技术栈的脚手架
08-15
create-react-app是由Facebook提供的一个官方命令行工具，用于快速初始化一个新的React项目，它已经配置好了构建流程，让我们可以专注于编写应用，而无需关心配置细节。create-react-app默认包含了Babel和Webpack等...
React学习17_1----package.json文件和node_modules文件夹
翟浩浩Android专栏
02-26 2500
package.json 文件 引用模块的名称 node_modules 文件夹（包括里面的文件） 模块的实际文件 node_modules 手动删除， 但是package.json 必须在 cd 到项目目录下，执行npm install命令，会根据 package.json 中引用模块的 名称重新下载并生成node_modules文件夹 在实际开发中，代码在git 或者 svn ...
前端——渲染机制
wang_NiFeng的博客
07-16 3470
  1、什么是DOCTYPE及作用？ DTD（document type define，文档类型定义）是一系列的语法规则，用来定义XML或(X)HTML的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式。 DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出一些差错。   DOCTY...
JS动态添加元素实例
wang_NiFeng的博客
05-11 3021
从后台加载数据，结构为目录树二级菜单。 数据格式为： html: <ul class="sidebar-menu" id="proMenu" style="background:#88A0CE;"></il> JS： var width = window.screen.availWidth * 0.9 - 15;  //区域宽度 ...
加载obj三维模型
wang_NiFeng的博客
07-09 1738
纹理——Texture. 泛指物体表面的纹路。表现为可视的图片，用于展示外观 贴图——Map. 贴图的具体表现形式是纹理。当纹理附着在具体的物体表面时，则称为贴图。Map的另一层含义——映射，功能是把纹理Texture的UV坐标映射到3D物体表面 材质——Material. 在渲染程式中，它是表面可是属性的结合，这些可是属性是指表面的色彩、纹理、光滑度、透明度、反射率、折射率、发光度等。材质表...
MVC与href登录跳转
wang_NiFeng的博客
06-03 1696
问题：ajax跨域请求用户登录信息，返回用户信息，跳转不到目标页。  由于使用MVC框架页面加载时先到controller中找到启动项，return view()后登录页加载，点击“登录”从服务器得到用户信息。若不经过验证直接重定向跳转不到目标页，对应链接：http://localhost:6422/Index/Login2?ReturnUrl=%2fUserMgmt%2fUserAuthori...
前端——JS运行机制
wang_NiFeng的博客
07-18 820
1、JS是      （1）单线程    （2）任务队列：同步任务；异步任务——先挂载 单线程就意味着所有任务需要排队，前一个任务结束，才会执行下一个任务。 JS从上到下执行，遇到异步任务先挂起，继续执行同步任务，同步任务执行完毕再处理异步任务。（优先执行同步任务，再执行异步任务） 如： for(var i=0;i<4;i++){ setTimeout(function(){ ...
前端——页面性能
wang_NiFeng的博客
07-18 652
提升页面性能的方法？ 资源压缩合并，减少HTTP请求（图片合并、JS脚本文件合并、CSS文件合并） 非核心代码异步加载——异步加载的方式——异步加载的区别 利用浏览器缓存——缓存的分类——缓存的原理 使用CDN（网络优先）——本质上是一个缓存，将数据缓存在离用户最近的地方，一般缓存的是静态资源 将CSS放在页面最上面，将JS放在页面最下面（页面从上到下加载） 把JS和CSS提取出来放在...
简单搭建一个React语言的h5项目框架
最新发布
09-02
### 回答1： 为了搭建一个React语言的h5项目框架，您需要以下步骤: 1. 安装 Node.js 和 npm：Node.js 是 JavaScript 的运行环境，npm 是 JavaScript 包管理器。 2. 创建一个文件夹，作为您的项目的根目录。 3. 在命令行中，进入您的项目目录，然后使用以下命令初始化项目： ``` npm init -y ``` 4. 安装 React，并作为项目的依赖项： ``` npm install react react-dom --save ``` 5. 创建一个名为 "src" 的文件夹，用于存储您的 React 组件。 6. 创建一个名为 "index.js" 的文件，用于导出您的项目的入口组件。 7. 创建一个 HTML 文件，用于渲染您的 React 组件。 8. 在命令行中，运行以下命令以启动项目： ``` npm start ``` 现在您的 React h5 项目框架已经创建好了！您可以开始编写 React 组件并逐步完善您的项目。 ### 回答2： 要搭建一个React语言的H5项目框架，我们需要遵循以下步骤： 第一步，安装Node.js。在官网上下载并安装Node.js，它提供了NPM（Node Package Manager）管理工具，用于安装和管理第三方模块。 第二步，创建项目文件夹。在合适的位置创建一个文件夹，作为项目的根目录。 第三步，初始化项目。在命令行中进入项目根目录，执行命令 "npm init"，按照提示填写项目的基本信息，例如名称、版本号等。这将会在项目根目录创建一个package.json文件，用于记录项目的依赖和配置信息。 第四步，安装React和相关依赖。在命令行中执行命令 "npm install react react-dom"，这将会安装React和React DOM模块作为我们项目的依赖。 第五步，配置Babel。在命令行中执行命令 "npm install babel-loader @babel/core @babel/preset-react"，这将会安装Babel及其相关模块，用于将React语法转换为浏览器可以理解的代码。 第六步，创建并配置Webpack。在命令行中执行命令 "npm install webpack webpack-cli webpack-dev-server html-webpack-plugin"，这将安装Webpack和相关模块，用于打包和开发服务器。 第七步，创建并配置基本文件。在项目根目录下创建一个src文件夹，用于存放React组件和相关资源文件。创建一个index.js文件作为入口文件，引入React和ReactDOM模块，并渲染一个根组件。创建一个index.html文件，用于作为项目的入口页面。 第八步，配置Webpack。在项目根目录下创建一个webpack.config.js文件，配置Webpack的入口、输出、加载器等信息。 第九步，启动项目。在命令行中执行命令 "npm run start"，这将会启动Webpack Dev Server，打开浏览器并访问 http://localhost:8080，就可以看到React H5项目的效果了。 以上就是简单搭建一个React语言的H5项目框架的步骤。当然，这只是一个最基本的框架，具体的配置还可以根据项目需求进行进一步调整和扩展。 ### 回答3： 搭建一个基于React语言的H5项目框架可以参考以下步骤： 1. 环境搭建：首先确保你的电脑已经安装了Node.js和npm包管理工具。可以通过在终端运行命令`node -v`和`npm -v`来检查是否安装成功。 2. 创建项目目录：在适当的位置创建一个空的项目文件夹，并进入该文件夹。 3. 初始化项目：在终端运行命令`npm init`来初始化一个新的npm项目。按照提示完成项目的相关配置，例如项目名称、版本号、作者等。 4. 安装React相关依赖：运行命令`npm install --save react react-dom`来安装React及其DOM渲染的依赖。 5. 安装开发工具：运行命令`npm install --save-dev webpack webpack-cli webpack-dev-server`来安装Webpack及其相关开发工具。 6. 创建配置文件：在项目根目录下创建一个`webpack.config.js`文件，并配置Webpack的基本设置。例如设置入口文件、输出文件、解析规则等。 7. 创建React组件：在项目目录下创建一个`src`文件夹，并在其中创建一个`App.js`文件作为项目的根组件。编写React代码，可以使用函数组件或类组件来定义你的页面结构。 8. 创建入口文件：在`src`文件夹下创建一个`index.js`文件作为React应用的入口文件。在该文件中导入根组件并使用`ReactDOM.render()`方法将其渲染到页面中。 9. 配置启动命令：在`package.json`文件中的`scripts`属性中新增一个`start`命令，设置为`"webpack-dev-server --open"`。这将启动Webpack的开发服务器，并自动打开项目页面。 10. 启动项目：在终端运行命令`npm start`来启动项目，你将在浏览器中看到React组件渲染的页面。 这是一个简单的React语言的H5项目框架搭建流程。根据项目的需求和复杂性，你可能还需要进行更多的配置和安装依赖来完善项目。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值