reactnpm、git工作环境

实习已经一个月了，从一个对于前端的了解限于html、css、js，jquery，而且只是了解，就看过一本html+css+js基础教程书的程度，有幸获得实习的机会，到现在实习已经一个月，总结一下质的变化、收获吧。

实习的话，除了第一天来打，搭git、npm、项目环境，之后就开始接触一些简单的需求。

首先我们组的项目是基于react、go提供接口。

开始搭git环境，我对git的了解仅限于：github很受认可，搜一些报错或者问题会有git上有答案。简单来说就是，不知道是啥，没用过。然后一无所知也不能怯场啊，大家都有自己手头的工作，带我的，暂且称为老师吧，给了部门的新人指导wiki，然后开始照着文档操作，当然后来发现这是一个标准流程，不仅仅是我们公司，大家都是这样用git的，所以教程网上也一搜一地，就不赘述了，主要就是有个配置密钥的步骤。

然后就是react，我对于react，真的只知道有这个前端框架。然后就是学呗，老师一面面过我，对于我什么水平清清楚楚，所以就给了我一天时间，在网上找找文档（好奇我怎么拿到实习offer吗，对，就是这么菜，一点基础没有，但是拿到实习机会了。我觉得是因为我大三吧，而且表态大三下学期整个学期都实习，学校本来也比较好，所以可能比较宽容，面试问很多网络基础，是我的专业基础，所以我答得也很好，所以可能觉得我还是有很好空间的）。回到正题，一天过了react，其实，这也是我很庆幸能实习的一点，如果我是在学校上课，靠着实验、上机、作业、上课之后，挤出来的一点点时间来学前端，我看一遍react文档可能要一个学期，然后毫无实战经验，看的东西怎么用也还是不会。实习的话，只有两个要求：1、别来到北京就觉得不到处逛可惜了，好好学习，好好努力；2、不要怕丢人，我确实比不上其他所有人，甚至差得有点离谱，一点基础都没有，估计大家会经常质疑我是怎么被招进来的，不怕！我才大三，我只是大三的实习生，我什么都不怕，我总是还有很多的可能！

然后就是redux，也是一个下午，或者一天看下官方文档。接下来就是最棒的部分，我看react、redux有项目可以参考！这是自学非常需要，但是没有的killing part。我对着项目，看着项目的目录结构，一点点去套，去理解，第一遍过文档的时候，很晕的state，setState，组件，action，container，开始遍得有一点点影子。老师给了我一个很简单的需求，并且告诉我不急着上线，我可以慢慢做，遇到不懂的随时问，可以把需求停下，花时间去弄，完全不给我压力，而且给的需求是跟一个完成开发的需求很类似，告诉我可以参考。我就这样一点点套，一点点copy，修改。

到现在，我对整个项目的结构，已经有了很基本的、也相对清晰的认识，对于react、redux也不再一头雾水，ES6，对！还有ES6，我ES6也什么都不会的，买了一本《深入浅出ES6》，一个寒假才看了几页，上班之后，项目根本不写html，css文档，全是js，而且一点原生js影子都没有，都是很高端的结构，我于是每天早上，公司没有硬性规定的上班时间，同事们一般是10点半左右来，我就8点到，然后一天一章的过《深入浅出ES6》，虽然看的时候确实，一知半解，但是，我有项目啊，项目中ES6语法的活用遍地是，到现在，一个月了，我对很多原来觉得高深的语法，简直信手拈来，什么解构，arrow function，async await，const let，深拷贝浅拷贝……state，props，import这些绕来绕去，传来传去的东西也拿来就是敲，什么constants，什么component，什么containers……虽然现在还是fe菜鸡，但是跟之前已经是很大的不同了，每天都很大收获，看到了fe宽广的天地，对前端开发有了很现实的理解。我说我之前以为前端就是写html、css有人信吗？我之前还问面试官你们没页面要写的时候，上班做什么啊？现在想想，真是有点好笑的问题。Anyway，真的觉得学到很多。

还有就是工具的应用吧。首先是程序员标配的mac，vim编辑器（我之前一直顽固的使用gedit、甚至给sublime配了subl命令），vim显然还是很有用的，基本所有系统命令行都可以直接vi，这太方便了。iterm2，homebrew，zsh插件、autojump插件，对了，我之前甚至不知道tab自动补全文件名，vs code 代替了sublime，认识了better align，ESlint插件，知道了代码规范

接下来就是一些比较细的东西

首先是在项目中使用一个工具的时候，比如解析csv文件的papaparse ，直接npm install --save papaparse，就可以相当于<script …papaparse.min.js…>，将这个工具依赖，自动配到项目的package.json中，代码中就可以直接用了。

然后是开发的时候，在浏览器测试效果的时候，需要启动服务器，在命令行git clone url，将go工程的代码拉下来，

./build.sh

进行编译，

make dev

开启服务，然后就可以通过localhost:端口号，进行访问，调试。如果代码有更新，就

git pull

，再build。

前端react则是将代码拉下来，这里需要一个环境的配置，就是编辑**~/.bash_profile**文件，将拉下来的go代码的路径配置问GOPATH常量，

export $GOPARTH = 文件路径
source /etc/profile

           

然后

source ~/.bash_profile

时配置生效，否则在执行npm run dev，通过webpack监听工程文件编辑时，会报错。所以，也很清晰了，切入到react工程文件夹路径下，npm run dev，即可进行开发，并且实时调试。

所以也说到了调试，调试的话，console.log是一个不错的办法，但是由于会有很多action信息，所以看起来也有时候会很不舒服，这时就应该想起来network，直接观察数据包，检查请求响应，查找问题，一个细节就是，要注意勾选disable cache，实时调试，可不能用缓存：

然后就是git，git的命令

git pull
git push -f
git commit -m ’...‘
gco branchname
gcm  切换到master分支
git rebase -i ...id...
......

           

加油加油~