为了提高 rust 熟练度,笔者用 rust + react 全栈开发了一个笔记本 app ,其中 rust 中涉及到 actix-web 框架处理 http 请求、sqlx 连接数据库。 一、截图展示 二、技术栈 前端 react tailwind 后端 rust sqlx/mysql actix/actix-web 三、开发环境 笔者的电脑是 ubuntu 24.04 amd 64位系统,因此环境的准备步骤如...
npx create-react-app react-wasm-tutorial--template typescript 等待一段时间的下载后,就会创建一个react-wasm-turorial的项目模板,用vscode打开它,可以看看目录结构 就是最常见的react项目结构,其中App.tsx是入口组件,代码如下: 代码语言:javascript 代码运行次数:0 运行 AI代码解释 importReactfrom'react';importlo...
我们将分两步构建前端。首先将构建一个简单的 React UI,然后添加 WebSocket 代码。 步骤1:构建简单的用户界面 在这一步中,我们将只关注用户界面(UI)。我们将创建一个基本的聊天布局,其中包含用户名和消息的输入以及聊天消息的显示区域。 import React, { useState } from 'react'; function App() { const [me...
{"name":"react-wasm","version":"1.0.0","description":"一个 Rust 编写 React 组件的 Demo","main":"src/index.jsx","scripts": {"dev":"webpack server"},"keywords": [],"author":"ConardLi","license":"MIT","dependencies": {"react":"^17.0.2","react-dom":"^17.0.2"},"devDependen...
前言:WebAssembly(简称wasm)已经出来有几年了,在一些需要高性能的web应用场景中,wasm技术可以让代码执行效率大大提升。react做为目前大厂主流的前端框架之一,搭配上最近几年一直越来越火的Rust语言,可以很好的结合起来,形成wasm的解决方案。国外有高人给出了一篇详细
React 项目中的小 Demo 。 Wasm 在开始之前,我们还是先来回顾下 Wasm : WebAssembly 是一种二进制指令格式,简称为 Wasm ,它可以运行在适用于堆栈的虚拟机上。 WebAssembly 存在的意义就是成为编程语言的可移植编译目标,让在 Web 上部署客户端和服务端应用成为可能。
Leptos 是个基于 Rust 的 Web 框架(leptos.dev/),作为前端开发者,可以将它理解为类似于 React、Solid 这一类的前端框架。不过 Leptos 是基于 Rust,而这些框架基本都基于 JS / TS。如果你是个前端开发者,我觉得 Leptos 或许是个不错的学习和上手 Rust 的框架,因为它和目前市面上流行的 SPA 框架都有很多相似之...
React Server Components手把手教学 Rust学习笔记 而如果想使用RSC,就需要使用Next.js的最新版本。而今天,我们做一次技术尝试。 「用Rust搭建适配RSC的Web服务器」。 我们在致所有渴望学习Rust的人的信中也介绍过,Rust在Web开发中也能大放异彩。 最近,在评论区,有些人说Rust在国内的工作岗位少,其实如果大家细心去...
首先,我们来初始化一个 React 项目,命令行执行 npm init : 然后,我们安装一些开发项目必备的包: $ npm i react react-dom $ npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin $ npm i -D babel-core babel-loader @babel/preset-env @babel/preset-react ...
在开始开发之前,你需要了解一些前置知识,React 相关的就不多说了,我们来看看 Rust 相关的几个重要概念。 cargo cargo 是 rust 的代码组织和包管理工具,你可以将它类比为 node.js 中的 npm。