forked from Gitlink/forgeplus-react
529a64194e | ||
---|---|---|
config | ||
public | ||
scripts | ||
src | ||
.gitignore | ||
LICENSE | ||
add.txt | ||
index.js | ||
package-lock.json | ||
package.json | ||
readme.txt |
readme.txt
其他的文档位置: /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服务端口为3000,node服务端口为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/