首页 > 其他分享 >React 应用构建(环境)

React 应用构建(环境)

时间:2023-11-21 18:01:17浏览次数:37  
标签:npm react app React 构建 应用 脚手架 create

可以少去理解一些不必要的概念,而多去思考为什么会有这样的东西,它解决了什么问题,或者它的运行机制是什么?

一. 环境搭建

  • 工作编辑器:Visual Studio Code。
  • Javascript 解析器、运行环境 Node.js 的安装。
  • npm 安装:npm 是 Node.js 的软件包管理器。

二. 项目构建

1. 脚手架构建项目(JavaScript)

脚手架是快速帮助开发者搭建开发环境,用最简单方式创建一个简单 Hello World 项目。主要步骤分析如下所示。

全局、非全局安装脚手架环境,创建项目:

全局安装脚手架环境 create-react-app:

$ npm install -g create-react-app
# 查看安装版本
$ create-react-app -V
# 创建一个项目
$ create-react-app my-app

非全局安装,可以直接使用 npx(临时安装最新的脚手架):

# 安装、构建 react 项目
$ npx create-react-app my-app

运行项目:

# 运行项目
$ cd my-app
$ npm start

构建项目实际上会安装三个东西:

  • react:react 顶级库。
  • react-dom:因为 react 有很多的运行环境,比如 app 端的 react-native ,我们要在 web 上运行就使用 react-dom。
  • react-scripts:包含运行和打包 react 应用程序的所有脚本及配置。

其他命令:

# 1. 安装依赖 node_modules
$ npm install 缩写 npm i

# 2. nrm 是 npm 包的仓库管理软件,仓库链接地址托管给 nrm 管理,也就是镜像管理
$ npm i -g nrm # 安装 nrm
$ nrm ls # 查看可选源镜像
$ nrm use xxx # 切换镜像
$ nrm current # 查看当前镜像源

# 3. 清除 npm 缓存
$ npm cache clean --force

第一个项目解析 chess-game:

项目入口:index.html 里面加载一个空的 div 节点:

<div id="root"></div>

项目解析:

// 从 React 的包中引入了 React。只要你写 React.js 组件就必须引入 React,因为 React 里有一种语法叫 JSX。要写 JSX 就必须引入 React。
import React from "react";
// ReactDOM 可以帮助我们把 React 组件渲染到页面上去。它是从 react-dom 中引入的。
import ReactDOM from "react-dom"

// ReactDOM 里有一个 render 方法,功能就是把组件渲染并且构造 DOM 树,然后插入到页面上某个特定的元素上
// 利用 React DOM 模块 渲染一段 DIV 节点,把整段节点插入到 root 节点中。
ReactDOM.render(<Game />, document.getElementById("root"))

// React 18 替换之前写法如下:
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Game />);

2. 脚手架构建项目(TypeScript)

脚手架是快速帮助开发者搭建开发环境,这里脚手架采用 TypeScript 模版创建一个项目。

$ npx create-react-app my-app --template typescript

3. Umi 脚手架构建项目

在工作空间目录下建个空目录用来存放项目:

$ mkdir myapp && cd myapp

通过官方工具创建项目:

$ yarn create @umijs/umi-app
# 或 
$ npx @umijs/create-umi-app

安装依赖:

$ yarn install

启动项目:

$ yarn start

4. Umi + dva + antd + mobile

项目以 UMI + DVA 为底层框架,以 Ant Design Mobile 为 UI 组件库,快速构建 H5 应用。

标签:npm,react,app,React,构建,应用,脚手架,create
From: https://www.cnblogs.com/hubert-style/p/17847207.html

相关文章

  • 适用于广泛的物联网应用RM500QAEAA-M20-SGASA、EG25GGB-MINIPCIE、EM06ELA-512-SGAS网
    1、RM500QAEAA-M20-SGASA是一款5Gsub-6GHzM.2模块,尺寸为52.0mm×30.0mm×2.3mm,符合3GPPRelease15规范,针对工业和商业物联网及eMBB应用进行了优化。它支持独立(SA)和非独立(NSA)模式,最大下行链路速率为2.5Gbps,最大上行链路速率为900Mbps。RM500QAEAA-M20-SGASA支持Q......
  • C# 窗体应用程序文件夹内容及各文件功能
     1.每创建一个窗体就会生成三个文件,.cs、.Designer.cs、.resx,.cs是整个窗体的应用程序代码,重点。 2.Properties主要是一些属性信息。3.app.config是配置信息,实现修改配置信息,程序就根据配置信息进行运行。 ......
  • YonBuilder应用构建实战案例-体检管理(上)
    YonBuilder平台为开发者提供无代码和低代码的可视化开发能力,并结合开发资产复用,实现快速、简单的应用构建。体检管理是应用构建的典型案例之一,接下来将用两篇文章来讲述此案例。一.业务流程二.功能概述三.使用能力介绍四.实操教程(一).体检套餐1.业务对象创建体检套餐业务对象,以下......
  • YonBuilder应用构建实战案例-体检管理(下)
    紧接着上篇文章,我们将继续讲解体检管理案例操作。体检单一、业务对象创建体检单业务对象,以下是业务对象下的实体为主子孙结构1.体检单2.体检项目_体检单子表二、页面建模1、根据业务对象创建一主多子结构单据命名为体检单2、设置主表字段不允许修改组织、客户、累计出库年月、单据......
  • LangChain :引领人工智能应用系统的语言模型革新
    随着人工智能(AI)技术的不断发展,LangChain作为一种基于大语言模型的应用系统,正逐渐崭露头角。本文将深入探讨LangChain的背景、特点以及其在人工智能应用系统领域中的潜在价值和影响。背景LangChain是一种利用先进的大语言模型技术构建的开发平台,旨在为开发者提供更简便、高效的工具,......
  • 现代科技手段在城市交通领域的应用:地铁列车可视化
    随着城市化进程的不断加速,地铁作为一种便捷、快速的城市交通方式,受到了越来越多人的青睐。地铁列车可视化,作为地铁运营管理中的一项重要工作,不仅可以提高列车运行效率和安全性,还可以为乘客提供更加舒适、便捷的乘车体验。 什么是地铁列车可视化?地铁列车可视化,是指通过现代科技......
  • react中绘制饼图基础例子
    使用interval标记和theta坐标系来绘制饼图 radius:标签相对于饼图圆心的距离.label()中的text指定了一个回调函数,可以设置标签,其中d是当前项数据,i是当前项的索引,data是全部的数据,注意回调函数要有返回值。实现效果: import{Chart}from'@antv/g2'importReactfrom'......
  • Modbus 转 PROFIBUS DP 应用场景 PM-160
    1)在网关PROFIBUSDP侧是一个PROFIBUSDP从站,在Modbus串口侧有Modbus主站、Modbus从站、通用模式可选:接口有RS232RS485、RS422三种可选。2)通信方式为半双工:波特率有300~115200bps可选;有/无校验位、奇/偶校验和标记/空格可选。3)网关作为PROFIBUS从站,波特率自适应MaxS12Mbps......
  • #ifndef、#define、#ifdef等命令在C#中的应用
    1、#ifndef指令的理解  #ifndef是一个预处理指令,用于判断一个表示符是否被定义。如果该标识符未被定义,则执行条件编译中的代码块。否则,将跳过该代码块。下面是一个简单的粒子。1#ifndefDEBUG2Console.WriteLine("这是调试模式下的代码");3#else4Console.Wr......
  • nodejs升级引起的构建错误
      参考实际使用升级webpacknpminstall-Dwebpack@latest升级vue-clinpminstall-g@vue/cli创建vue-clidemo重新配置vue.configwebpack>5报错问题 1、运行下面这行指令,安装在Webpack中PolyfillNode.js核心模块。npminstallnode-polyfill-webpack......