【玩转 Cloud Studio】React Run on Cloud Studio

2022-08-20 23:08:20 浏览数 (2)

前言

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

What is Cloud Studio

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

平台首页平台首页

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

各种模板各种模板

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

开始run开始run

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

代码语言:javascript复制
yarn

以及

代码语言:javascript复制
yarn start

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

runingruning

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

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

插件插件

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

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

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

代码语言:javascript复制
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.jsApp.js

总结

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

0 人点赞