一个中年男子正在挑战成为前端技术人员

2 年 ago
韵, 科
2 minutes

首先

我是一名中年派遣技术工程师。
由于某种原因，我决定挑战前端技术（React应用程序）。
我的目标是创建一个无论工作地点如何变化都不需要重新搜索网络的系统。
作为备忘录，我将在一直受到帮助的Qiita发布一篇文章。

React应用我个人认为非常好（令我感到非常震惊）。
因为它只使用JavaScript作为编程语言（不包括任何其他语言如HTML和CSS）。
Spring Boot需要学习Java、JavaScript和模板引擎（Thymeleaf），所以很麻烦。
TERASOLUNA更加繁琐。

学习的过程

我发现按照这本书的大纲学习是有好处的。
仅仅只有官方参考资料的话，容易迷失方向（实际上，我也曾迷失过）。
我购买了这本书，重新入门学习。

    React.js&Next.js超入門 第２版

由于入门用的书籍有好几种，所以选择一本适合自己参与的系统的书籍。
后悔没当初就买了这本入门用的书籍。

学习的过程是… de shì…)

    1. 购买适配开发计划中的系统的入门书，并掌握书籍内容。

 

    1. 在阅读React文档的同时进行编码。

 

    1. 在阅读JSX官方文档的同时进行编码。

 

    在阅读NEXT.JS官方文档的同时进行编码。

踌躇不前的地方

    • TypeScriptとJSXを見分けることができない

 

    • JavaScriptとTypeScriptを見分けることができない

 

    • Reactの基本を理解しない状態で、Reactアプリを作り始めた（Reactのja.react.dev/learnのクイックスタートを理解してから、Reactアプリを作ったほうが良い）

 

    • 配列のuseState()に大分時間を取られた

 

    CSSのセンスの無さに絶望した

必须具备的技能

如果你不具备一定程度的HTML/CSS/JavaScript/TypeScript编码技能，学习React应用的基础将会很困难。
稍微绕个弯路，最好先掌握HTML/CSS/JavaScript/TypeScript的基本知识。
以下是制作React应用所需的技能：
– 掌握HTML：用于创建应用的基本结构和布局。
– 掌握CSS：用于美化应用的外观和样式。
– 掌握JavaScript：用于处理应用的交互和动态行为。
– 掌握TypeScript：可选项，用于为应用添加类型安全性和更好的开发体验。

    • Visual Studio Code（略して VSCode）の操作スキル

 

    • HTML

 

    • CSS

 

    • JavaScript

 

    • パッケージマネージャ（npm/yarn）

 

    • TypeScript

 

    • Next.js

 

    React、JSX

前端是什么？

我之前对前端和后端没有太多了解，所以在网络上查了一下它们的区别。
作为一个初学者，首先我不理解这些词的意思。

    • フロントエンドとは、ユーザーから目に見えている機能

 

    • バックエンドとは、ユーザーから目に見えない機能

 

    • 参考URL

フロントエンド開発とバックエンド開発の違いとは？
フロントエンドウェブ開発者

Visual Studio Code（VSCode）

    • インストール

 

    docs
【編集中】拡張機能列表项目 内容

Bootstrap 4，Font awesome 4，Font Awe Bootstrap4代码片段

change-case

Code Spell Checker

code-eol 显示换行符代码

CSS Peek

Draw.io 集成 绘图工具

ESLint

Excel to Markdown table 将Excel剪贴板转换为Markdown表格

Git Graph

Git History

GitLens

Graphviz（dot）language support for Visual Studio Code

HTML CSS Support

indent-rainbow 彩虹般为缩进添加颜色

IntelliSense for CSS class names in HTML 在HTML中的CSS类名的智能感知

Jest

Jest Runner

Json Editor JSON编辑器

JSON to TS 将JSON转换为TypeScript

Live Server

Markdown All in One 将所有必需的Markdown扩展功能汇集成一体

Markdown PDF

markdownlint

Marp for VS Code 使用Markdown格式创建幻灯片

npm Litellisense

Partial Diff 在编辑器中进行字符串比较

Paste JSON as Code

Path Intellisense

PlantUML 用于编写UML图的工具

Prettier – Code formatter 代码格式化程序

Projects+ Todo+

Rainbow CSV 彩虹般显示CSV，并可以进行筛选

Regex Previewer 正则表达式预览器

REST Client REST客户端

Simple React Snippets React代码片段

Sort JSON objects 对JSON对象进行排序

TODO Highlight 高亮显示todo注释

Todo Tree todo注释以树状显示

Todo+

Vim 将按键绑定设为vim样式

vscode-icons

zenkaku

文本校正君

HTML / CSS / JavaScript: HTML / CSS / JavaScript

HTML/CSS/JavaScript等一套学科的教程可以在下面的网址中全面学习。

    • ウェブ入門

 

    • HTML 学習

 

    • CSS 学習エリア

 

    JavaScript

包管理器（npm、yarn）

在构建系统时，需要了解所使用的包管理器的知识。包管理器是一种软件，用于在添加、删除、更新库/框架等时，以良好的方式解决依赖关系。在Web开发中，常常通过复制粘贴命令来使用包管理器。

    • パッケージマネージャとは

npmとは　※詳細は公式のドキュメントを参照

yarnとは　※詳細は公式のドキュメントを参照

TypeScript – 类型脚本

    • tsファイル

純粋なTypeScriptファイル
JSX要素の追加をサポートしない

tsxファイル

JSXを含むTypeScriptファイル

拡張子を使い分ける理由

拡張子でUIコンポーネントとロジックを分ける

回应

React是用于Web和原生用户界面的JavaScript库。
建议阅读完官方文档。

JSX 可以用中文原生地表达为：JSX

JSX是JavaScript语法的扩展，用于简化JavaScript编写。与React一起使用的感觉。

下一个.js

Next.js是一个基于React的前端框架。
我只查看了官方文档的概述部分。

    docs
✖
广告
将在 10 秒后关闭
bannerAds