forgeplus-react/readme.txt

172 lines
7.6 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

其他的文档位置:
/educoder/public/react/public/js/readme.txt 关于js_min_all
/educoder/educoder/public/react/scripts/readme-cdn.txt 关于CDN
/educoder/public/react/src/modules/page/readme.txt 关于TPI
/educoder/public/editormd/lib/readme-marked.txt 关于md编辑器 marked.js
1、 安装node v6.9.x此安装包含了node和npm。
2、 安装cnpm命令行 npm install -g cnpm --registry=https://registry.npm.taobao.org
3、 安装依赖的js库public/react目录下<即项目package.json所在目录>,开启命令行): cnpm install
4、 如果你的ruby服务使用的是3000端口则需要在package.json中修改"port"参数的值
5、 启动服务(命令行-目录同3 npm start
6、 build初始化 npm run build
注意:
1、cnpm install 之前先需要修改下ruby mine的一个settings防止ruby mine对node_modules目录里的内容建索引详情见线上文档-react开发环境搭建
线上文档-react开发环境搭建 地址: https://www.trustie.net/boards/6862/topics/46425
2、package.json中配置
"proxy": "http://localhost:3000",
"port": "3007"
目前暂时必须写为和上面的一样ruby服务端口为3000node服务端口为3007当当前端口为3007时程序会将axios发出的请求转到localhost:3000上进行跨域请求。
3、静态js加载问题
editormd源码改动注释掉了564行 加载codemirror/codemirror.min的js代码。因为codemirror 已经加载了codemirror对象会带有插件重复加载会覆盖全局codemirror对象使得之前加载的插件失效
----------------------------------------------------------------------------------------------
React开发相关知识点
需要了解的ES6的知识 https://www.trustie.net/boards/6862/topics/46427
----------------------------------------------------------------------------------------------
新加入的lib有 axios、material-ui、lodash、classnames、moment、immutability-helper
rc-tree、rc-form 、rc-rate、rc-pagination、rc-select 、showdown
考虑替代删除确认弹出框的组件http://react-component.github.io/tooltip/examples/onVisibleChange.html
----------------------------------------------------------------------------------------------
TPI State整理 START
----------------------------------------------------------------------------------------------
TPIContextProvider 详情接口的所有state
Index.js
taskListLoading
challenges
challengesDrawerOpen
MainContentContainer.js
repositoryCode: '',
currentPath: '', // 当前所选的path可能是一个只读的path只读path的话challenge.athIndex为-1
isEditablePath // 是否是可以编辑的path
open: false, // 繁忙等级等提示用Dialog TODO 考虑重构封装到根组件
gameBuilding: false, // 评测中标志
codeStatus: 2, // 0 已修改 1 保存中 2 已保存 3 保存失败
codeLoading: false, // code加载中
resetCodeDialogOpen: false, // TODO考虑重构封装到根组件
resetPassedCodeDialogOpen: false, // TODO考虑重构封装到根组件
LeftViewContainer.js
tabIndex: 0, 页签index
dialogOpen: false,
gameAnswer: '', 答案
snackbarOpen: false,
comments: [], 评论
comment_count_without_reply: 0, 评论数量 TODO 和详情接口字段重复
// 默认pageSize为10
currentPage: 1, 评论分页
loadingComments: true, 评论加载中
gotNewReply: false, 新的回复
CodeRepositoryViewContainer.js
drawerOpen: false,
loadingFirstRepoFiles: false, drawer里的loading状态
fileTreeData: "", 文件树
codeRepositoryViewExpanded: false, 展开状态
CodeEvaluateView.js
testSetsInitedArray: testSetsExpandedArrayInitVal.slice(0), 测试集是否初始化标志
evaluateViewExpanded: false,
tabIndex: 1, 页签index
----------------------------------------------------------------------------------------------
TPI State整理 END
----------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------
重要TPI实现时修改的js库的记录 START
----------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------
重要TPI实现时修改的js库的记录 END
----------------------------------------------------------------------------------------------
create_kindeditor.js __isR 表示是react环境react环境下采用事件通知react组件来处理
if (window['__isR'] === true) {
$(document).trigger("onReply", { commentContent:tContents, id:id, editor:params.editor } );
} else {
params.form.submit();
}
editormd.min.js 直接注释掉了codemirror.min的加载应该改成有codeMirror了则不加载
// codemirror 已经加载了codemirror会有插件重复加载会使得之前加载的插件失效
// editormd.loadScript(loadPath + "codemirror/codemirror.min", function() {
对应提交项
Revision: 73d95ce266d5d7e55a3a88d08d1247b3a08c7caf
Date: 2018/4/2 16:12:21
Message: 切下一题时更新左侧editormd里的内容更新右侧codemirror内容。
js_min_all.js 最后面手动加入了若干js代码还没做分离、再合并处理 date:180507
is_cdn_link tpi_html_show方法
----------------------------------------------------------------------------------------------
TPM使用react实现的利弊 START
----------------------------------------------------------------------------------------------
1、全部使用react重写
做法第一屏使用新接口之前的js脚本还是继续使用有必要的话需要局部刷新的将部分jquery实现改为react实现
利:
tpi中评论组件、文件树组件方便复用
js、css库管理方便
暂时不依赖于react的状态管理
之前的ajax请求还是可以暂时复用
弊:
接口评估?
rails模板要改成jsx语法
头部功能区域、底部静态链接区域会存在重复代码 react版和非react版
codemirror等组件的使用会不会有问题
学习成本
目前决定新页面或者评论组件所在页面使用react实现
----------------------------------------------------------------------------------------------
TPM使用react实现的利弊 END
----------------------------------------------------------------------------------------------
其他方式comments组件build到新入口后将代码copy到rails页面
----------------------------------------------------------------------------------------------
不错的库 START
----------------------------------------------------------------------------------------------
https://livicons.com/icons-original -- 收费 动画icon
https://github.com/maxwellito/vivus -- 让SVG标签动起来
http://ianlunn.github.io/Hover/ -- hover 动画
https://github.com/legomushroom/mojs
https://github.com/juliangarnier/anime --js动画
https://codepen.io/juliangarnier/pen/gmOwJX
https://github.com/daneden/animate.css
A responsive tour snippet, with a step-by-step guide(onboarding) to help users understand how to use your website.
https://github.com/sorich87/bootstrap-tour
https://github.com/linkedin/hopscotch
https://github.com/Robophil/Product-Tour
code editor
https://microsoft.github.io/monaco-editor/