如何从头开始进入Windows上的Create-React-App

关于在Windows 10上设置Web开发环境的实用指南 (An opinionated guide on setting up a web development environment on Windows 10)

I have been a professional web developer since march 2018 and used both MacOs and Windows in that time. My preferred OS to use is Windows, for no other reason than I prefer the keyboard layout.

自2018年3月以来，我一直是专业的Web开发人员，并在那时同时使用了MacO和Windows。 我最喜欢使用的操作系统是Windows，除了我更喜欢键盘布局之外，没有其他原因。

With Windows/Linux I like to have my Ctrl key as the key to use for copy-paste operations and I can use my left pinky instead of my thumb. Anyway, let’s leave the weak reasoning behind as that’s not the purpose of this post!

在Windows / Linux中，我希望将Ctrl键用作复制粘贴操作的键，并且可以使用左小指代替拇指。 无论如何，让我们抛弃虚弱的推理，因为这不是本文的目的！

If you don’t have a Windows machine then this post probably isn’t for you, if this is different from what you use, it doesn’t make it bad.

如果您没有Windows机器，则此职位可能不适合您，如果此内容与您使用的内容不同，则也不会很糟糕。

Let’s see what Ken has to say about it:

让我们看看Ken对此有何评论：

This is the refresh on my guide from the start of the year on setting up a web development environment on a Windows machine.

从今年年初开始，这是我的指南中的更新，内容涉及在Windows机器上设置Web开发环境。

This guide will cover installing Ubuntu but you can use some of the other flavours of Linux available in the Windows store, the Debian setup will be very similar to the Ubuntu one.

本指南将介绍如何安装Ubuntu，但是您可以使用Windows商店中提供的其他一些Linux版本，Debian的设置与Ubuntu非常相似。

这篇文章的目的 (Objective of this post)

To go from a fresh instance of Windows 10 to something you can develop web apps with.

要从Windows 10的新实例过渡到可以用来开发Web应用程序的东西。

These instructions are for the Windows 10 Fall Creators Update and later.

这些说明适用于Windows 10 Fall Creators Update和更高版本。

What we’re going to cover:

我们将介绍的内容：

• Install WSL
  安装WSL
• Enable WSL on your machine
  在机器上启用WSL
• update, upgrade and autoremove
  更新，升级和自动删除

• Install Node (with n)

  安装节点(带有n )

• Install Visual Studio Code
  安装Visual Studio代码
• Install Windows Git
  安装Windows Git
• Install a Terminal (Hyper)
  安装终端(超级)
• Install Fish Shell!
  安装鱼壳！
• Install Oh My Fish
  安装哦，我的鱼
• Fish themes with OMF
  用OMF钓鱼主题
• Configure
  配置
• Git config
  Git配置
• Create React App
  创建React应用
• Use SSH with GitHub
  在GitHub上使用SSH
• WSL SSH Config
  WSL SSH配置
• Windows Git Bash SSH Config
  Windows Git Bash SSH配置
• Change WSL version
  更改WSL版本
• Wrap up!
  结语！

安装WSL (Install WSL)

You can install Ubuntu from the Microsoft store which will be the first half of the install the second will be when you open the app.

您可以从Microsoft商店安装Ubuntu，这将是安装的上半部分，第二个是在打开应用程序时的安装。

在机器上启用WSL (Enable WSL on your machine)

The official guidance covers it very well, but I’m going to add in the shortcut keys here if you don’t want to be clicking around with the mouse.

官方指南对此进行了很好的介绍，但是如果您不想用鼠标单击，我将在此处添加快捷键。

Before that however, if you haven’t selected PowerShell as your default Command Prompt you can select it from the Taskbar settings page located in the Personalisation section in the Settings, I suggest doing that now:

但是，在此之前，如果尚未选择PowerShell作为默认的命令提示符，则可以从“设置”中“个性化”部分的“任务栏设置”页面中选择它，建议立即执行以下操作：

Whilst we’re at it we should also enable hidden folders and add files extensions for known file types in Windows File Explorer.

在进行此操作的同时，我们还应该启用隐藏文件夹并在Windows File Explorer中为已知文件类型添加文件扩展名。

Open the Windows File Explorer with Windows key+e then select View from the ribbon. Then click the Options button on the far right, this will bring up the Folder Options dialog, from here we want to select the View tab and select the Radio button for Hidden files and folders with the ‘Show hidden files, folders and drives’, uncheck the option for ‘Hide extensions for known file types’ too. Click apply and Ok.

使用Windows键+ e打开Windows File Explorer，然后从功能区中选择View。 然后点击最右边的“选项”按钮，这将弹出“文件夹选项”对话框，在这里我们要选择“查看”选项卡，并选择“显示隐藏的文件，文件夹和驱动器”的隐藏文件和文件夹的单选按钮，还要取消选中“隐藏已知文件类型的扩展名”选项。 单击应用，然后单击确定。

The reason we’re doing this is so that we can see the .git folder in project structures it's also needed for files like .env files which are used for environment configuration.

我们这样做的原因是，我们可以在项目结构中看到.git文件夹，用于环境配置的.env文件等文件也需要它。

Use Windows key+x, this is the same as right-clicking the windows icon on the desktop, this will open the quick link menu. From here you need to select the Windows PowerShell (Admin) option, you can do this by pressing a on the keyboard. So Windows key+x then a, will open the user account control (Admin) prompt, presuming you have admin rights on your machine you’ll need to click yes to continue.

使用Windows键+ x，这与右键单击桌面上的Windows图标相同，这将打开快速链接菜单。 在这里，您需要选择Windows PowerShell(Admin)选项，可以通过按键盘上的a来执行此操作。 因此，Windows key + x然后a，将打开用户帐户控制(Admin)提示，假设您对计算机具有管理员权限，则需要单击yes继续。

Copy the code here and paste it into the PowerShell window, Ctrl+v will work in PowerShell, press enter to execute the command.

将代码复制到此处，并将其粘贴到PowerShell窗口中，Ctrl + v将在PowerShell中运行，按Enter键执行命令。

Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux

You will be prompted to restart your machine after this, which you should do.

之后，系统将提示您重新启动计算机，您应该这样做。

Check the link for a complete list of windows keyboard shortcuts.

检查链接以获取Windows键盘快捷键的完整列表。

After restarting you can open the Ubuntu program from the start menu and the second install (of WSL on your system) should happen. Wait for this to complete then you will be prompted to create a user and a password for the account. You will need to remember the password created for the user as you will be prompted for it to use sudo privileges.

重新启动后，您可以从开始菜单中打开Ubuntu程序，并且应该进行第二次安装(系统上WSL的安装)。 等待此操作完成，然后系统将提示您为该帐户创建用户和密码。 您将需要记住为用户创建的密码，因为系统会提示您使用sudo特权。

更新，升级和自动删除 (update, upgrade and autoremove)

At the time of writing this, the version I have linked of Ubuntu is 18.04.1

在撰写本文时，我链接的Ubuntu版本是18.04.1

The linked app will install the latest stable Ubuntu release on Windows.

链接的应用程序将在Windows上安装最新的稳定Ubuntu版本。

You can check what version of Ubuntu you have installed with:

您可以检查已安装的Ubuntu版本：

lsb_release -a

If you want to use a specific LTS version of Ubuntu you can get them from the Windows Store, here:

如果要使用特定版本的Ubuntu的LTS，可以从Windows应用商店获取它们，这里：

• Ubuntu 16.04 LTS

  Ubuntu 16.04 LTS

• Ubuntu 18.04 LTS

  Ubuntu 18.04 LTS

Now we’re going to go ahead an update and upgrade all the things, the three commands here will update and upgrade all the pre-installed software that comes with the Ubuntu install.

现在，我们将继续进行更新和升级，此处的三个命令将更新和升级Ubuntu安装随附的所有预安装软件。

The code below is three commands joined together with &&. The -y flag is to auto accept the changes that are going to be performed with the upgrades. Auto remove will remove unused packages left behind from upgrades.

下面的代码是与&&结合在一起的三个命令。 -y标志用于自动接受将在升级中执行的更改。 自动删除将删除升级后遗留的未使用的软件包。

Copy the below commands into your Ubuntu terminal, and run the command:

将以下命令复制到您的Ubuntu终端中，然后运行命令：

sudo apt update && sudo apt -y upgrade && sudo apt autoremove

To go from 16.04 to 18.04 try do-release-upgrade in the terminal. be warned this takes considerably longer than just deleting the current install of Ubuntu and starting again.

要从16.04 do-release-upgrade到18.04，请在终端中尝试do-release-upgrade 。 请注意，这比删除当前的Ubuntu安装并重新启动要花费更长的时间。

Now that the base has been installed and updated we need to install the build-essential package in order to compile and build other packages, the following packages we’re going to install will all need it.

现在已经安装并更新了基础，我们需要安装build-essential软件包才能编译和构建其他软件包，我们将要安装的以下软件包都将需要它。

sudo apt install -y build-essential

From here on in I’d suggest using two bash windows, one with sudo enabled the other with standard permissions.

从这里开始，我建议使用两个bash窗口，一个启用sudo，另一个具有标准权限。

i.e. open a terminal and don’t enter sudo in there, instead use the terminal that has been granted that permission.

即打开一个终端，不要在其中输入sudo ，而是使用已被授予该权限的终端。

The reason for this is that I have found if you install node as sudo then each time you want to run an npm install command you will need to grant sudo permissions and it can all get a bit tedious. And you really shouldn't be installing npm packages with sudo permissions.

这样做的原因是，我发现如果将节点安装为sudo，则每次您要运行npm install命令时，都需要授予sudo权限，并且所有操作都会有些繁琐。 而且，您实际上不应该安装具有sudo权限的npm软件包。

安装节点(带有n ) (Install Node (with n))

Let’s get our run-time on! If you use Node.js you will eventually have situations where you need to be able to switch Node versions, for this you may have heard to nvm (Node Version Manager) which by the way you can still use in WSL.

让我们开始运行吧！ 如果您使用Node.js，最终将遇到需要切换Node版本的情况，为此，您可能听说过nvm( Node Version Manager )，但仍然可以在WSL中使用。

The reason for me opting for n over nvm is that in the past I experienced slow bash startup times whilst using nvm. Take a look at this WSL GitHub issue detailing it and the specific comment for the pros of using n.

之所以选择n而不是nvm，是因为过去使用nvm时，bash启动时间很慢。 请查看此WSL GitHub问题，详细介绍它，并为使用n的专业人员提供具体注释。

Ok let’s install n, with n-install, the command doesn’t start with sudo so use it in the bash window you have with no sudo privileges.?

好吧，让我们用n-install来安装n，该命令不是以sudo开头的，所以请在没有sudo特权的bash窗口中使用它。

curl -L https://git.io/n-install | bash

This will install the latest version of Node for us, follow the prompt on the terminal screen to reload bash:

这将为我们安装最新版本的Node，按照终端屏幕上的提示重新加载bash：

# mine looks like this. /home/scott/.bashrc

Now check the versions of Node and npm we have installed with node -v && npm -v in the terminal.

现在检查终端中安装了node -v && npm -v的Node和npm的版本。

安装Visual Studio代码 (Install Visual Studio Code)

Install VSCode? What? This post is to set up WSL? Ok, so we’re going to presume that this is going from nothing to being able to web dev, so we’re going to need a text editor, and there’s nothing out there at the moment that comes close to VSCode, if you already have a text editor installed then skip to the next part.

安装VSCode？ 什么？ 这个帖子是要建立WSL的？ 好的，所以我们假设这是从无到有，可以进行Web开发，因此我们将需要一个文本编辑器，并且如果您已经有VSCode，那么现在没有什么比这更合适了。安装了文本编辑器，然后跳到下一部分。

Install the Windows version of VSCode from the Download section once installed we can enable WSL in the settings, the quickest way to do this is to open the integrated terminal in VSCode with the shortcut keys Ctrl+’ ? that’s and apostrophe. You will be prompted to select your default terminal, select WSL Bash.

从“ 下载”部分安装Windows版本的VSCode一旦安装，我们就可以在设置中启用WSL，最快的方法是使用快捷键Ctrl +'打开VSCode中的集成终端。 那是撇号。 系统将提示您选择默认终端，然后选择WSL Bash。

安装Windows Git (Install Windows Git)

There’s a bit of stumbling block getting Git support for VSCode, it’s well documented in the various issues mentioned in the linked issue.

Git对VSCode的支持有些绊脚石，在链接的问题中提到的各种问题中都有很好的记录。

There are workarounds as well with things like WSLGit which has its own set of issues, this all stems from users (me included) not wanting to have to install another binary for Git.

诸如WSLGit之类的东西也有变通办法，它有其自身的一系列问题，这全都源于用户(包括我在内)不想为Git安装另一个二进制文件。

I have tried several variants when it comes to using Git with VSCode and the path of least resistance was biting the bullet and installing that additional binary, there’s an overhead with having to maintain and configure SSH keys for both Windows and WSL Git but it’s a one time setup.

在将Git与VSCode结合使用时，我已经尝试了几种变体，并且阻力最小的方法是硬着头皮安装该额外的二进制文件，必须为Windows和WSL Git维护和配置SSH密钥会产生开销，但这是一个时间设置。

Until the VSCode team incorporate WSLGit into VSCode I think this is the best option.

在VSCode团队将WSLGit纳入VSCode之前，我认为这是最好的选择。

Install from git-scm.com the link will start downloading the install binary you can then open it and go through the install, you can keep clicking next through the install, I have selected a few options that I would like enabled.

从git-scm.com安装，链接将开始下载安装二进制文件，然后您可以打开它并进行安装，可以继续单击下一步以进行安装，我选择了一些我希望启用的选项。

For now, that is all we need to do, when it comes to authenticating with with GitHub using SSH we will use the Git Bash command line to configure the Windows side of things.

现在，这就是我们需要做的，当涉及到使用SSH与GitHub进行身份验证时，我们将使用Git Bash命令行来配置Windows方面的内容。

安装终端(超级) (Install a Terminal (Hyper))

Now we have bash on Windows it’s time to install a nice Terminal app, because, let’s face it, the standard one is a bit basic.

现在我们已经在Windows上狂奔了，是时候安装一个不错的Terminal应用程序了，因为，让我们面对现实，标准的应用程序有点基础。

Enter Hyper an electron based terminal app that is super themeable and configurable.

输入Hyper超级主题化和可配置的基于电子的终端应用程序。

Download and install hyper for Windows, this will be the bare-bones version, it’ll look something like this:

下载并安装适用于Windows的hyper，这将是简朴的版本，看起来像这样：

You may notice that, this is the Windows Command prompt too — don’t worry, we’re going to configure that right now.

您可能会注意到，这也是Windows Command提示符-不用担心，我们现在将对其进行配置。

Open up the .hyper.js file located in the root of your user folder, or from Hyper itself use the shortcut key Ctrl+, to pop open the settings.

打开位于用户文件夹根目录中的.hyper.js文件，或者从Hyper本身使用快捷键Ctrl +打开窗口。

If the settings file (.hyper.js) opens in Notepad then you can set the default to be VSCode. In File Explorer (Use Windows key+e to open it) navigate to the file, it'll be in your User folder, right-click the file and select Properties, then Change for 'Opens with:' and select VSCode from the list.

如果在记事本中打开设置文件( .hyper.js )，则可以将默认文件设置为VSCode。 在“文件资源管理器”(使用Windows键+ e打开文件)中，导航至该文件，该文件位于您的“用户”文件夹中，右键单击该文件并选择“属性”，然后选择“打开方式为：”，然后从列表中选择VSCode。 。

Now we can set WSL as the shell path in Hyper, open the .hyper.jssettings file and search (Ctrl+f) for bash, we want to add the path to the WSL shell into the shell property defined in the file.

现在，我们可以将WSL设置为Hyper中的shell路径，打开.hyper.js设置文件并搜索(Ctrl + f)bash，我们想将WSL shell的路径添加到文件中定义的shell属性中。

// amend shell path// WSL Bashshell: 'C:\\Windows\\System32\\bash.exe',

We can also change the appearance of Hyper from here by specifying font size and font family and also predefined themes, let’s quickly add in the hyper-adventure-time theme into the plugins section.

我们还可以通过指定字体大小和字体系列以及预定义的主题从此处更改Hyper的外观，让我们快速将hyper-adventure-time主题添加到plugins部分中。

Open another Hyper tab with Ctrl+Shift+t, this will show the bash terminal for WSL now.

使用Ctrl + Shift + t打开另一个“超级”标签，这将立即显示WSL的bash终端。

Quick orientation with the Hyper terminal keyboard shortcuts:

Hyper终端键盘快捷键的快速定位：

• New tab = Ctrl+Shift+t
  新标签页= Ctrl + Shift + t
• Close current tab = Ctrl+Shift+w
  关闭当前标签页= Ctrl + Shift + w
• Cycle through tabs right = Ctrl+Shift+right arrow
  向右循环浏览选项卡= Ctrl + Shift +向右箭头
• Cycle through tabs left = Ctrl+Shift+left arrow
  在选项卡上向左循环= Ctrl + Shift +向左箭头

Now I’m going to configure some additional properties for Hyper, and change the theme to something a bit more subtle.

现在，我将为Hyper配置一些其他属性，并将主题更改为更微妙的内容。

I purchased Dank Mono, if you want a similar font as OSS check out FiraCode.

我购买了Dank Mono，如果您想要与OSS类似的字体，请查看FiraCode 。

Here’s what I changed:

这是我更改的内容：

module.exports = {  config: {    fontSize: 18,    fontFamily: '"Dank Mono",...',    cursorShape: 'BEAM',    cursorBlink: true,    copyOnSelect: true,    plugins: ['hyper-altair']  }}

安装鱼壳！ (Install Fish Shell!)

Ok, time to install the Fish Shell! This is a completely optional step, I like to use fish for the nice intellisense you get when navigating file structures, there are also some neat themes you can get with Oh My Fish

好的，该安装鱼壳了！ 这是一个完全可选的步骤，我喜欢使用fish来导航文件结构时获得很好的智能感知，Oh My Fish还可以提供一些简洁的主题

sudo apt -y install fish

安装哦，我的鱼 (Install Oh My Fish)

Now we can install Oh My Fish (OMF) and get a nice terminal theme going on too, remember we talked about running commands with the correct permissions? Well this is one of those occasions, open a new tab first then paste in the following:

现在，我们可以安装Oh My Fish(OMF)并获得不错的终端主题，还记得我们讨论过以正确的权限运行命令吗？ 嗯，这是其中一种情况，请先打开一个新标签，然后粘贴以下内容：

curl -L https://get.oh-my.fish | fish

用OMF钓鱼主题 (Fish themes with OMF)

After installing OMF you can pick a theme, here you may notice that the text doesn’t fit in the screen on Hyper, a quick way to reset it is to maximise the window then back again, I did this with the Windows key+arrow up to maximise the Windows key+arrow down to restore it.

安装OMF之后，您可以选择一个主题，在这里您可能会注意到文本不适合在Hyper屏幕上显示，重置它的快速方法是最大化窗口，然后再次返回，我使用Windows键+箭头来完成此操作向上以最大化Windows键+向下箭头以还原它。

After installing omf I chose the theme agnoster, installed with omf install agnoster you can list out what is available and what you have already installed by selecting omf theme let's change it once more to the one theme, adjust the size of the window first as things are getting a bit cramped.

安装omf后，我选择了主题无神论者，并与omf install agnoster一起omf install agnoster您可以通过选择omf theme列出可用的内容和已安装的omf theme让我们再次将其更改为one主题，然后首先调整窗口的大小变得有点局促。

Have a play around there’s loads there, I prefer the one theme because you can see what version of node you’re running on, over on the far right. Here you can also see the intellisense for fish where it shows agnoster as a previous selection, if I wanted to select agnoster I could tab to complete the rest of the command.

在这里有很多负载，我更喜欢一个主题，因为您可以在最右边看到正在运行的节点的版本。 在这里，您还可以看到鱼的智能感知，它在以前的选择中显示了agnoster，如果我想选择agnoster，则可以使用制表符完成其余命令。

配置 (Configure)

So, now we have a swanky looking new terminal and a bare-bones VSCode install it’s time to get things moving.

因此，现在我们有了一个外观时髦的新终端，并安装了简陋的VSCode，现在该让事情前进了。

I have a cheat-sheets repo detailing a lot of the configuration we’re about to go through here, if you find something useful along the way please drop a PR with the suggestion.

我有一个备忘单仓库，详细介绍了我们将在此处进行的许多配置，如果您在此过程中发现有用的信息，请删除建议的PR。

First up, in place of typing out fish each time I open a new terminal, and not replacing bash which you can do, but I prefer to use an alias. So what we're going to do is open up the .bashrc file and edit it.

首先，代替每次我打开新终端时都键入fish ，而不是替换bash(您可以这样做)，但是我更喜欢使用别名。 因此，我们要做的是打开.bashrc文件并对其进行编辑。

From a new terminal type in nano ~/.bashrc, nano is a bash text editor. Scroll (or Page) down to the bottom of the file and add in an alias for fish, alias f=fish then to exit nano Ctrl+x and confirm changes with a y. Reload the .bashrc file like we did after using n to install Node . /home/scott/.bashrc but your username in place of mine ?, now we can use f instead of fish! Well done you saved yourself typing three extra characters!!!

从nano ~/.bashrc的新终端类型开始，nano是bash文本编辑器。 向下滚动(或Page)到文件底部，并为fish添加一个别名， alias f=fish然后退出nano Ctrl + x并用y确认更改。 重新加载.bashrc文件，就像使用n安装Node之后一样. /home/scott/.bashrc . /home/scott/.bashrc但是您的用户名代替了我的？，现在我们可以使用f代替fish了！ 做得好，您节省了自己输入三个额外字符的时间！！！

Git配置 (Git config)

Before we crack on with spinning up a Create React App instance we’re going to need to configure Git, via the .gitconfig file.

在继续创建Create React App实例之前，我们需要通过.gitconfig文件配置Git。

We’re going to use nano to add some settings for Git, both in WSL and Windows, this is the extra config I mentioned earlier, apologies!

我们将在WSL和Windows中使用nano来为Git添加一些设置，这是我前面提到的额外配置，很抱歉！

First up we’ll config our bash environment and then move onto Git bash on Windows.

首先，我们将配置bash环境，然后在Windows上移至Git bash。

# open up the .gitconfig file in WSL bash# nano will create one if it doesn't existnano ~/.gitconfig

It’s nearly identical config for both environments apart from Windows uses the credential manager helper and WSL will need the cache helper.

除了Windows使用凭据manager帮助程序外，这两种环境的配置几乎相同，而WSL需要cache帮助程序。

# needed in Git Bash for Windows[credential]  helper = manager# needed in WSL[credential]  helper = cache[color]  ui = true

[user]  name = yourGitHubUserName  email = yourGitHub@email.com

[core]  editor = code --wait

Make your changes then Ctrl+x to exit and confirm with y, that’s the first part of the Git config done.

进行更改，然后按Ctrl + x退出并使用y进行确认，这是完成Git配置的第一部分。

In Git Bash for Windows do the same in the terminal, use nano to create a .gitconfig file and add the setting to it.

在Windows的Git Bash中，在终端中执行相同的操作，使用nano创建一个.gitconfig文件并将其添加到其中。

创建React应用 (Create React App)

Ok, we shall get create react app going so we can get Git configured with GitHub using SSH and start making changes to commit to a GitHub repo.

好的，我们将继续创建create react应用，以便我们可以使用SSH为GitHub配置Git，并开始进行更改以提交到GitHub存储库。

We’re going to use npx to make a starter React project with Create React App. If you want to have your projects somewhere else now is the time to navigate to that directory.

我们将使用npx通过Create React App创建一个入门的React项目。 如果您现在想将项目放在其他位置，那么该时候可以导航到该目录了。

From the terminal enter:

从终端输入：

# this will create a starter react project# called create-react-appnpx create-react-app create-react-app

This is creating the project in my home (~) folder, I've had to speed the gif up to 20x faster, it does take a while.?

这是在我的home( ~ )文件夹中创建项目，我不得不将gif的速度提高了20倍，这确实需要一段时间。

Wheeeeeeeeeeeeeeeeeeeee!

Wheeeeeeeeeeeeeeeeeeeeeee！

So, now that we have spun up a React app to work on we should make a change and then add it to GitHub.

因此，既然我们已经启动了一个React应用来进行工作，我们应该进行更改，然后将其添加到GitHub。

Navigate to the create-react-app folder in the terminal and open the project. You can open VSCode with the code . command, the . denotes the current folder in the terminal.

导航至终端中的create-react-app文件夹，然后打开项目。 您可以使用code .打开VSCode code . 命令， . 表示终端中的当前文件夹。

This will open VSCode at the root of the create-react-app project, make sure everything is working as expected by running the start script in npm.

这将在create-react-app项目的根目录下打开VSCode，并通过在npm中运行启动脚本来确保一切正常。

npm run start

If you want to see what scripts are available in the current project you can also use npm run which will list defined npm commands from the package.json file.

如果要查看当前项目中可用的脚本，也可以使用npm run ，它将列出package.json文件中定义的npm命令。

A window will open displaying the basic Create React App landing page, we’re going to add a h1 to the App.js module then commit it, via the Source Control menu in VSCode.

将打开一个窗口，显示基本的Create React App登录页面，我们将通过VSCode中的Source Control菜单将h1添加到App.js模块中，然后提交它。

Please bear in mind this is an up and running guide for a development environment, I’m not going to be detailing developing in React

请记住，这是开发环境的最新指南，我不会在React中详细介绍开发

Whilst the terminal is busy starting up the create-react-page we can open another tab in Hyper with Ctrl+Shift+t and open up VSCode with the code . command, navigate to the App.js component and add a <h1>tag to it just above the <img&gt; tag with <h1>;Hello React!</h1> in it.

当终端忙于启动create-react-page时，我们可以使用Ctrl + Shift + t在Hyper中打开另一个选项卡，并使用code .打开VSCode code . 命令，导航到App.js组件，并e the <img＆g t; tag with <h1>添加< h1>标签t; tag with <h1> t; tag with <h1> ; Hello React！</ h1>。

Now the landing page should show the newly added h1, we can confirm that the file is changed in Git by doing a git status from the terminal. Then we can commit it from either the terminal or the IDE (VSCode) my preference is to use VSCode as the visual diffing of files is great.

现在登录页面应显示新添加的h1，我们可以通过从终端执行git status来确认文件已在Git中更改。 然后我们可以从终端或IDE(VSCode)提交它，我的首选是使用VSCode，因为文件的视觉差异很大。

Commit the changes with Ctrl+Enter if you have not selected the file you want to commit you will get a dialogue telling you there are no staged changes to commit, you can select the files (in this case only the App.jsfile) by clicking the plus next to the file. Hitting Ctrl+Enter again will commit the changes with a message, you can check that there are no changes to commit with git status from the terminal or visually from the Source Control section in VSCode.

使用Ctrl + Enter提交更改，如果您尚未选择要提交的文件，则会出现一个对话框，告知您没有要提交的分阶段更改，您可以通过以下方式选择文件(在这种情况下，仅是App.js文件)：单击文件旁边的加号。 再次按Ctrl + Enter将提交更改并显示一条消息，您可以从终端或在VSCode的“源代码控制”部分中以git status确认是否没有要提交的更改。

Ok, time to add our super sweet code changes to a repository on GitHub for the world to see!

好的，是时候将我们的超级代码更改添加到GitHub上的存储库中了，让全世界看看！

Next up we’re going to go through adding the local changes we’ve made to a GitHub repository. If you haven’t got a GitHub account and are following along now may be a good time to set one up.

下一步，我们将添加对GitHub存储库进行的本地更改。 如果您还没有GitHub帐户并且现在仍在关注，那么最好设置一个。

在GitHub上使用SSH (Use SSH with GitHub)

First up, we’re going to make a repository on GitHub and push the changes we have made to it, here we’re going to click the + button in the top right of the GitHub home page, enter a repository name and GitHub will give you some defaults to choose from. As we have already made change locally we can ignore the first several commands but we do need the command to add the remote:

首先，我们将在GitHub上创建一个存储库，并推送对其所做的更改，在这里，我们将单击GitHub主页右上角的+按钮，输入存储库名称，然后GitHub给您一些默认值供您选择。 由于我们已经在本地进行了更改，因此我们可以忽略前几个命令，但是我们确实需要该命令来添加遥控器：

git remote add origin git@github.com:spences10/cra.git

And to push the changes up to GitHub git push -u origin master but we're going to get an error, as we haven't set up SSH.

并将更改推送到GitHub git push -u origin master但由于未设置SSH，我们将收到一个错误。

WSL SSH配置 (WSL SSH Config)

Open a new bash tab in Hyper and enter ls -al ~/.ssh check that there are no rsa files before doing this.

在Hyper中打开一个新的bash选项卡，然后输入ls -al ~/.ssh ，在执行此操作之前检查是否没有rsa文件。

You’ll notice that we’re doing this in bash rather than Fish.

您会注意到我们是用bash而不是Fish来做的。

If there’s nothing there then generate new keys with:

如果没有，则使用以下命令生成新密钥：

# add your email address ?ssh-keygen -t rsa -b 4096 -C yourGitHub@email.com

Now ls -al ~/.ssh will show two additional files:

现在， ls -al ~/.ssh将显示另外两个文件：

# there should be a private and public key-pairid_rsaid_rsa.pub

Start the SSH agent:

启动SSH代理：

eval "$(ssh-agent -s)"

Add RSA key to SSH with:

使用以下命令将RSA密钥添加到SSH：

ssh-add ~/.ssh/id_rsa

Now time to add the public SSH key to GitHub, in WSL we’re going to copy-pasta the public SSH key with cat ~/.ssh/id_rsa.pub in Hyper. Then we can copy from Hyper to a new SSH key.

现在是时候将公共SSH密钥添加到GitHub了，在WSL中，我们将在Hyper中使用cat ~/.ssh/id_rsa.pub公共SSH密钥。 然后，我们可以从Hyper复制到新的SSH密钥 。

Finally, authenticate with GitHub:

最后，通过GitHub进行身份验证：

ssh -T git@github.com

Windows Git Bash SSH配置 (Windows Git Bash SSH Config)

For Windows Git Bash, we’re going to copy our SSH keys we’ve just generated in WSL over to Windows Git Bash, there are some subtle differences when authenticating with Windows Git Bash.

对于Windows Git Bash，我们将刚刚在WSL中生成的SSH密钥复制到Windows Git Bash，使用Windows Git Bash进行身份验证时会有一些细微的差异。

From Hyper, copy the SSH files from Linux to Windows:

在Hyper中，将SSH文件从Linux复制到Windows：

cp ~/.ssh/* /c/Users/spenc/.ssh/

Start the SSH agent:

启动SSH代理：

eval `ssh-agent -s`

Add the key to SSH agent:

将密钥添加到SSH代理：

ssh-add ~/.ssh/id_rsa

Authenticate:

认证：

ssh -T git@github.com

Now the additional set up for SSH is done we should be able to go back to Hyper and push our change to GitHub.

现在完成了SSH的附加设置，我们应该可以回到Hyper并将更改推送到GitHub。

Also, you may have noticed that the SSH Key ? token went from black to green on the settings screen there this indicates that you have authenticated.

另外，您可能已经注意到SSH密钥？ 令牌在设置屏幕上从黑色变为绿色，这表明您已通过身份验证。

更改WSL版本 (Change WSL version)

If you want to use a different version of Ubuntu, Debian or any of the other available distributions of Linux from the Windows store with Hyper you will need to change the default version from PowerShell:

如果要通过Hyper从Windows商店使用其他版本的Ubuntu，Debian或任何其他可用的Linux发行版，则需要从PowerShell更改默认版本：

# list available versionswslconfig /l# set defaultwslconfig /setdefault Debian

结语！ (Wrap up!)

That’s it! We have gone from scratch to a functioning web development environment. There are several other personal things I’m now going to add to my install now which is aliases for both Git and Fish shell. If you are interested in them I have a cheat-sheet for Fish with a list of all my aliases I use, the same for my .gitconfig you can find that in my dotfiles repo

而已！ 我们已经从无到有地发展成为一个功能完善的Web开发环境。 我现在要添加到安装中的其他几项个人信息是Git和Fish shell的别名。 如果您对它们感兴趣，那么我会为Fish准备一个备忘单，其中列出了我使用的所有别名，对于我的.gitconfig一样，您可以在我的dotfiles回购中找到

Thanks for reading ?

感谢您阅读 ？

This was originally posted on my Gatsby blog you can view it here please take a look at my other content if you enjoyed this.

该内容最初发布在我的盖茨比博客上，您可以在这里查看，如果喜欢的话，请查看我的其他内容。

Follow me on Twitter or Ask Me Anything on GitHub.

在Twitter上关注我，或在GitHub上询问我 。

You can read other articles like this on my blog.

您可以在我的博客上阅读其他类似的文章 。

翻译自: https://www.freecodecamp.org/news/how-to-go-from-scratch-to-create-react-app-on-windows-2019/