forgeplus-react/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/