再见Nuxt，你好React

作为初次职业选择，Nuxt.js

作为工程师，我觉得第一次使用的框架是Nuxt，整体上是很幸运的。
虽然我是毫无经验地被投入到现场，多次遇到困难点，但每次克服这些困难后，我都能感受到作为工程师的综合基础能力得到了培养。
我认识的从早稻田大学文理系转行成为工程师的朋友们，他们使用的是Angular.js和Java等技术，这些技术正在失去动力，并且抱怨说他们希望能够使用更具有未来发展潜力的技术。他们在追赶过程中也遇到了困难。
Nuxt被认为是时下流行的技术之一且“学习成本低”（=“easy to start”），作为第一次使用的技术，我觉得很幸运。

通过Nuxt.js的学习经历所获得的知识

现代Web的共同点

通过Nuxt，我能够在实际开发中学习到现代Web的重要主题，包括“基于组件的开发”、“单向数据流”、“单页应用（SPA）”、“服务器端渲染（SSR）”、“基于虚拟DOM的高性能”、“与Firestore结合的无服务器开发”、“引入Typescript”等等。

ES6是一种JavaScript编程语言的最新版本。

在Nuxt中，需要写基于ES6及其之后版本中新增的JavaScript新语法的代码。
const、let、async await、箭头函数、类等ES6的语法已经成为了宝贵的财富，从而在编码过程中能够吸收并掌握它们。

CSS（层叠样式表）

在Nuxt的特性中，有一个很容易被忽视的优点是“编写CSS很容易”。幸运的是，我们的工作场所有一个设计师兼前端工程师，他教给我们如何实践地编写CSS和Scss，以及如何进行CSS设计（例如BEM或FLOCSS），以及语义化Web的知识。通过克服对CSS的抵触感，我们反而能够增强自信，这是一个重要的优势。

再见，Nuxt。

然而，我渐渐开始感到作为一名工程师的成长面临着巨大的障碍。虽然我终于有机会负责产品组件和页面的实现，但我一直无法摆脱”没有完全理解原理和规则就无法编写代码”的感觉。

特别是在实现数据流和模型时，这一点变得更加明显。老实说，这些部分的代码阅读也受到了影响。

虽然我在某种程度上掌握了Nuxt的独特表达方式，但由于作为工程师的基础不够扎实，参与开发的状态变得扭曲了。我感到非常羞愧。

就我个人来说，Nuxt确实是“容易入门”，但我觉得它并没有更多的优点。

你好React。

在这个时候，吸引我注意的是这篇文章（“选择React还是Vue”）。这篇文章仿佛把我当时的焦虑感化为语言。但是我并不是一下子就选择了React，“就连Nuxt都不完善，何况据说学习成本很高的React，似乎根本做不到”的想法让我失去了尝试的勇气。

有一天，我接到了一些简单的LP制作请求，我选择使用了Gatsby.js的Starter之一进行尝试。在这个过程中，我学习了React和GraphQL，并感受到了“在充分理解的基础上编写代码”的愉悦感。尽管React和GraphQL被认为学习成本较高，但我并没有这样的印象。首先，相关资料系统且丰富，可以逐步仔细地理解。此外，与Nuxt这样具有多种独特语法的框架相比，React更接近纯粹的JavaScript，如果掌握了JS的基础知识，反而更容易理解。

同時에，我对GraphQL深感动。

在Nuxt中，当外部的库或组件等混杂进来时，追踪虚拟DOM的数据结构非常困难。只能依赖”凭直觉猜测并通过浏览器的验证工具和console.log不断尝试和调试”这种方法，时间也被无限消耗。而GraphQL可以让我们一次学习就能清楚地理解数据结构。还提供了一个称为GraphQL playground的易于使用的工具，可以进行调试，而不必再依赖直觉和console.log。

使用Redux进行数据流控制，我只是尝试了一下官方教程的三连棋游戏，但个人感觉比Vuex更适合。

“simple”和“easy”的区别

我认为React和Nuxt的区别可以简单地归为“简单”和“易用”。
“简单”和“易用”是相似但不同的概念，React并不“易用”但却“简单”。

我将引用名著《React开发养成计划：TypeScript轻松入门 第2版》。

「简单」和「容易」是两个在日本语中常常被混淆使用的概念，它们非常相似但又不同。在现实场景中，往往存在着两者难以并存的情况。与React经常被比较的Vue可以被称为一个「容易」的框架，它考虑到了初学者的需求，降低了门槛，并且设计了一种逐步增加复杂性的方式。然而，这也意味着不同的方法可以被接受，没有唯一正确的解决方法，缺乏原理的一致性。另一方面，React是一个「简单」的库。它始终保持了组件化、声明式的视图构建和单向数据流等原理，为了遵守这些原理，通常需要编写更多的代码。但是，使用React正确开发的应用程序即使是非常复杂的系统，也具有良好的可读性、易于测试和调试，以及高度的可维护性和可扩展性。

根据那个人的个性和他作为工程师的目标不同，我对React的态度有好感。

（本篇文章并没有批评Nuxt的意图。相反地，我非常感激它。如果我在没有工程师经验的情况下突然接触React，可能会在更低的层面上经历挫折。之所以能够走到这一步，都要归功于Nuxt。）

为了掌握React，我做了什么努力

计划的是要在学习记录中也写上关于学习React的内容，但是篇幅过长，所以我打算将文章拆分。

通知

如果有公司正在招聘React工程师，请务必联系我！我希望在经验丰富的高级React工程师的指导下，提升自己的能力。虽然技术是首要考虑的条件，但我希望能与匹配平台或媒体相关的行业进行合作。

文献引用

选择React还是Vue？
将React开发效率提高3倍的VS Code扩展功能和环境设置
从学习、寻找项目、面试到合同的React初项目获取过程

以下是对以上文本的中文本地化释义：

– 全面的React开发者课程（包括Hooks和Redux）
– 使用Next.js的通用React – 终极指南
– React Native入门：在制作新闻应用的过程中学习/Hooks支持2020年版本
– React.js和Next.js超入门
– 实践Firestore
– 初学者的JavaScript第3版 – ES2015以后的最新Web开发技术