express框架怎么用react框架作为前端框架?

发布网友发布时间：2022-04-23 05:40

我来回答

共3个回答

懂视网时间：2022-04-10 07:16

　　拿到一个项目，我们应该如何去完成这个项目呢。是直接上手？还是先进行分析，然后再去解决呢？毫无疑问，如果直接上手解决，那么可能会因为知道目标所在，而导致出现各种问题。所以，我们应该系统的分析这个项目，然后再去完成。

第一步：需求

技术分享

　　除了上面的基本需求之外，我们还需要实现登录、注册的相关功能，这样可以保证用户的唯一性，并在后台做出记录。

第二步：确定技术栈

express --- 首先，作为前端使用node就可以取代后端java、php开发的工作，对于这个项目是必须的。作为node的框架，express可以帮助我们减少不必要的代码，从而高效完成工作。

react、react-router、redux --- 作为非常流行的前端框架，组件化的设计思想是本项目的最大优势，可以进行尝试使用。因为本项目需要使用登录、注册，所以要做成web单页面应用，因为需要使用到react-router。另外，对于数据的管理较为复杂，需要使用到redux, 对于redux我们可以查看这篇文章。

webpack打包 --- webpack是当前最流行的打包工具，通过webpack，我们可以实现前端工程化，对代码的管理以及后期的维护都有很大的帮助，但是可能上手不太容易，需要花费时间进行探索。

socket.io --- socket.io是对websock（实现全双工通信的应用层协议）的封装，对于实时的聊天很有帮助。因为聊天需要某个人发送消息给服务器端, 但是其他用户怎么快速得到你的消息呢？这就需要服务器端及时将这个消息推送到其他的用户了，但是其他用户并没有向服务器端发出请求，所以原来采用的就是轮询的方式，通过这种方式可以完成功能，但是会增加客户端和服务器端的负担。这篇文章也介绍了一些使用场景。(注意：有时候，也许我们在请求中看不到websocket协议相关，而是http协议，这也是正常的，因为有可能浏览器后者服务器不支持，就要使用其他方式来实现。)

mongodb --- 因为项目需求中提到刷新页面之后，还需要展示加入过的房间的历史聊天记录，通常在前端可能是可以通过localStorage来实现的，但是使用localStorage是有问题的，对于其他人的推送消息，我们都需要调用localStorage，并且如果你一旦更换浏览器，那么数据就没有办法保存了。但是如果我们使用mongodb作为node来操作的数据库，那么我们就可以在用户进入某个房间的时候，及时将存储在数据库中的数据（所以，每次用户发送的数据，都要根据相应的房间号存储到mongodb数据库中）推送给用户。

ant.design --- ant.design是蚂蚁金服的一个基于react的前端UI框架，可以方便我们使用设计好的、一致性强的UI。

less --- 对于html5，在某些pc浏览器上可能支持的不好，所以目前并没有广泛使用，但是对于less，它使用嵌套语法、变量、minxin等使得css的书写更加清晰、整洁，并且它最终是可以编译为css的，所以鼓励使用less。

es6 --- 同less一样，我们使用es6可以使得语法更简洁，效率更高效，只需要使用babel进行转译即可，所以推荐所有的项目都使用es6甚至是es7的语法来实现。

第三步：技术学习

　　确定了以上技术栈之后，我们就需要学习没有用过的技术了。有人提倡的是边做项目边学习，这种方法是没有错的。但是我认为提前学习是一种比较好的做法，即首先需要对相应技术的基本概念、api等做一个初步的了解，在这个基础上做项目，我们就可以知道应该在遇到问题时使用那些方法来解决，这时再进入边做项目边学习的阶段是比较理想的了。

　　比如上面的技术socket.io、redux、react-router、ant.design都是我之前没有用过的，就需要做一个简单的学习，大概记录一下博客加深印象即可。

第四步：项目架构

　　实际上对于一个项目，最重要的是项目的架构实现，当我们组织好了项目的架构并对webpack打包的部署完成之后，再去写项目的逻辑就会简单的多了，因为我们已经有了整体的思路。如果项目的整体架构考虑不周，那么就有可能造成代码的可读性、可扩展性、可维护性很差，使得项目质量不高。

src文件夹 - 项目的核心代码文件,其中应该区分为客户端和服务器端。

config文件夹 - 项目打包、api等的配置文件。（通过不同文件的分离，使得项目易于管理）

build文件夹 - 与webpack相关的build文件。

static文件夹 - 存放一些css、js、img等静态文件。

package.json - 该文件记录了整个项目的基本信息如入口、名称、仓库、依赖等等。

index.html - REACT技术使用的就是单页应用，所以，这里只需要一个html页面。

...

　以上大概就是本项目的架构了，至于.gitignore、REDEME.md等是一个项目所必须的且不重要，不再赘述。

第五步：开始写代码

　　就是从头开始一步一步完成这个项目，无需多说。

第六步：遇到的难点以及解决思路、方案

　　做项目中难免会遇到一些问题，并且有时候还比较难解决，这时就需要我们及时的记录。一来是可以记录问题、随时着手解决；二来是可以通过记录在以后遇到问题时可以及时的查看记录，不再踩相同的坑或者再去从头寻找、思考解决思路。

使用express、react、webpack打包、socket.io、mongodb、ant.design、less、es6实现聊天室

标签：php sock 有用优势 html org 变量 dex 使用

热心网友时间：2022-04-10 04:24

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，什么ReactCSSTransitionGroupblahblahblah，真正到项目里你会发现还是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相关的问题。

热心网友时间：2022-04-10 05:42

不要设置视图引擎
app.set('views','./views')
app.set('view engine','jade');
//Don't do this

然后你需要引入静态资源
如果你使用webpack，需要把dist里面打包好的文件作为静态资源引入
否则需要把所有的components目录作为静态资源引入
你的React就是简单的静态资源
app.use(express.static(path.join(__dirname,'src')));

最后直接在路由返回文件

app.get('/',function(req,res){
res.sendFile(path.join(__dirname,'index.html'))
})

全部栏目

express框架怎么用react框架作为前端框架?