「一边大喊“一无所知”，一边艰苦地进行投资组合开发的记录① 〜环境搭建篇〜」

1 年 ago
雅, 悟
1 minute

目标

    • 転職

 

    • フロントエンドの開発に集中して生きたい

 

    • 編集した箇所が目に見えて変わっていくの楽しい！

 

    • 現職ではいろいろと叶わないので没頭できるところに転職しよう！

 

    • とはいえ初心者に二年分の毛が生えた程度なので手を動かそう

 

    いつかの誰かを救うかもしれないので悪戦苦闘した過程の記録を残しておこう

开发环境

    • Windows11

 

    • WSL2(Ubuntu)

 

    VScode

政策

    1. 使用VScode搭建React的开发环境

工具选择标准

熟悉使用
也是主流开发环境

在本地运行
在GitHub的公共存储库中进行上传

为了能在求职网站上公开作品
尝试使用GitHub来展示一些非具体技术知识
※由于目前工作主要使用Subversion进行版本管理，所以也顺便学习一下主流的Git方法

项目

    1. 准备Git

 

    1. 准备开发环境

 

    1. React官方教程

https://ja.legacy.reactjs.org/tutorial/tutorial.html
因为知识掌握不够全面，需从基础开始学习

进行自我开发以用于个人作品集

在这篇文章中提到的事物

工程之一和二

执行内容

    1. 搭建Git环境

安装Git

因为在GitHub上管理需要

为了Git管理，安装GUI工具

虽然CUI也可以，但可视化更方便

GitKraken和Sourcetree进行比较，选择使用GitKraken

因为是新项目，所以先试试用起来方便的工具

https://www.gitkraken.com/ 从“Download GitKraken Client Free”下载

运行exe文件后登录（已创建GitHub账户，可使用）

登录后启动GitKraken，输入用户名和电子邮件输入框中显示的任意信息

安装完成

在GitHub上创建仓库

暂时为了React教程

设置为公开以便确认审查

在本地克隆仓库

与前一步的仓库进行操作的本地联接

创建分支

没有master分支

不知道怎么办了，所以在GitKraken上重新创建远程仓库

在GitHub上删除已创建的远程仓库

重新创建仓库

在GitKraken上创建仓库→在GitHub上创建

秒速创建。master分支也存在

推测是因为不习惯在浏览器和GUI中混用导致失败

创建分支

因为已经有了master，所以创建工作分支

尝试更新

更新“README.md”的内容

从GitKraken上进行同步

在GitHub上进行拉取请求审查（由于是单人操作，所以自我审查）

合并到master

在GitKraken上拉取（更新）master分支

尝试添加和删除

提交后，忘记创建拉取请求而陷入困境

配置VScode

安装各种扩展功能

参考：React开发提升3倍的VS Code扩展功能和环境设置

在虚拟环境中进行开发准备

后悔没有买Mac了

参考(WLS2 + Ubuntu + VSCode)进行开发环境搭建

从Microsoft Store获取Ubuntu 20.04.6 LTS

创建用户

安装NVM
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

安装最新的Node.js（稳定版）
$ nvm install –lts

安装npm
$ sudo apt-get update

安装React
$ sudo npm -g install create-react-app

尝试创建项目

创建项目
$ create-react-app sunaba001

进入项目并启动
$ cd sunaba001
$ nmp start

在中国进行参考

React相关

    • React初案件獲得までの流れ(学習・案件探し・面接・契約まで)

 

    • React 公式チュートリアル

 

    りあクト！ TypeScriptで始めるつらくないReact開発 第4版【① 言語・環境編】

关于Git的相关内容

    • 【GitHub超初心者入門】この前初めてGitHubを使い始めたエンジニア見習いが書くGitHubの使い方と実践～とりあえず一緒に動かしてみようぜ！～

 

    • 【超入門】初心者のためのGitとGitHubの使い方

 

    • 『GitKraken』と『Sourcetree』を比較してみた

 

    • 2021年 Git GUI「GitKraken」の導入と少しの使い方[令和最新版]

 

    GitKrakenの日本語化（v6.4.1）

环境配置相关

    • node.jsとnpmとnvmwをインストールしよう。node.jsの環境を用意する（Windows編）

 

    • nvmを使ってNode.jsをインストールする

 

    • Ubuntuにreactをインストールして動作確認する

 

    create-react-appコマンドを利用して、reactをインストールする方法
✖
广告
将在 10 秒后关闭
bannerAds