Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >【玩转 Cloud Studio】React Run on Cloud Studio

【玩转 Cloud Studio】React Run on Cloud Studio

原创
作者头像
lovelydong
发布于 2022-08-20 15:08:20
发布于 2022-08-20 15:08:20
1.8K00
代码可运行
举报
文章被收录于专栏:CloudStudioCloudStudio
运行总次数:0
代码可运行

前言

看到了腾讯云开发者社区联合腾讯云 Cloud Studio 团队发起【玩转 Cloud Studio】有奖调研征文活动,有幸来体验一下。

What is Cloud Studio

Cloud Studio 是基于浏览器的集成式开发环境(IDE),为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装,随时随地打开浏览器就能使用。

平台首页
平台首页

微信登录以后可以看到快速初始化的各种模板。不得不说,快速初始化给开发或者测试都带来了极大的便利,方便快速配置不同项目所需的环境以及依赖。

各种模板
各种模板

我这里选择了框架模板里的React模板。React是一个非常强大和流行的开源JavaScript库,现在大多数Web开发人员都在使用它,今天就拿它体验下。

开始run
开始run

React模板配置好,立刻就直接执行了

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
yarn

以及

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
yarn start

一点不拖泥带水 ,直接装好依赖跑起来了,这一点倒是令我听惊喜的,贴心的操作!

runing
runing

这里可以看到,整个Cloud Studio就是vscode的翻版,或者说是vscode的web端,该有的功能都有,不过相较于客户端vscode

受限于电脑的网络以及配置,有时装个依赖老费劲或者跑个项目卡死,云上Cloud Studio就不会为此担心,操作很流畅,运行也很极速,云上Cloud Studio开发未来必定是个趋势!

插件
插件

最后再探索一下Cloud Studio的插件功能。vscode 的插件就是vscode的灵魂,丰富的插件带来了开发的便利。这里看到Cloud Studio的插件和vscode一模一样,该有的都有,使用体验一样!

尝试写几句代码,看看插件的提示以及编译器的编译速度

这里用react-hook 重写了App.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>啦啦啦</button>
    </div>
  );
}
export default App

重写过程中,代码提示很给力,写起来很快。编辑器也在同步更新,反应也很快!

App.js
App.js

总结

Cloud Studio 体验完全不输客户端开发,关键是无需安装,随时随地打开浏览器就能使用。这对于我这种开发人员还是很用的,假如有一天,项目出现问题,自己身边没有配置好环境的开发设备,Cloud Studio发挥作用的机会就来了,能解燃眉之急!期待Cloud Studio开发大趋势到来的那一天!

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
【玩转 Cloud Studio】腾讯Cloud Studio 云端开发环境上手体验,太香了!
今天带大家体验一下腾讯Cloud Studio 云端开发环境,来感受一下通过浏览器开发项目带来的丝滑体验!
小明互联网技术分享社区
2023/05/12
1.8K3
【玩转 Cloud Studio】腾讯Cloud Studio 云端开发环境上手体验,太香了!
【玩转cloud studio】 初试cloud studio
Cloud Studio 是基于浏览器的集成式开发环境(IDE),只需要从浏览器打开网址即可快速进行开发,还可远程访问云服务器,调用云端资源来进行开发。实际代码都是跑在云服务器中的,对本地资源占用较小。
TomoriNao
2023/04/29
1K1
使用 React 开发单页应用的实践
在阅读这篇文章前,推荐一篇“好”文章:如何提高业务系统的稳定性原创 这篇文章见解独到,深入剖析,为保障业务系统稳固运行提供了极具价值的指导。
奇迹_fly
2024/11/28
2670
【玩转 Cloud Studio】Cloud Studio介绍与基础使用
cloud studio是腾讯云发布的云端开发者工具,接近于本地的IDE的开发体验
admin778
2022/09/14
4.7K15
【腾讯云 Cloud Studio 实战训练营】基于Cloud Studio构建React完成点餐H5页面
Cloud Studio 是 基于浏览器的集成式开发环境(IDE),为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装,随时随地打开浏览器就能在线编程。
呆呆敲代码的小Y
2023/08/07
2500
【腾讯云 Cloud Studio 实战训练营】基于Cloud Studio构建React完成点餐H5页面
【腾讯云 Cloud Studio 实战训练营】当我还在恐龙扛狼,隔壁IDE竟然已经卷成这样了
手动bgm:沃没K~ 恐龙扛浪扛浪扛~ 恐龙扛浪扛浪扛~ 沃没K~ 布鲁biu布鲁biu~
用户10685539
2023/07/31
4600
【腾讯云 Cloud Studio 实战训练营】当我还在恐龙扛狼,隔壁IDE竟然已经卷成这样了
【腾讯云Cloud Studio实战训练营】Cloud Studio 快速搭建学习分享
最近接触到了一款开发神器,云端IDE,相比于传统的 IDE,云端 IDE 可以更大程度的提升用户工作的效率。
用户10671819
2023/07/31
3420
【腾讯云Cloud Studio实战训练营】Cloud Studio 快速搭建学习分享
【玩转 Cloud Studio】项目合作新姿势:基于Cloud Studio云端IDE进行项目开发部署与团队协作
我们开发项目,一般都会使用IDE进行项目文件编辑和调试。我一般喜欢使用IDEA和VScode;但是,如果需要项目合作时候该怎么办呢?
Mintimate
2022/08/11
2.1K2
【玩转  Cloud Studio】项目合作新姿势:基于Cloud Studio云端IDE进行项目开发部署与团队协作
【玩转 Cloud Studio】从0到1迁移至云上编程
Cloud Studio 是基于浏览器的集成式开发环境(IDE),为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装,随时随地打开浏览器就能使用。Cloud Studio 云开发体验与本地几乎无异,支持文件持久化,无需担心数据丢失。
上山打老虎了
2022/08/27
1.7K1
【玩转 Cloud Studio】从0到1迁移至云上编程
【腾讯云 Cloud Studio 实战训练营】使用Cloud Studio快速构建React完成点餐H5页面还原
Cloud Studio 是基于浏览器的集成式开发环境(IDE),为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装,随时随地打开浏览器就能在线进行开发、测试和部署,使开发者可以快速且轻松地进行生产力工作,而不必担心复杂的配置和环境维护。 。
旺仔欣欣冬冬糖
2023/08/07
2560
【腾讯云 Cloud Studio 实战训练营】使用Cloud Studio快速构建React完成点餐H5页面还原
【玩转 Cloud Studio】iPad 编程生产力
iPad 有个口号,就是“买前生产力,买后爱奇艺”,使用 iPad,配合 Procreate 来作画体验还可以, 如果你想让你的 iPad 可以编程,你却不得不为之花费时间和精力,我搜了网上的教程,大致可以总结为以下 2 步:
狂奔滴小马
2022/08/22
4.5K3
【玩转 Cloud Studio】iPad 编程生产力
【腾讯云 Cloud Studio 实战训练营】使用Cloud Studio快速构建React完成点餐H5页面还原
IDE(集成开发环境)是一种软件工具,旨在为开发者提供一个集成的开发平台,其中包含了各种用于编写、调试和部署应用程序的工具和功能。IDE通常提供代码编辑器、编译器、调试器、版本控制、构建工具等,可以帮助我们更高效地进行软件开发。
祁画
2023/08/04
2420
【腾讯云 Cloud Studio 实战训练营】使用Cloud Studio快速构建React完成点餐H5页面还原
【腾讯云 Cloud Studio 实战训练营】体验搭建一个软件系统,无经验也能做开发
云计算技术的不断发展为代码开发带来了全新的体验,云 IDE(Integrated Development Environment)应运而生。腾讯云还与 CODING 联合推出的一站式云 IDE——Cloud Studio。我们将探讨云 IDE 的优势、特点以及体验,同时使用 Cloud Studio 快速搭建一个移动端 H5 页面,深入感受云 IDE 给我们带来的便利。
Swift社区
2023/07/31
1.4K0
【腾讯云 Cloud Studio 实战训练营】体验搭建一个软件系统,无经验也能做开发
【腾讯云 Cloud Studio 实战训练营】一个多年云端开发体验者的实战使用
近几年,越来越感觉软件的趋势逐渐从客户端越来越转向以web提供服务的云端,特别是互联网行业,典型的比如原型设计产品,从客户端软件Axure逐渐到墨刀在线原型设计的流行,UI设计行业photoshop&sketch转向蓝湖&MasterGo在线UI设计,web的力量前所未有的强大,可以说一个浏览器就能满足大部分日常需求,这也间接证明了谷歌的远见(开发ChromeBook),而软件代码开发领域虽然偶尔有一些似乎向云端开发的产品发布,但是要么功能不全,要么没有清晰明确的商业模式导致无法继续。在一个就是没有成熟的开源生态支持独立研发不但困难,且用户编程习惯极难改变。
零云
2023/08/05
2010
【腾讯云Cloud Studio实战训练营】React 快速构建点餐页面+Python中秋拼图赏月小游戏
腾讯云 Cloud Studio 是腾讯公司推出的一款集成开发环境(IDE),为开发者提供了一个能够随时随地进行工作的平台,它融合了云端编译、运行、调试、发布等功能,极大地方便了开发者的工作流程。开发者可以在浏览器中轻松地编写、运行和调试代码,同时实现代码的自动保存、版本控制和协同开发等功能。腾讯云 Cloud Studio 支持多种编程语言和框架,包括 JavaScript、Python、Java、C++、Node.js 等,满足不同开发者的需求。
度假的小鱼
2023/09/08
2060
【腾讯云 Cloud Studio 实战训练营】使用云IDEA,快速构建React完成点餐H5页面
最近受邀参加了【腾讯云 Cloud Studio 实战训练营】的活动。随着活动的进行,经过老师们的讲解,我加深了对 Cloud Studio 的理解,所以写下本篇文章来介绍下它的使用。
阿Q说代码
2023/08/21
4500
【腾讯云 Cloud Studio 实战训练营】使用云IDEA,快速构建React完成点餐H5页面
【腾讯云 Cloud Studio 实战训练营】用于编写、运行和调试代码的云 IDE泰裤辣
​ 随着互联网的的普及和发展,越来越多的程序开发项目逐渐在向云端转移,得益于互联网的传输稳定以及安全高效,使得开发人员可以在任何地方进行开发,并且可以方便与其他人员进行协同开发,共同推进项目进度。其次,随着云服务技术的不断发展,有很多的开发工具和开发环境别迁移到云端,云服务商能够提供稳定、高效且安全的云服务,满足程序员随时随地在云端进行开发、测试、部署、调试等一系列工作流程。
宝耶需努力
2023/08/11
3190
【腾讯云 Cloud Studio 实战训练营】用于编写、运行和调试代码的云 IDE泰裤辣
【腾讯云 Cloud Studio 实战训练营】快速构建React完成点餐H5页面
官方文档地址:Cloud Studio(云端 IDE)简介 | Cloud Studio
香菜聊游戏
2023/08/10
2940
腾讯云 Cloud Studio 实战训练营——快速构建React完成点餐H5页面
准备好素材图(如首页的banner、食物图片等),然后点击链接跳转到官网,并点击“注册/登录”。
用户9832417
2023/07/29
2510
【玩转 Cloud Studio】Cloud Studio 初体验
Cloud Studio 是基于浏览器的集成式开发环境(IDE),为开发者提供了一个稳定的云端工作站;在使用 Cloud Studio 时无需安装,随时随地打开浏览器就能使用;包含代码高亮、自动补全、Git 集成、终端等 IDE 的基础功能,同时支持实时调试、插件扩展等,可以帮助开发者快速完成各种应用的开发、编译与部署工作。
猫猫摸大鱼
2022/08/10
3.7K4
【玩转 Cloud Studio】Cloud Studio 初体验
推荐阅读
【玩转 Cloud Studio】腾讯Cloud Studio 云端开发环境上手体验,太香了!
1.8K3
【玩转cloud studio】 初试cloud studio
1K1
使用 React 开发单页应用的实践
2670
【玩转 Cloud Studio】Cloud Studio介绍与基础使用
4.7K15
【腾讯云 Cloud Studio 实战训练营】基于Cloud Studio构建React完成点餐H5页面
2500
【腾讯云 Cloud Studio 实战训练营】当我还在恐龙扛狼,隔壁IDE竟然已经卷成这样了
4600
【腾讯云Cloud Studio实战训练营】Cloud Studio 快速搭建学习分享
3420
【玩转 Cloud Studio】项目合作新姿势:基于Cloud Studio云端IDE进行项目开发部署与团队协作
2.1K2
【玩转 Cloud Studio】从0到1迁移至云上编程
1.7K1
【腾讯云 Cloud Studio 实战训练营】使用Cloud Studio快速构建React完成点餐H5页面还原
2560
【玩转 Cloud Studio】iPad 编程生产力
4.5K3
【腾讯云 Cloud Studio 实战训练营】使用Cloud Studio快速构建React完成点餐H5页面还原
2420
【腾讯云 Cloud Studio 实战训练营】体验搭建一个软件系统,无经验也能做开发
1.4K0
【腾讯云 Cloud Studio 实战训练营】一个多年云端开发体验者的实战使用
2010
【腾讯云Cloud Studio实战训练营】React 快速构建点餐页面+Python中秋拼图赏月小游戏
2060
【腾讯云 Cloud Studio 实战训练营】使用云IDEA,快速构建React完成点餐H5页面
4500
【腾讯云 Cloud Studio 实战训练营】用于编写、运行和调试代码的云 IDE泰裤辣
3190
【腾讯云 Cloud Studio 实战训练营】快速构建React完成点餐H5页面
2940
腾讯云 Cloud Studio 实战训练营——快速构建React完成点餐H5页面
2510
【玩转 Cloud Studio】Cloud Studio 初体验
3.7K4
相关推荐
【玩转 Cloud Studio】腾讯Cloud Studio 云端开发环境上手体验,太香了!
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验