Day25 NodeJS中的前端框架 I

在开发网站系统时，使用前端框架可以让资料更容易在介面中被使用、也可以建立模组化的介面，可以更有效的提升开发效率，而目前最常被使用的三大前端框架就是React、Angular与Vue，由这三个前端框架加入mongoDB、Express及NodeJS套件的全端开发套装被称为MERN stack、MEAN stack与MEVN stack，目前常看到的做法是透过MERN stack建立React前端应用程序搭配Express的後端搭配，因此今天的内容以在NodeJS环境建立React前端应用程序为主。

React

React是一个高效率且有弹性的JavaScript函式库，用於使用者介面的开发，藉由灵活的component所组成，透过适当的元件切割，可以更有弹性且有效率的建立复杂的使用者介面。React框架除了透过CDN连结加入HTML页面外，更多时候c会使用NPM建立前端应用程序。

在NodeJS中建立React App

React框架是使用JavaScript ES6的语法进行开发，为了使不支援ES6语法的浏览器也能执行，React的前端应用程序需要透过Babel套件进行编译，并以Webpack套件打包应用程序，而NPM中的create-react-app套件将建立React应用程序所需的套件全数纳入，因此只要安装create-react-app套件就能建立React应用程序的专案。

npm i -g create-react-app
create-react-app reacttest

专案建立完成後，将Terminal导向专案路径下，透过npm start执行，可以在Terminal中看到编译讯息，并会自动於浏览器开启应用程序。

主页面是以.js档案存放在src资料夹中，在开发完成时都需先使用npm run build指令重新编译过後再执行，才会是最完整的内容。

小结

今天说明了React在NodeJS中的起头，其实本来打算这30天好好学完NodeJS後再来接触React，但是课程的内容带到了前端框架并且是用AngularJS做范例，但AngularJS到12月就不再支援，不知道是不是该庆幸自己把课程留到现在才上 总之趁着这个机会转向React，结果就遇到了前端应用程序，还需要一些时间才能把前後端接起来，敬请期待明天...

参考资料

https://www.gushiciku.cn/pl/gCIm/zh-tw

https://reactjs.org

https://ithelp.ithome.com.tw/articles/10214942

https://create-react-app.dev

https://www.simform.com/blog/best-frontend-frameworks/