React 之 如何启动一个新的项目(六)

React本身是为构建SPA(单页面应用)而设计的。
想完全用 React 构建一个新的应用或网站,我们建议选择社区中流行的、由 React 驱动的框架。

生产级的 React 框架

1. Next.js

Next.js 的页面路由 是一个全栈的 React 框架。它用途广泛,可让你创建任何规模的 React 应用程序——从大部分的静态博客到复杂的动态应用程序。
你可以 将 Next.js 应用 部署到 Node.js 或 serverless 上,也可以部署到你自己的服务器上。完全静态的 Next.js 应用 可以部署在任何支持静态服务的地方。

//要创建新的 Next.js 项目,请在终端中运行:
npx create-next-app@latest

2. Remix

Remix 是一个具有嵌套路由的全栈式 React 框架。它可以把你的应用分成嵌套部分,该嵌套部分可以并行加载数据并响应用户操作进行刷新。
当你创建一个 Remix 项目时,你需要 选择你的部署目标。你可以通过使用或编写 适配器 将 Remix 应用部署到 Node.js 或 serverless 上进行托管。

//要创建一个新的 Remix 项目,请运行:
npx create-remix

3. Gatsby

Gatsby 是一个快速的支持 CMS 网站的 React 框架。其丰富的插件生态系统和 GraphQL 数据层简化了将内容、API 和服务整合到一个网站的过程。
你可以 部署一个完全静态的 Gatsby 网站 到任何一个支持静态服务的地方。如果你选择使用服务器上的功能,请确保你的主机供应商支持 Gatsby 的功能。

//要创建一个新的 Gatsby 项目,请运行:
npx create-gatsby

4.Expo(用于原生应用)

Expo 是一个 React 框架,可以让你创建具有真正原生 UI 的应用,包括 Android、iOS,以及 Web 应用。它为 React Native 提供了 SDK,使原生部分更容易使用。
当你创建一个 Remix 项目时,你需要 选择你的部署目标。你可以通过使用或编写 适配器 将 Remix 应用部署到 Node.js 或 serverless 上进行托管。
用 Expo 构建应用是免费的,而且你可以不受限制地将它们提交到谷歌和苹果的应用商店。此外,Expo 还提供选择性的付费云服务。

//要创建一个新的 Expo 项目,请运行:
npx create-expo-app

5.Next.js (App Router)

Next.js 的 App Router 是对 Next.js API 的重新设计,旨在实现 React 团队的全栈架构愿景。它让你在异步组件中获取数据,这些组件甚至能在服务端构建过程中运行。
你可以将 Next.js 应用 部署到 Node.js 或 serverless 主机上,或部署到你自己的服务器上。Next.js 还支持 静态导出,不需要服务器。

在现有 React 项目中添加 TypeScript

TypeScript 是一种向 JavaScript 代码添加类型定义的常用方法。

//使用下面命令安装最新版本的 React 类型定义:
npm install @types/react @types/react-dom

然后在 tsconfig.json 中设置以下编译器选项:

{"compilerOptions": {"target": "es5", //表示将TypeScript代码编译为ES5语法的JavaScript代码"lib": [  //lib字段指定了编译过程中需要包含的库文件。"dom","dom.iterable","esnext"],"allowJs": true,  //允许在项目中包含JavaScript文件。"skipLibCheck": true,  //表示跳过所有声明文件的类型检查,这可以提高编译速度。"esModuleInterop": true,  //允许使用import foo from 'bar'语法来导入默认导出。"allowSyntheticDefaultImports": true,  //允许在导入时使用默认导入语法,即使模块没有默认导出。"strict": true,  //启用所有严格的类型检查选项。"forceConsistentCasingInFileNames": true,  //确保引用的文件大小写与实际文件大小写一致。"module": "esnext",  //使用最新的ECMAScript模块语法。"moduleResolution": "node",  //使用Node.js风格的模块解析。"resolveJsonModule": true,  //允许从.json文件中导入数据。"isolatedModules": true,  //表示每个文件应该单独编译,这有助于在编辑时提供更好的错误提示。"noEmit": true, //表示不输出文件,通常用于与编辑器集成以提供更好的错误和类型提示。"jsx": "react-jsx"  //这是React 17及以上版本推荐的JSX转换方式。},"include": [  //指定了需要编译的源文件所在的目录。在这个例子中,src目录包含了所有的源文件。"src"]
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/830975.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据结构算法——链表带环问题——数学深度解析

前言:本节内容主要是讲解链表的两个问题 :1、判断链表是否带环; 2、一个链表有环, 找到环的入口点。 本节内容适合正在学习链表或者链表基础薄弱的友友们哦。 我们先将问题抛出来,友友们可以自己去力扣或者牛客网去找相应题目&…

systemctl开启自动启动特定docker服务

列出所有服务和状态 systemctl list-unit-files --typeservice | grep enabled开机启动docker容器 1.创建Docker启动脚本: 创建一个启动Docker容器的脚本,该脚本可以将Docker服务启动,并启动需要的特定容器。名为start_docker_containers.…

【源码解析】深入Pandas的心脏DataFrame 含十大功能、源码实现与编程知识点

作者介绍:10年大厂数据\经营分析经验,现任大厂数据部门负责人。 会一些的技术:数据分析、算法、SQL、大数据相关、python 欢迎加入社区:码上找工作 作者专栏每日更新: LeetCode解锁1000题: 打怪升级之旅 python数据分析…

JAVA:jsp+springboot 配置maven兼容版本

Java17 maven依赖&#xff1a;如果中央库和其他镜像找不到包&#xff0c; 可以访问下面的网址找替代包 <!-- Maven Repository: Search/Browse/Explore (mvnrepository.com) -->spring-boot版本号3.2.51.无需配置驱动&#xff0c;有内置数据库驱动 2.能自动扫描配置类。b…

微信私域生态下的企业级私域建设:开源AI智能名片商城小程序源码六大模块功能价值深度解读

在数字化营销蓬勃发展的今天&#xff0c;企业如何在微信私域生态中构建并运营一个稳固的私域流量池&#xff0c;成为了摆在众多企业家和市场人面前的重要课题。本文将基于开源AI智能名片B2B2C商城小程序源码的AARRR模型&#xff0c;深度解读微信私域中企业级私域建设的六大模块…

文心一言 VS 讯飞星火 VS chatgpt (249)-- 算法导论18.2 2题

二、请解释在什么情况下&#xff08;如果有的话&#xff09;&#xff0c;在调用 B-TREE-INSERT 的过程中&#xff0c;会执行冗余的 DISK-READ 或 DISK-WRITE 操作。&#xff08;所谓冗余的 DISK-READ &#xff0c;是指对已经在主存中的某页做 DISK-READ 。冗余的 DISK-WRITE 是…

【C语言/数据结构】经典链表OJ习题~第二期——链中寻环

&#x1f388;&#x1f388;&#x1f388;欢迎采访小残风的博客主页&#xff1a;残风也想永存-CSDN博客&#x1f388;&#x1f388;&#x1f388; &#x1f388;&#x1f388;&#x1f388;本人码云 链接&#xff1a;残风也想永存 (FSRMWK) - Gitee.com&#x1f388;&#x1f…

Python Json数据解析

本篇主要介绍Python 中json数据如何解析、转化、保存和加载。 目录 Json数据解析 概念 作用 Json文件组成 Json转化为Python数据类型 Python数据类型转化为json 写入本地json文件 读取本地的json文件 总结 Json数据解析 概念 一种保存数据的格式 作用 可以保存本地…

Day28-Java基础之Arrays类和lambda表达式

Arrays类 //Arrays类 int[] arr{1,2,3,4,5,6}; System.out.println(Arrays.toString(arr)); System.out.println(Arrays.binarySearch(arr,3));//不存在返回&#xff0d;插入点再-1 int[] newArrArrays.copyOf(arr,10); System.out.println(Arrays.toString(newArr)); int[] n…

第3篇:创建Nios II工程之Hello_World<二>

Q&#xff1a;上一期介绍完基本设计流程和实验原理&#xff0c;接着我们完成系统硬件设计部分&#xff0c;包括Platform Designer系统及Quartus工程。 A&#xff1a;依次搜索并添加Nios II Processor、JTAG UART、On-Chip Memory和System ID IP组件&#xff0c;连接各组件并As…

随笔Ubuntu上的的一些使用

Ubuntu简易使用 常用指令 cdlsmkdirrf -rm 路径 换源 备份镜像 sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak编辑文件设置 sudo gedit /etc/apt/sources.list清华源 # 阿里源 deb http://mirrors.aliyun.com/ubuntu/ bionic main restricted universe mul…

STM32 F103C8T6学习笔记17:类IIC通信—MLX90614红外非接触温度计

今日学习配置MLX90614红外非接触温度计 与 STM32 F103C8T6 单片机的通信 文章提供测试代码讲解、完整工程下载、测试效果图 本文需要用到的大概基础知识&#xff1a;1.3寸OLED配置通信显示、IIC通信、 定时器配置使用 这里就只贴出我的 OLED驱动方面的网址链接了&#xff1a…

Qt开发 , new一个QDialog窗口,点击关闭按钮,内部定义QTimer指针未释放 同时 析构函数也未调用问题

在Qt中&#xff0c;当创建一个QDialog的实例并显示它时&#xff0c;按下关闭按钮&#xff08;或点击窗口右上角的“X”按钮&#xff09;会触发窗口的关闭事件&#xff0c;但并不会立即调用其析构函数。这是因为Qt的窗口部件管理内存的方式是基于引用计数的&#xff0c;并且QDia…

2024深圳杯数学建模竞赛D题(东三省数学建模竞赛D题):建立非均质音板振动模型与参数识别模型

更新完整代码和成品完整论文 《2024深圳杯&东三省数学建模思路代码成品论文》↓↓↓&#xff08;浏览器打开&#xff09; https://www.yuque.com/u42168770/qv6z0d/zx70edxvbv7rheu7?singleDoc# 2024深圳杯数学建模竞赛D题&#xff08;东三省数学建模竞赛D题&#xff0…

口袋实验室--使用AD2学习频谱参数测试

目录 1. 简介 2. 频谱相关参数 2.1 频谱相关基本概念 2.1.1 采样时间间隔 2.1.2 采样频率 2.1.3 采样点数 2.1.4 采样时间长度 2.1.5 谱线数 2.1.6 奈奎斯特频率 2.1.7 频谱分辨率 2.1.8 最高分析频率 2.1.9 频谱泄露 2.2 窗函数 2.2.1 AD2的窗函数 2.2.2 测试矩…

Json 反序列化错误

Json 反序列化错误 JsonReaderException: Unexpected character encountered while parsing value: &#xfeff;. Path ‘’, l 可能是因为字符串是BOM UTF-8格式&#xff0c;需要把BOM去掉 public byte[] RemoveBOMData(byte[] bytesWithBom) {// UTF-8 BOM的字节表示&#…

Github 2024-05-01 开源项目月报Top20

根据Github Trendings的统计,本月(2024-05-01统计)共有20个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目13TypeScript项目5C项目2非开发语言项目1C++项目1JavaScript项目1Rust项目1Go项目1Shell项目1Svelte项目1编程面试大学:成为软件工程…

报错Unable to install JS,且提示Unable to run npm install【鸿蒙报错已解决】

文章目录 项目场景:问题描述原因分析:解决方案:此Bug解决方案总结Bug解决方案寄语项目场景: 最近遇到了这个问题,看到网上也有人在询问这个问题,实操了很多网上的解决方案发现并不能解决这个Bug,所以我在解决这个问题后,总结了自己和其他人的解决经验,进行了整理,写…

详解AI绘画的技术原理

AI绘画的技术原理主要基于机器学习和神经网络模型。这些模型可以学习和识别图像中的特征&#xff0c;并自动生成新的图像。以下是AI绘画技术原理的详细解释&#xff1a; 首先&#xff0c;AI绘画需要大量的数据来学习和理解人类绘画的技巧和风格。这些数据可以来自于各种渠道&a…

Qt的qtmqtt库连接onenet出现QMQTT::SocketRemoteHostClosedError解决方法

问题描述 在Qt发开过程中使用qtmqtt库来连接onenet的mqtt服务器&#xff0c;在ClientId、Username和Password均填写正确的情况下还是连接不上&#xff0c;查看错误显示QMQTT::SocketRemoteHostClosedError。 解决方法 client中的CleanSession标志位必须设置为true。 client …