- [Tencent Cloud Studio Practical Training Camp] Build React based on Cloud Studio to complete the ordering H5 page
- Summarize
foreword
- Recently, I also had the opportunity to participate in an event held by Tencent Cloud
腾讯云 Cloud Studio 实战训练营to learn more about腾讯云 Cloud Studiothe products. - The emergence of Tencent Cloud Cloud Studio is somewhat innovative. Using it for development eliminates the cost of using some traditional development tools.
- For example, downloading a development tool requires basic development environment configuration, as well as the cost of downloading, installing, and occupying local storage.
- Let's use it to
腾讯云 Cloud Studiomake a practical case to gain a deeper understanding of the product's superiority!
[Tencent Cloud Studio Practical Training Camp] Build React based on Cloud Studio to complete the ordering H5 page
1. Introduction to Cloud Studio
1.1 What is Cloud Studio
Cloud StudioIt is a browser-based integrated development environment (IDE) that provides developers with an always-on cloud workstation. Users do not need to install Cloud Studio when using it, and can program online anytime, anywhere by opening a browser.
As an online IDE, Cloud Studio includes basic IDE functions such as code highlighting, auto-completion, Git integration, and terminal. It also supports real-time debugging, plug-in extensions, etc., which can help developers quickly complete the development, compilation, and deployment of various applications .
In addition, Cloud Studio also supports collaboration with other developers, allowing easy sharing of code and projects, and real-time collaborative editing.
At present, based on the perspective of old users' experience and the cost of getting started for new users, the Cloud Studio team is actually offering 3000 minutes of free workspace time per month, so we can use the free time to experience it seriously!
1.2 Related Links
- Cloud Studio official website address: https://www.cloudstudio.net/
- Cloud Studio documentation address: https://cloudstudio.net/docs/
1.3 Login and registration
(1) Open the official website of Cloud Studio and click Register: https://www.cloudstudio.net/
Then you choose an account according to your own situation to register and log in.
It is normal to go to this page after registration and login. You can see that Cloud Studio provides many development environments and templates. Let’s take a look at how to use it!
2. Practical exercises
This article intends to use the cloud IDE Cloud Studio to quickly build, and develop and restore a simplified version of the mobile React H5 ordering system page, from 0 to 1 to experience the advantages brought to us by the cloud IDE, no need to install various environments, easy to use , right out of the box.
2.1 Initialize the workspace
After coming to the homepage of Cloud Studio, you can see that Cloud Studio provides many templates (framework templates, cloud-native templates, website building templates), all of which are pre-installed environments. Out-of-the-box templates can quickly build an environment for code development. At the same time, Cloud Studio also provides 3,000 minutes of free working space per month to all new and old users.
At this point, choose to create a React template and wait for the initialization of the cloud IDE to complete.
Even if you have never learned React, you only need to open the corresponding React framework template to start initializing a React workspace. After waiting for less than 10s (different from the difference in bandwidth and network speed), the cloud IDE has been initialized.
After waiting for the initialization to complete, on our right side, we can see a preview interface of real-time preview, and then enter the following command in the console below.
// 进入当前目录
cd ./ &&
// 设置port的环境变量
set port=3000 &&
// 导出port的环境变量
export PORT=3000 &&
// 相当于 yarn install，安装相关依赖
yarn &&
// 启动开发环境
yarn start --port=3000
In this way, we have completed a process of initializing the React project. With a new host, as long as there is a browser, there is no need to prepare any environment or install any software. You only need to be able to connect to the Internet, and the initialization can be completed within a few minutes. , which is very efficient for new technology learning.
2.2 Develop a simplified version of the ordering system page
The main purpose is to develop a React H5 page. For rapid development, UI component libraries are usually used. Here we use the antd-mobile UI library. antd-mobile is the React implementation of Ant Design's mobile specification.
1. Install antd-mobile
antd-mobile supports on-demand loading based on Tree Shaking, and most build tools (such as webpack 4+ and rollup) support Tree Shaking, so in most cases you can have a smaller package size without additional configuration .
yarn add antd-mobile@^5.32.0
# 或者
npm install --save antd-mobile@^5.32.0
Enter the code in the terminal to install it.
After the installation is complete, it will be displayed in package.json.
2. Install less and less-loader
Usually when we develop React projects, we may use Less and Sass for style development. By default, React integrates Sass, so it is very unfriendly to friends who are used to writing Less, so we need to configure Less in the React project.
yarn add -D less@^3.12.2 less-loader@^7.0.1
Note here that if you install a higher version without a version, the project will fail to start, so you need to mark the version before installing it.
This completes the installation, proceed to the next step.
3. Expose the webpack configuration file
Configure in webpack.config.js, this configuration needs to expose React's config configuration file, warning: this operation is irreversible
npm run eject
After entering 'y', the project will automatically deconstruct.
After completing the command, a config folder will appear in the root directory of the project, find the config/webpack.config.js file, and press Ctrl + F to find the keyword "style files".
This is the code related to setting css.
Change the code from lines 70 to 73 in the above figure to less, and copy the following code.
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
// 新增加 Less 代码
const lessRegex = /\.(less)$/;
const lessModuleRegex = /\.module\.(less)$/;
Continue to enter "sassRegex" in the search box to find the following code.
Here is the same as the previous configuration, follow the configuration of sass, and configure less.
// less
{
test: lessRegex, // 有改动
exclude: lessModuleRegex, // 有改动
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
},
'less-loader' // 有改动
),
sideEffects: true,
},
{
test: lessModuleRegex, // 有改动
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'less-loader' // 有改动
),
},
This completes the configuration of less in webpack.config.js, and the less style can be used in the project.
4. Install normalize
Normalize.css is a modern alternative to CSS resets that provides a strong cross-browser consistency in styling default HTML elements. Normalize.css is a modern, HTML5-ready, premium alternative to the traditional CSS reset.
5. Upload the materials needed for the project
In the past, to upload server code, you needed to use the Scp command or install the Remote SSH plug-in support. Cloud Studio can easily support routine operations such as file upload and download by default, which is consistent with the local IDE experience:
- You can directly drag files to the IDE editing area
- Right click on the IDE editing area "Upload"
Just drag the img folder to the src directory.
img download method: img
6. Replace the App.js main file
The following is the main business code of the ordering system, just copy it to src/App.js and replace it directly.
import './App.css';
import React, {
useState } from 'react'
import {
NavBar, Toast, Swiper, SideBar, TabBar, Badge } from 'antd-mobile'
import {
AppOutline,
ExclamationShieldOutline,
UnorderedListOutline,
UserOutline,
} from 'antd-mobile-icons'
import BannerImg from './img/banner.png'
import HotImg from './img/hot.png'
import Food1Img from './img/food1.png'
import Food2Img from './img/food2.png'
import CartImg from './img/cart.png'
import './index.less'
import "normalize.css"
function App() {
const [activeKey, setActiveKey] = useState('1')
const tabbars = [
{
key: 'home',
title: '点餐',
icon: <AppOutline />,
},
{
key: 'todo',
title: '购物车',
icon: <UnorderedListOutline />,
badge: '5',
},
{
key: 'sale',
title: '餐牌预告',
icon: <ExclamationShieldOutline />,
},
{
key: '我的',
title: '我的',
icon: <UserOutline />,
badge: Badge.dot,
},
]
const back = () =>
Toast.show({
content: '欢迎进入点餐系统',
duration: 1000,
})
const items = ['', '', '', ''].map((color, index) => (
<Swiper.Item key={
index}>
<img style={
{
width: '100%'
}} src={
BannerImg }></img>
</Swiper.Item>
))
const tabs = [
{
key: '1', title: '热销' },
{
key: '2', title: '套餐' },
{
key: '3', title: '米饭' },
{
key: '4', title: '烧菜' },
{
key: '5', title: '汤' },
{
key: '6', title: '主食' },
{
key: '7', title: '饮料' },
]
const productName = [
'小炒黄牛肉',
'芹菜肉丝炒香干',
'番茄炒鸡蛋',
'鸡汤',
'酸菜鱼',
'水煮肉片',
'土豆炒肉片',
'孜然肉片',
'宫保鸡丁',
'麻辣豆腐',
'香椿炒鸡蛋',
'豆角炒肉'
]
const productList = productName.map((item, key) => {
return {
name: item,
img: key % 2 === 1 ? Food1Img : Food2Img
}
})
return (
<div className="App">
<NavBar onBack={
back} style={
{
background: '#F0F0F0',
fontWeight: 'bold'
}}>点餐</NavBar>
<div className='head-card'>
<Swiper
style={
{
'--border-radius': '8px',
}}
autoplay
defaultIndex={
1}
>
{
items}
</Swiper>
</div>
<div className='product-box'>
<SideBar activeKey={
activeKey} onChange={
setActiveKey}>
{
tabs.map(item => (
<SideBar.Item key={
item.key} title={
item.key === '1' ? <div>
<div className='flex-center'>
<img style={
{
display: 'block',
width: '16px',
marginRight: '5px'
}} src={
HotImg }></img>
<div>{
item.title }</div>
</div>
</div> : item.title
} />
))}
</SideBar>
<div className='product-right'>
<div className='product-title'>热销</div>
<div className='product-list'>
{
productList.map((item, key) => {
return (
<div className='product-item'>
<div className='product-item-left'>
<img style={
{
display: 'block',
width: '76px',
marginRight: '5px'
}} src={
item.img }></img>
<div className='product-item-left-info'>
<div>
<div className='product-item-left-info-name'>{
item.name }</div>
<div className='product-item-left-info-number'>月售{
key + 1}0 赞{
key * 5}</div>
</div>
<div className='product-item-left-info-price'>¥10</div>
</div>
</div>
<div className="cart">
<img style={
{
display: 'block',
width: '30px',
marginRight: '5px'
}} src={
CartImg } onClick = {
() =>
Toast.show({
content: '添加购物车成功'
}) }></img>
</div>
</div>
)
})
}
</div>
</div>
</div>
<TabBar>
{
tabbars.map(item => (
<TabBar.Item
key={
item.key}
icon={
item.icon}
title={
item.title}
badge={
item.badge}
/>
))}
</TabBar>
</div>
);
}
export default App;
Then create an index.less file in the src directory, and copy the following less-related codes into the file.
.head-card {
padding: 10px 20px;
box-sizing: border-box;
}
.flex-center {
display: flex;
align-items: center;
}
.product-box {
display: flex;
align-items: center;
width: 100%;
height: calc(100vh - 45px - 130px - 50px);
}
.product-right {
flex: 1;
height: 100%;
}
.product-title {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #000000;
text-align: left;
padding-bottom: 10px;
}
.product-list {
height: calc(100% - 24px);
overflow-y: auto;
}
.product-item {
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 10px;
box-sizing: border-box;
margin-bottom: 10px;
&-left {
display: flex;
&-info {
padding-left: 3px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
&-name {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #000000;
text-align: left;
}
&-number {
padding-top: 3px;
font-family: PingFangSC-Regular;
font-size: 11px;
color: #787878;
text-align: left;
}
&-price {
font-family: PingFangSC-Regular;
font-size: 18px;
color: #FF1800;
text-align: left;
}
}
}
}
.cart {
position: absolute;
right: 10px;
bottom: 0;
}
7. Start the project
After completing the above operations, enter in the console yarn startto start the project.
Cloud Studio has a built-in preview plug-in that can display web applications in real time. When the code changes, the preview window will automatically refresh, and you can develop and debug web pages in real time in Cloud Studio
Copy the address bar of the built-in Chrome browser window and share it with other members of the team, eliminating the cumbersome configuration of nginx deployment.
In this way, even if our project is completed, we only need to install a few libraries to quickly build a project.
3. Publish to the warehouse
After the project is completed, it can be quickly released to the git warehouse. First, you need to fill in the README.md file.
# 项目说明
这是一个用 IDE [Cloud Studio](https://www.cloudstudio.net/?utm=csdn) 快速搭建，并开发还原一个移动端 React H5 的简版点餐系统页面，从 0 到 1 体验云 IDE 给我们带来的优势，不需要装各种环境，简单易用，开箱即可上手。
## 相关技术栈
React + less + webpack
## 项目运行
yarn install
yarn start
Find "Source Code Management" in the function menu area on the left, and use git initto initialize the warehouse.
Then enter the message information that needs to be submitted, and click "Commit" to submit the warehouse.
If it prompts that there is no associated account, go to the settings and associate it.
If you use coding when you log in, you can push it directly to the coding warehouse. Of course, you can also push it to github. You need to bind the corresponding account to submit.
Here you can log in to the Coding platform to view the warehouse code.
4. Development space management
In our console, we can manage all the workspaces used, and the buttons on the right can perform upgrade configuration, settings, delete, start\stop operations.
Summarize
After using Cloud Studio for a practical exercise, I have a deeper understanding of Cloud Studio. Let me briefly talk about the advantages and optimization suggestions of Cloud Studio.
The advantages of Cloud Studio are obvious, which can be roughly divided into the following points.
- Save development costs . It can help users reduce the cost of installing IDE and provide one-stop service for online code development, compilation, operation and storage.
- Convenience . Cloud Studio is a browser-based integrated development environment (IDE) that provides developers with an always-on cloud-based workstation. Users do not need to install Cloud Studio when using it, and can program online anytime, anywhere by opening a browser.
- Cloud development . Cloud Studio does not require any local installation, just use a supported browser, you can easily log in and start coding development, realizing Coding everywhere. At the same time, it accelerates the configuration of the development process, defines the cloud development environment with configuration, improves development efficiency, and has more flexible development resources on the cloud.
- A variety of prefabricated environments are available . Built-in common environments such as Node.js, Java, Python, etc., directly enter the development state.
- Metawork development collaboration. Through code collaboration, multi-cursor highlighting and following, the collaboration becomes clear and orderly. Including but not limited to code collaboration, multi-cursor collaboration, real-time preview, and terminal collaboration.
- Numerous templates are available . An obvious feeling when using it is that Cloud Studio provides a large number of templates. We can directly take out some functions from the template library and modify them to meet our own needs and quickly use them. Even people who don’t know how to write code can use them. Operate with two hands.
Cloud Studio Optimization Suggestions
- Documentation is comprehensive and detailed . I hope to add more programming language documentation introductions. Currently there are only a few mainstream programming language operation documents in the documentation. For some users who have just started using Cloud Studio, it will be faster to see the detailed documentation of the programming language they usually use. Get started with Cloud Studio.
- Provide more programming languages and frameworks . The programming languages and frameworks currently supported by the website cannot meet the needs of all users. Consider supporting more programming languages and frameworks to improve the applicability and scalability of the platform.
- Provides greater stability . At present, there is still room for further improvement in the performance and stability of the website, and sometimes there may be some problems such as freezes and crashes. In order to improve the user experience, it is recommended to consider optimizing the performance and stability of the platform.