① express框架怎么用react框架作为前端框架
1.不要陷入纠结工具的怪圈我们团队一开始用React的时候，工具栈应该是grunt+grunt-react；写了一段时间感觉有局限，然后老大带头把工具换成了gulp+browserify+watchify+reactify，然后又愉快的写了大概半年吧，发现流行的库都上webpack了；于是我们的工具栈又变成了gulp+webpack+babel-loader。最后大家一致认为gulp是多余的，所以我们的工具栈又围绕webpack重新搭建了一遍。到最近我负责的一个内部项目，什么hot-mole-replacement、extract-text-plugin（让你在js里require('style.scss');这么写的玩意儿）一股脑的造。当然再后来因为业务需要我们又基于webpack搭建了自己的构建工具，这是后话……这将近一年半的折腾历史告诉大家，1)前端就是个大坑，1个月不学新知识你就会被社区遗忘2)现在上React真幸福，工具栈基本都稳定了（什么？你还不懂？用webpack！），不用花太多时间纠结。PS.HMR也就那样，虽然dan吹得神乎其神，但实际在项目里我发现大家还是习惯手动Cmd+R，因为项目大了以后rebuild也需要1、2秒。2.DOM操作是不可避免的但凡是上点儿规模的前端项目，没有DOM操作基本是不可能的。且不说最常见的后端“埋点”，你总得用DOMAPI去取值吧；就说一个最简单的，比如右手边这个“回到顶部”的按钮，你纯用React写一个试试。当然你会说什么requestAnimationFrame，什么，真正到项目里你会发现还是DOMAPI简单。3.拥抱ES6，拥抱Reactv0.14这俩为什么放在一起说呢？因为Reactv0.14里提出了一个全新的组件概念叫做：无状态的函数式组件（Statelessfunctionalcomponents）。它大概长这样：varAquarium=({species})=>({getFish(species)});有没有发现被传统的createClass方法精简了很多？当然这样写组件也有很多局限，比如不能声明各种生命周期方法等等，但是在常见的前端业务场景中，纯render的组件不在少数。在这样的语法推出后，我们就能把这些组件更方便的抽出来复用了。此外，拥抱ES6还有很多的好处，比如在加载依赖的时候不用先varxxx=require('xxx');再varyyy=xxx.yyy;而是可以直接import{yyy}from'xxx';简洁明了。4.生态环境仍然在成长中，坑不少其中首先要口诛笔伐一下的就是react-router，我们从v0.10开始用，到现在v1.0。你知道为了升级这玩意儿我们改了多少次业务代码么？每次升级API都要变，无力吐槽。当年好不容易搞懂了v0.11，在博客里写了篇技术文章分享，结果后面的日子就是各种被催更……一个月前抽空就0.13版又重写了一遍教程，这不1.0版又出了，API基本全都不一样了！！不一样了！！一样了！！样了！当然除了坑也有不少高质量的生态环境产品，比如蚂蚁的antdesign。5.Server端渲染很美，至今没看见哪个规模级的产品用到可能是我孤陋寡闻吧，欢迎评论中跟进。自己摸索着写过一个最简单的server端渲染，但是这套逻辑如果套到我们现在的业务逻辑中，几乎可以直接枪毙。为了实现server端渲染需要做出的tradeoff太多。6.React很简单，也很难简单是因为React的API真的很少，官网的各种文档花一个下午也能看个七七八八（此时此刻再看看Angular……）。但是当你以为你真的搞懂React的时候，看看React源码剖析系列－解密setState-purerender-知乎专栏这篇文章开头提的问题，有多少人能不假思索的答对呢？（顺便安利一下，我们团队的知乎专栏，目前处于死磕React的状态）当你真正在业务项目中使用React的时候，你会发现它的生命周期比你想象的复杂；它的API背后的逻辑比你以为的麻烦。当然，首先你要踩进这个坑。7.对于楼上某位仁兄表示《React：引领未来的用户界面开发框架》这本书太难的回答，作为译者之一表示对不起你。作为补偿，所有购买本书的同学均可凭拍照私信我咨询React相关的问题。
② 如何设计一个基于Node.js和Express的网站架构
推荐使用Webstorm打开项目。打开项目后，代码结构如下图所示：
在主体结构中从上到下介绍。 app 文件夹包含了所有后端代码； build 文件夹中包含了最新数据库备份； config 包含有网站整体的配置； logs 文件夹包含网站后端记录的日志文件； node_moles 是包含所有的 node.js 依赖包（源代码中初始没有此文件夹，运行 npm install 命令后所有加载的依赖包放置在此文件夹中）； public文件夹包含了所有的前端弊蚂肆代码，包括JavaScript、less、图片、Webfont等； .bowerrc中定义了 bower 管理前端库的下载地址； bower.json 则配置了项目需要的前端库；.jshintre-client 和 .jshintrc-server 分别为前后端JavaScript代码规范检查规则；.travis.yml 为[travis]（travis-ci.org/）自动编译配置； app.js 为node.js启动脚本文件； build.sh 为单独编写的自动发布bash命令；gruntfile.js为 grunt 配置文件；newrelic.js为 newrelic 的配置文件，用于监控网站性能； package.json 包含了所有node.js依赖包配置。
项目后端结构
项目后端代码架构如下图所示：
主要分为两大部分： app 和 config 。 app 里面按照职责不同来分类，每个脚本文件对应于不同的模块； api 文件夹包含了所有api对应的业务逻辑代码， helper 放置一些公用租轿方法，如邮件发送、日志记录、数据库连接等等； templates 放置的是静态邮件模板； views 是后端页面模板，使用了 handlebar 模板引擎，其中 http 中放置系统错误显示页面， layouts 放置模板页； routes 是 express 对应的路由配置，所有的页面和API的路由配置都在这个文件中。 config 文件夹中为系统配置，按照不同环境分为开发和现场两个环境配置， all.js 放置共通配置， development.js 放置开发环境对应配置而 proction.js 放置线上环境配置。配置内容包括邮件发送、数据库连接及一些第三方API所需的key等等。
项目前端结构
项目前端代码结构如下所示：
前端代码全部放置于 public 文件夹下。 data 目录包含一些静态json格式数据，后期可能会考虑放到数据库中。 helper 中是浏览器下载引导页面； images 包含了所有项目中用到的图片，我们尽量使用第三方的图片服务器保存图片，一些小图标也尽量使用webfont。 JavaScripts 文件夹包含所有JavaScript文件，其中 app 子目录放置业务代码，业务物行代码都是按照业务不同封装成了不同的 angularjs controller； debug 子目录放置调试用代码，而 libs 方式前端JavaScript库，项目中使用得JavaScript库有angularjs 、 jQuery 及一些插件； clients.js 是所有ajax请求函数； erealm.js 是angularjs的主模块； language.js 包含了所有多语言配置，目前支持中英文。stylesheets 包含了所有的css样式及webfont，除了第三方库之外，自定义的样式全部使用了 less 。作为一种惯例，项目中添加了 humans.txt 文件，表明项目的作者信息。有关humans.txt，可以参考官方网站 humans.txt 。
自动化构建工具
项目自动化构建使用 grunt 。grunt的使用涉及开发、调试、发布阶段。开发阶段使用了图片压缩和前端代码格式美化，使用的工具是 imagemin 和 jsbeautifier ，运行grunt prepare 命令。调试阶段使用了代码规范检查、less编译、自动添加浏览器前缀、自动加载运行nodejs并打开浏览器、实时监控代码变化并刷新页面等。开发中，使用 grunt 命令即可，为默认grunt命令。发布阶段包含了JavaScript及css合并压缩，并在文件路径上添加哈希值来避免浏览器缓存问题，同时删除开发环境中使用的代码，使用 grunt build 命令即可把代码切换为发布环境。
具体的使用grunt方法及相关工具的介绍，后期会有专门的技术文章讲解，这里不会详细设计技术细节。
后期持续的改进点
项目完成的比较仓促，但是我们尽量保持代码的整洁和可维护性，一些编码方式也借鉴当前流行的最佳实践。但理想是美好的，现实总是不会做到那么完美，需要不断的完善。目前存在的问题是后端代码结构不够清晰、整体代码中无用代码还没有来得及移除。框架上期望把 jQuery 去掉，只使用 Angularjs ，目前只做到了尽量不用jQuery 中的方法。小图标的使用上 Bootstrap 和 Font Awesome 重复，后期会逐步删除 Font Awesome 而只使用 Bootstrap 中带的小图标。目前，最大的问题是项目没有完整的自动化测试，这个后期会逐步添加。
总结
以上是这个开源项目的整体技术结构介绍。在这个项目中，我们会持续使用最流行的Web技术，希望得到大家的持续关注，如果有开发者能一块贡献一些代码，我们将会非常高兴。我们已经在github.io上构建了一个技术平台来发布Web技术文章，网址是blog.erealm.cn。博客网址也同样开源，使用了 Jekyll 构建。 Jekyll 非常强大，最大的特点是使用markdown格式来发布文章。博客的代码在这里： github 。
我们做这个开源的项目的目的有两个，其一是通过这个项目来展示我们做Web项目的实力，及培养团队技术水平。其二是借助这个项目，能和同行们有个技术上的互动和交流。如果我们的项目能让一些新手们学到一些做Web项目的经验，我们就很知足了。技术是不断革新的，而国内Web技术向来是落后于国外好几年，这个是不争的事实。我们erealm团队乐意为国内Web贡献自己的力量，也欢迎国内同行们和我们交流Web开发经验。
③ 做前端需要什么技术
想要成为一个好的前端程序员，需要掌握的技术还是比较多的，比如HTML5开发、JavaScript、Veu.js框架开发等等。
前端就是展现给用户浏览的部分。我们通常说的前端，其实是指前端开发，也就是创建PC端或移动端等前端界面给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。
学习的内容包括：
①计算机基础以及PS基础
②前端开发基础（HTML5开发、JavaScript基础到高级、jQuery网页特效、Bootstrap框架）
③移动开发
④前端高级开发（ECMAScript6、Veu.js框架开发、webpack、前端页面优化、React框架开发、AngularJS 2.0框架开发等）
⑤小程序开发
⑥全栈开发（MySQL数据库、Python编程语言、Django框架等）
⑦就业拓展（网站SEO与前端安全技术）
互联网行业目前还是最热门的行业之一，学习IT技能之后足够优秀是有机会进入腾讯、阿里、网易等互联网大厂高薪就业的，发展前景非常好，普通人也可以学习。
想要系统学习，你可以考察对比一下开设有相关专业的热门学校，好的学校拥有根据当下企业需求自主研发课程的能力，能够在校期间取得大专或本科学历，中博软件学院、南京课工场、南京北大青鸟等开设相关专业的学校都是不错的，建议实地考察对比一下。
祝你学有所成，望采纳。
