精华内容
下载资源
问答
  • react项目
    千次阅读
    2021-07-31 10:50:21

    搭建react项目:
    1、安装node,npm等
    2、打开终端到文件目录,npm install -g create-react-app
    3、创建项目:create-react-app 项目名称
    !!!
    create-react-app 执行慢的解决方法:
    在使用 create-react-app my-app 来创建一个新的React应用,在拉取各种资源时,往往会非常慢,一直卡在那:

    fetchMetadata: sill mapToRegistry uri http://registry.npmjs.org/whatwg-fetch
    可以看到资源还是使用了 npmjs.org,解决方法是换成淘宝的资源:

    $ npm config set registry https://registry.npm.taobao.org
    -- 配置后可通过下面方式来验证是否成功
    $ npm config get registry
    -- 或 npm info express
    !!!


    4、创建项目成功后:
    cd 项目
    npm start(默认localhost:3000)
    npm run build
    npm test
    npm run eject


    重点来了(即上面几种指令的解释):
    在package.json中:
    只有三个依赖,分别是react,react-dom,react-scripts,依赖为什么这么少,
    是因为像webpack,babel等等都是被creat react app封装到了react-scripts这个项目当中,包括基本启动命令 都是通过调用react-scripts这个依赖下面的命令进行启动的,
    creat react app搭建出来的项目默认支持这4种命令,start以开发模式启动项目,build将整个项目进行构建,test进行测试,
    eject将文件完整目录呈现,会将原本creat react app对webpack,babel等相关配置的封装弹射出来,如果我们要将creat react app配置文件进行修改,现有目录下是没有地方修改的,
    此时,我们就可以通过eject命令将原本被封装到脚手架当中的命令弹射出来,然后就可以在项目的目录下看到很多配置文件。

    建议:
    安装完毕后,首先执行npm run eject;

    补救方法:
    先git add .
    然后git commit -m “init”
    然后再npm run eject

    5、改变端口号(根据自己的需要):

    在package.json里面配置:

    "dev": "webpack-dev-server --open firefox --port 3000 --hot --host 127.0.0.1"
           <!-- 自动打开火狐浏览器,指定端口号,指定域名 -->

    更多相关内容
  • 搭建完整react项目(React)

    千次阅读 2022-02-09 22:02:20
    一、创建 React 项目 create-react-app 项目名称 二、下载依赖包 1、下载路由 yarn add react-router-dom@5.3.0 npm i react-router-dom@5.3.0 2、下载状态机 3、下载 antd npm i antd yarn add antd 三、配置...

    一、创建 React 项目

    create-react-app 项目名称
    

    二、下载依赖包

    1、下载路由
    yarn add react-router-dom@5.3.0
    npm i react-router-dom@5.3.0
    
    2、下载状态机
    3、下载 antd
    npm i antd
    yarn add antd
    

    三、配置相关插件

    1、配置路由
    2、配置状态机
    3、配置 antd

    antd 框架中的组件都是按需引入。但是,组件的样式可以选择完整引入或者按需引入。

    1. 完整引入
      在项目的 index.js 中引入以下代码即可:
    import "antd/dist/antd.css"
    

    引入完成后就可以开始用 antd 进行开发了。

    报错处理:

    如果启动项目时,终端出现类似以下报错:

    在这里插入图片描述

    是因为 React 中的其中一个插件 react-scripts 更新了,因此我们需要将该插件降级到之前的版本,执行以下命令即可:

    yarn add react-scripts@4.0.3
    npm i react-scripts@4.0.3
    
    1. 按需引入
      按需引入,指的是在项目打包时,只打包我们使用了的组件的样式。
    4、按需引入的完整配置
    1. 下载依赖包
    yarn add react-app-rewired customize-cra babel-plugin-import
    react-app-rewired:更改启动命令,通过启动命令的方式来实现样式的按需打包;
    customize-cra:实现样式的按需打包;
    babel-plugin-import:语法编译,例如对 less 语法进行转换;
    
    1. 配置按需引入

    在项目根目录中创建一个 config-overrides.js 文件,在该文件中进行按需打包的相关配置:

    const { override, fixBabelImports } = require('customize-cra');
    
    module.exports = override(
        // 检测项目中是否使用了 import 语句
        fixBabelImports('import', {
            libraryName: 'antd', // 检测通过 import 引入的文件是否是 antd
            libraryDirectory: 'es', // 检测是否使用了 es 文件
            style: 'css'  // 自动打包引入样式
        })
    )
    

    完成以上配置后,之前在 index.js 中如果使用了完整引入的,需要把对应的代码删掉:

    // import “antd/dist/antd.css”

    1. 更改启动命令

    将 package.json 文件中的 scripts 属性的值全部替换:

    {
        "scripts": {
            "start": "react-app-rewired start",
            "build": "react-app-rewired build",
            "test": "react-app-rewired test",
            "eject": "react-scripts eject"
        },
    }
    

    启动项目时,还是使用 yarn start 或 npm start。

    5、配置主题颜色

    因为 antd 内部使用的是 less,因此如果我们要更改主题颜色,需要下载 less 的依赖包。

    1. 下载
    yarn add less less-loader@5.0.0
    
    1. 修改配置文件
    对项目根目录的 config-overrides.js 进行修改:
    
    const { override, fixBabelImports, addLessLoader } = require('customize-cra');
    
    module.exports = override(
        // 检测项目中是否使用了 import 语句
        fixBabelImports('import', {
            libraryName: 'antd', // 检测通过 import 引入的文件是否是 antd
            libraryDirectory: 'es', // 检测是否使用了 es 文件
            style: true  // 自动打包引入样式
        }),
        addLessLoader({
            modifyVars: {
                "@primary-color": '#a0d911',  // 更改主题颜色
            },
            javascriptEnabled: true
        })
    )
    
    展开全文
  • 如何创建一个react项目

    千次阅读 2022-04-02 17:54:10
    通过这条指令在电脑中加入一个创建react项目的指令 2. create-react-app hello-react 通过这个指令来创建一个hello-react的指令,如果安装慢的话可以运行如下命令切换淘宝镜像 (如果是在企业实习的好兄弟千万...

    读react.js小书观后感

    首先需要先确定在电脑中要有node.js的文件以及npm环境

    1.运行如下命令

    npm install -g create-react-app

    通过这条指令在电脑中加入一个创建react项目的指令

    2.

    create-react-app hello-react

    通过这个指令来创建一个hello-react的指令,如果安装慢的话可以运行如下命令切换淘宝镜像

    (如果是在企业实习的好兄弟千万不要切换镜像,每个公司都会有自己公司内部的镜像)

    npm config set registry https://registry.npm.taobao.org

    3.可以进入react项目中来将项目跑起来

    cd hello-react
    npm start

    就可以看到如下画面了

    展开全文
  • react项目打包

    千次阅读 2022-02-24 16:51:36
    一、react项目打包 对于使用脚手架创建的项目,打包是一件非常容易的事情: yarn build 其他文件没有太多要解析的,我们看一下js文件: [hash].chunk.js 代表是所有依赖的第三方库, vendor(第三方库) 的代码; ...

    一、react项目打包

    对于使用脚手架创建的项目,打包是一件非常容易的事情:

    yarn build
    

    在这里插入图片描述

    其他文件没有太多要解析的,我们看一下js文件:
    [hash].chunk.js

    • 代表是所有依赖的第三方库, vendor(第三方库) 的代码;
      main.[hash].chunk.js
    • 我们自己编写的应用程序代码;
      runtime~main.[hash].js
    • Webpack runtime逻辑的chunk;
    • 用于加载和运行你的应用程序;

    思考:随着业务逻辑代码越多,main会变得非常臃肿;

    二、React打包优化

    很多模块,其实没有必要一开始就进行加载,会影响首屏加载速度;
    我们可以让某些组件用到时再加载(懒加载);
    使用懒加载之后的打包结果:
    在这里插入图片描述

    如何可以让一个组件进行懒加载呢?

    • 使用react给我们提供的lazy函数即可;
      在这里插入图片描述
      但是,修改后运行代码会报错:
      在这里插入图片描述

    • React希望我们提供一个在组件没有加载出来之前,显示的组件;

    • 我们可以通过Suspense组件传入一个fallback属性;
      在这里插入图片描述

    展开全文
  • 如何创建一个 react 项目

    千次阅读 2020-12-17 17:54:56
    构建React项目的几种方式: create-react-app 脚手架快速搭建 react 项目(推荐)。 generator-react-webpack 脚手架搭建 react 项目。 webpack 一步一步构建 react 项目。 一、create-react-app 脚手架快速...
  • 创建react 项目 注意: 网上有一些生成react 的方法,但是也有一些是过时的。 使用官方脚手架creact-react-app 全局安装 creact-react-app 这个脚手架 这个脚手架和 vue 的 vue-cli是一样的,都可以全局安装,命令...
  • Vite创建React项目

    千次阅读 2021-09-16 14:25:33
    文章目录1. 输入项目名称2. 选择框架3. 选择不同4. 项目创建完成5. 项目结构6....这里输入我们的项目名称:vite-react 2. 选择框架 这里选择我们需要集成的框架:react vanilla:原生js,没有任何框架集
  • react项目的搭建与启动

    千次阅读 2021-12-14 11:20:30
    react项目的搭建与启动准备工作(环境的搭建)二级目录三级目录 准备工作(环境的搭建) (已经准备好的这一步可以跳过) 1.安装Node.js(安装一直选择下一步就行) npm常用命令 二级目录 三级目录 ...
  • 怎样启动别人创建好的react项目

    千次阅读 2022-04-13 17:02:05
    1.首先下载好创建的react项目后,在cmd命令框中先进到对应的项目路径 2. 命令行输入node -v,npm -v命令,查看对应的版本,如下图 3. 输入npm install命令 来安装依赖(需要段时间才成执行完成) 如果你是下载...
  • 创建React项目全过程(傻瓜式教程)

    千次阅读 2021-12-29 16:07:43
    创建React项目。npm无法识别
  • react项目中使用less

    千次阅读 2022-01-28 15:33:18
    1,创建react项目 npx create-react-app my-app 2,暴露配置文件 npm run eject 3,安装less和less-loader npm i less less-loader -D 4,配置 编辑webpack.config.js, 找到const sassRegex,在下面...
  • React项目框架搭建

    千次阅读 2021-09-22 22:04:21
    react项目
  • react脚手架项目结构1.4. 功能界面的组件化编码流程(通用)二、脚手架版 Hello React2.1 注意事项2.2 文件目录2.3 代码index.htmlindex.jsApp.jsHello.jsxHello.cssWelcome.jsxWelcome.css2.4 页面三、 VSCode...
  • React项目实战(一)

    万次阅读 多人点赞 2020-04-27 19:17:34
    文章目录项目实战前的准备工作项目实战一.搭建项目的基本页面及外层路由1-1配置基本页面1-2配置路由1-3需要最外层去渲染路由视图1-4需要配置内层App路由1-5 路由的懒加载二.利用Antd实现组件2-1 使用...React基础...
  • React vscode 创建 react 项目流程【超详细】

    千次阅读 多人点赞 2021-04-19 20:13:57
    文章目录一、安装node二、配置淘宝镜像三、配置 vscode(win10)四、全局安装脚手架五、创建项目 一、安装node 请在官网下载安装:https://nodejs.org/zh-cn/ vscode 中 点击 ( ctrl + `) 调出终端 输入指令node -v...
  • react项目设置全局变量 介绍 (Introduction) When it comes to web application bundling, ParcelJS is a relatively new bundler. Parcel describes itself as a blazing fast, zero-configuration web application...
  • 本文目录一、react中基于Typescript项目创建1.1 ts介绍1.2 安装基于ts的react项目二、typescript基础语法2.1 字符串、数字、布尔2.2 数组2.3 对象2.4 函数2.5 类 一、react中基于Typescript项目创建 1.1 ts介绍 1、...
  • Linux中使用nginx发布react项目

    千次阅读 2022-04-16 18:46:16
    Linux中使用nginx发布react项目
  • react项目中使用ESlint

    千次阅读 2022-04-02 16:05:44
    最好的时间点是创建项目时使用 vue-cli集成了eslint的配置,可以让我们自己选择 cra没有集成eslint,需要我们自己配置 那如何配置呢? 1.在项目中安装eslint以及对应的规则包 npm i eslint 2.配置eslint的...
  • react项目添加ts

    千次阅读 2021-01-19 15:14:37
    新项目创建 1、react + antd + ts yarn create react-app xxx --template typescript ...已有react项目 1、安装ts npm i typescript -g 全局安装 npm i typescript -D 当前项目安装 2、tsc --init 修改tsconf
  • 出现类似Cannot find module 'react-dev-utils/getPublicUrlOrPath'一般是项目中没有下载报错中提到的模块(可以在项目中package.json文件dependencies属性查看) 这时候只要使用指令 npm install --save-dev ...
  • 前言:我们都知道有些react项目打包后生成的不管是dist,还是build的文件,直接打开都无法直接浏览到项目,然后查看控制器,就发现它报错。 如图: 用脚手架创建的 react / vue 项目,已经集成了webpack,只要运行...
  • react项目介绍

    2020-09-21 09:40:15
    yarn add react-app-rewired customize-cra "start": "react-app-rewired start",     "build": "react-app-rewired build",     "test": ...
  • 从选购服务器到上线第一个React项目流程 文章目录从选购服务器到上线第一个React项目流程1.购买服务器、域名以及配置服务器2.再ubuntu中安装node和npm环境2.1 安装node2.2 安装npm2.3 安装yarn3. 在github上创建一个...
  • 1.react项目打包 1.1 终端运行打包命令 在编辑器的终端运行vue项目打包命令 yarn build 打包成功如下: 这时我们可以看到项目目录多出来一个build文件夹,记住它,后面部署就靠它了。 1.2 修改配置 在package.json...
  • react跨域处理
  • yarn创建react项目

    千次阅读 2019-12-05 15:17:11
    yarn创建react项目 1.安装yarn https://yarnpkg.com/zh-Hans/docs/install 2.创建项目及安装antd 在cmd下输入“npm install create-react-app yarn -g” 在指定项目目录下输入 create-react-app your_project_...
  • 命令行创建React项目

    千次阅读 2020-09-25 15:45:04
    cnpm install -g create-react-app ...找一个创建项目的目录,用cmd打开资源管理器对应目录运行 create-react-app demo 注意:安装过程中最好焦点不要移出cmd窗口,有时候会莫名其妙的中断安装
  • 前端react项目如何部署到nginx

    千次阅读 2022-02-17 16:03:24
    缘由:公司架构只给了一台测试环境的IP地址,说让我把项目打包部署到nginx,当时听到此话,有些诧异,一直以来以为前端代码部署到测试或者生产环境都是后端同事的活,之前自己虽然部署过,一种是ftp直接替换编译好的...
  • react 项目启动显示本地连接已拒绝

    千次阅读 多人点赞 2022-03-21 16:21:01
    在百度上没有找到react 项目启动显示本地连接已拒绝的解决方案 通过git版本回溯到上一个版本就可以正常连接 一开始实在没办法,我就从上一个版本接着写 结果后面出现版本冲突,我手动解决之后,再次启动项目 又是...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 231,698
精华内容 92,679
关键字:

react项目