1 前言

我们需要自己开发一款标注软件～

2 框架选择

应用框架：Electron+React
Package管理工具：yarn
Js脚手架：Create React App
（不使用ERB, which is a bullshit）
UI组件库：Bootstrap (React Bootstrap)
图标样式库：fontawesome (react-fontawesome)
样式方案：.scss/.css

3 项目需求

3.1 自动更新

在标注软件中，加入自动更新的功能；

4 开发环境

开发语言：node.js
（npm会随node.js一同安装）
包管理工具：yarn
IDE：VSCode

4.1 Yarn安装

可以参考我的博文《标注工具——yarn的学习笔记》

4.2 基础库安装

react-fontawesome

安装教程可以参考《5-4 为项目选择图标库》
具体的安装流程我们根据react-fontawesome的官方文档来进行，首先打开react-fontawesome-doc，
Note：这里我们选择yarn方式进行安装；

5 项目初始化&配置

5.1 使用create-react-app创建项目

我们使用yarn方式创建项目，请参见create-react-app–getting-started#yarn

5.2 安装ERB项目依赖

使用yarn命令

yarn

5.2.1 使用“yarn”命令进行项目依赖包的安装

在electron-react-boilerplate的安装步骤中，需要使用“yarn”命令进行项目依赖包的安装，
所以我们首先需要安装yarn包管理器，使用如下命令：
npm install -g yarn
Note：遇到权限问题，可以百度搜索一下解决方案
Note：如果遇到网络问题，this might be due to the firewall;
我们可以使用换源的方法来解决这个问题，
可以参考这个千锋教育的老师提供的讲解：2020Electron-HTML+CSS+JS构建跨平台桌面应用程序【千锋Web前端】

5.3 安装electron

yarn add electron --dev

5.3 安装第三方依赖

使用yarn命令进行安装
yarn add packagename
安装React Bootstrap：yarn add react-bootstrap bootstrap

5.4 启动调试

使用命令

yarn start

5.4 脚手架预配置

将全局样式文件更改为.scss格式
可以直接将全局样式文件App.global.css重命名为App.global.scss；

5.5 移植时node_modules文件夹可以删除

在对代码进行移植的时候，node_modules文件夹可以删除；

6 软件运行分析

6.1 端口检测——./internals/scripts/CheckPortInUse.js

在运行前，首先要进行端口检测，
执行代码为：

参数说明：
node — 执行js代码；
node -r @babel/register ./internals/scripts/CheckPortInUse.js — 表示使用babel的编译器来执行.js代码；

7 写作方法

7.1 模块引入

在js写作中，模块引入有多种方法，这里我们统一使用ES模块引入规则；

7.1 样式写作方法

7.1.1 自定义全局样式文件——“component.global.scss”

在使用自定义样式文件时，需要以.global.scss结尾，这是ERB官方文档中描述的要求，（请参考ERB/styling/#css-modules）

7.1.2 引用样式

使用React-class方式引入样式

使用styles类方式引入样式

<div className={styles['app']}>
</div>

7.1.3 添加图标

使用classname属性添加图标

使用icon属性设置图标

使用组件的icon属性设置图标，以下示例代码来自于fontawesome-using-with-react

// Solid
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
const element = <FontAwesomeIcon icon={faCoffee} />

fontawesome介绍

这里我们选择fontawesome作为样式库是参考的VoTT的代码，如图所示

<a href="#" className="p-5 file-upload"onClick={() => this.filePicker.current.upload()} ><i className="fas fa-folder-open fa-9x"></i><h6>{strings.homePage.openLocalProject.title}</h6>
</a>

VoTT在<i>标签中使用了fontawesome的图标，首先第一个使用的样式是fas，
这里fas = fa + s，fa表示fontawesome，s表示solid，也就“实心的”意思；

7.2 全局样式写作——App.global.scss

可以把将该样式文件在App.global.scss中进行引入，然后在组件中，可以使用下面的示例方式调用样式：

也就是使用HTML方式直接调用样式；

使用样式名直接引入——“最原始的引入方法”

使用样式名引入

<div className="text-light"}>
# Note：这里使用双引号引用样式的类名
</div>

<div className={'text-light'}>
</div>

两种方式的混合引入，可以看看下面的示例，

6.1.3 引用样式

6.1.2 备注

1. css无法引入scss文件。

6.2 编写React组件

对于React组件的写作，其基本框架如下：

export default class Element extends React.PureComponent {public render() {return (// some codes like html...);}
}

6.3 编写路由

1. 引入createHashHistory()方法；
2. 定义Router并向子组件传递history，
   
3. 定义路由组件MainContentRouter，对路由进行写作，
   
4. 使用this.props.history.push()进行跳转；

自动驾驶——标注工具（js+electron）的开发笔记（基于Create-React-App）相关推荐

1. 自动驾驶——标注工具（js+electron）的开发笔记（基于ERB）

   目录 1 前言 2 框架选择 2.1 Web学习资料--<Web Development for Beginners - A Curriculum> 3 项目需求 3.1 自动更新 4 A ...

2. 自动驾驶——标注工具（PySide）的开发笔记

   1. 前言 为了便于调试,我们选择PySide来开发桌面端的标注工具:

3. 自动驾驶——标注工具的开发笔记（legacy）

   5 electron-react-boilerplate的文件结构 4.1 文件类型 electron-react-boilerplate中有很多种文件类型 4.1.1 .tsx--使用TypeScr ...

4. Uber AVS 自动驾驶可视化工具（二）XVIZ之Overview

   Uber AVS 自动驾驶可视化工具 (二)XVIZ之Overview Overview Introduction Main Features XVIZ Protocol Specification ...

5. 赋能自动驾驶技术腾飞——海天瑞声发布『DOTS-AD』自动驾驶标注平台

   自动驾驶技术的发展已经取得了巨大进步,现在越来越多的汽车制造商和科技公司都在开发自己的自动驾驶汽车.但要想汽车真正实现自动驾驶还需要面对很多挑战,其中之一就是准确性问题.这让数据标注在自动驾驶技术中显 ...

6. Uber AVS 自动驾驶可视化工具（一）

   Uber AVS 自动驾驶可视化工具 (一) Uber AVS 模块组成 `XVIZ` `streetscapec.gl` 注: 引用: Uber AVS 近期,Uber开源了自动驾驶可视化工具AVS ...

7. carla与ros2的自动驾驶算法-planning与control算法开发与仿真

   欢迎仪式 carla与ros2的自动驾驶算法-planning与control算法开发与仿真 欢迎大家来到自动驾驶Player(L5Player)的自动驾驶算法与仿真空间,在这个空间我们将一起完成这些 ...

8. “乐高式”自动驾驶研发开放平台，让开发更简单灵活高效

   一.2周构建自动驾驶研发平台的秘诀详解 自动驾驶商业化落地加速 中国自动驾驶行业目前面临两个较大的变化.首先,去年11月北京正式开放自动化驾驶的商业化试点,这意味着自动化服务迈过了商业化门槛.与此同时 ...

9. 回顾：鲍世强，讲述51VR自动驾驶仿真平台从0-1的开发与构建

   L3及其以上级别自动驾驶车辆的开发,在系统复杂程度.使用环境复杂程度方面均急剧增加.传统开发ADAS算法的仿真工具已无法完美解决当前更高级别的自动驾驶开发问题.仿真平台便成为自动驾驶企业的刚性需求. ...

最新文章

1. HQL语句中数据类型转换，及hibernate中createQuery执行hql报错
2. Eclipse中将项目中build path底下的jar发布到tomcat下
3. Soul网关发布2.2.0：让高性能网关变得如此简单！
4. 输入输出（Input and Output）
5. Redis中的Lua脚本超时
6. 2021年慈溪横河中学高考成绩查询,慈溪中学
7. 构建安全的Xml Web Service系列之如何察看SoapMessage
8. Java集合之LinkedHashSet源码分析
9. linux /etc/passwd
10. python中如何导入图片,Unreal中的python如何导入图片资源到引擎
11. Hello World@@@@
12. BurpSuite 设置Hostname Resolution
13. C++语言特性的性能分析
14. 寄存器，锁存器，触发器，储存器 区分
15. linux下下载基因组程序,从 NCBI 批量下载基因组的方法
16. OllyDbg的简单使用
17. 《程序员的自我修养》读书笔记——动态链接
18. win10家庭中文版
19. 2022年R1快开门式压力容器操作考试题及R1快开门式压力容器操作试题及解析
20. 【毕业设计之微信小程序系列】基于APP的微信点餐小程序的设计与实现

热门文章

1. 记一次神奇的sql查询经历，group by慢查询优化（已解决）
2. docker ubuntu16安装
3. Linux常用命令——关机重启命令
4. 并发编程（4）同步并发操作
5. javascript第三节
6. 百度之星资格赛1003：度度熊与邪恶大魔王
7. 【自】数据库系统原理（三）——测试总结后，
8. WinForm 的dataGridView全选，反选
9. 【Vue.js 知识量化】Promise
10. 《恋上数据结构第1季》哈希表介绍以及从源码分析哈希值计算