🚀React小白自学指南---基础篇，第1篇《教你构建第一个的React程序》

多动症男孩
1,257 阅读8分钟

前言

React已经成为现代Web开发的热门前端框架之一，越来越多的开发者加入React社区的队伍。但是对于初学者来说，学习一个新的技术框架可能会感到有些困难，特别是如果在没有指导和明确的学习计划的情况下自学。本系列技术博客将为初学者们提供一份指南，通过一系列教程逐步深入地探索React，从最基础的概念讲解到框架的进阶应用，后续还会通过实际项目来加强巩固学习的成果，如果你想学习React，这个系列将无疑是一个很好的起点，让我们开始吧！！！！

如果想和更多的小伙伴交流讨论也可以在联系我😘，我们有一个专门的完全免费的交流群！！！


🔑配置开发环境

第一步：

首先，您需要安装Node.js和npm。您可以从nodejs.org/en/download下载安装Node.js，并在命令行中运行以下命令来验证是否已正确安装Node.js和npm。

node -v
npm -v

如果正确安装，将在命令行中输出相应的版本号。

😋小白提示：

  1. 进入Node官网后，根据自己的设备选择相应的平台下载LTS（长期支持版本）的Node, 其中npm包含在Node中，不需要额外的安装，安装包下载完毕后，只需要根据提示一直点击下一步即可完成安装！！！-
  2. Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时。它使得 JavaScript 可以在服务器端运行，而不仅仅是在浏览器中运行。作用类似于Java中的 JDK !!!
  3. npm 是 Node.js 的包管理器，它是 Node.js 生态系统的重要组成部分。类似于手机中的应用商店，里面有大量的软件（即各种包），供我们使用！！！

注意：有很多刚接触前端的小伙伴，喜欢刨根问底，想要全面的了解这些工具方方面面，其实个人推荐你们不用太过于纠结这些工具的细节，前期学习的时候还是以使用为主要目的！不要偏离了最初的目标！


第二步：

其次，安装vscode编辑器，步骤如下：

  1. 首先，打开浏览器，访问 VSCode 的官方网站 code.visualstudio.com/ 。
  2. 在网站首页中，点击“Download for Windows”（Windows 操作系统）或“Download for Mac”（Mac 操作系统）按钮，根据您的操作系统下载适合的安装包。
  3. 下载完成后，双击安装包进行安装。对于 Windows 用户，您可以按照默认设置进行安装，也可以自定义安装路径。对于 Mac 用户，将 VSCode 图标拖动到应用程序文件夹即可完成安装。

🌈创建新的React项目

  1. 接下来，您需要全局安装 create-react-app 工具。这个工具可以帮助您快速创建一个新的React项目，您可以在命令行中运行以下命令来安装 create-react-app 工具：
npm install -g create-react-app

😋小白提示: 这句命令的意思是：使用npm工具用全局安装的方式下载create-react-app包。

  1. 安装完成后，有终端使用经验的朋友，可以直接使用终端进入到你想要创建项目的目录，然后运行如下命令，完全小白的朋友，可以直接使用图像化界面进入到你想要创建项目的目录，按住shift键->鼠标右击->在此处打开powershell窗口（win中可以这样操作）
create-react-app my-app

😋小白提示: my-app是您的项目名称，可以根据需要进行更改。执行此命令时，create-react-app将创建一个新的React项目，并自动安装所有必要的依赖项。

  1. 运行上述命令后，您会看到一些进度消息，然后 create-react-app 将在您的当前目录下创建一个名为 my-app 的新目录，出现下面的界面表示项目创建成功：

success.png

😋小白提示：（文件结构）

├── README.md          使用方法的文档
├── node_modules       所有的依赖安装的目录
├── package-lock.json  锁定安装时的包的版本号,保证团队的依赖能保证一致。
├── package.json       定义了项目所需要的各种依赖、脚本命令、作者、版本以及其他相关的元信息。
├── public             静态公共目录
└── src                开发用的源代码目录

4. 项目创建成功之后，使用**vscode编辑器打开项目目录**，然后点击顶部菜单栏的终端->新建终端，并在终端中运行以下命令启动开发服务器： 
npm start

😋小白提示：终端显示的路径一定要是当前的项目的路径，这样使用npm start 命令才起作用！！！

  1. 项目启动成功后，再浏览器中访问 http://localhost:3000 即可看到启动页面（一个大大的React官方图标）！！！

⭕常见问题总结(重点)

刚接触的小白，在上述步骤中会遇到的一些非常常见的的问题，非常折磨人，因为自己淋过雨，所以想给你们撑把伞😋！！！

在 🌈创建新的React项目中第1步和第3步，经常会遇到两种情况，要么加载十分缓慢，仿佛无响应一般（😫），要么直接提示你失败了，搞得你莫名其妙！！！

🏸其实罪魁祸说就是npm的镜像源（你可以理解为软件商店中软件的来源）默认是国外的镜像源，所以你国内访问当让十分缓慢，这里可能有些小伙伴要说了，我明明可以魔法上网为什么，使用npm下载还是十分的缓慢呢，别着急一会在解释！！！

1️⃣ 情况一：遇到上述问题，但没有魔法上网！

使用以下命令更改registry到淘宝源：

npm config set registry https://registry.npm.taobao.org/

如果需要切换回官方源，则执行以下命令：

npm config set registry https://registry.npmjs.org/

无论你采用哪种方式更换镜像源，都应该能够发现下载速度得到明显改善，当镜像源的问题解决之后，下次还需要切换镜像源的时候，这里我推荐朋友们可以使用 nrm 这个工具（nrm的使用小伙伴们可以自行去了解一下，非常简单）。


2️⃣ 情况二：遇到上述问题，且使用了魔法上网！

原因解释： 为什么我可以魔法上网，访问国外镜像源照理说应该很快的啊😲，为啥还是不行，大概率是因为你所使用的代理软件所使用的方式为：系统代理，这会导致 PC通过代理服务器来连接网络，替代直接连接网络（你可以理解为通过一个第三方媒介去上网），但是但是但是，终端连接网络的方式和我们普通电脑连接网络的方式是有区别的😐，这些区别导致虽然你的pc使用了代理服务器，可终端确使用不了（准确的说npm使用不了，毕竟npm是在终端中使用的）！

解决办法：

通过 npm config 命令设置代理。在终端窗口输入以下命令：

npm config set proxy http://proxy.example.com:8080
npm config set https-proxy http://proxy.example.com:8080

这里的 proxy.example.com:8080 是代理服务器的地址和端口。


吐槽一下：当时我自己就是遇到了情况二，活活整了一天都不知道咋搞，网络上的教程基本都只有第一种情况的解决办法😭，真羡慕你们💪，有这么好的博主，给你们写的这么详细，还不赶紧点赞、关注、评论一波！！！


✍编写你第一个react应用程序

  1. 删除src目录下的所有文件，但不要删除src目录 （后续主要在这个目录下书写源代码）
  2. 再src目录下创建新文件index.js（指定这个文件名，不要修改）
  3. 再index.js中输入如下内容 
    import React from "react";
import ReactDOM from "react-dom";


ReactDOM.render(
    <h1>欢迎进入React的世界</h1>,
    document.getElementById('root')
)

这些代码内容，后续的章节都会细细道来！！！

这时候保持项目仍在启动状态，在 http://localhost:3000 页面下，刷新浏览器，如下图表示你已经亲手✍编写了你自己第一个react应用程序👍！！！


最后

以上就是 “🚀React小白自学指南---基础篇，第1篇《构建第一个的React项目 》”的全部内容，通过本文的学习，我们已经成功地使用React构建了自己的第一个程序，了解了最最基本的一些工具的使用，这些工具也将一直伴随着我们后续的使用，最后我想说我会持续更新下去，也希望大家可以给我 ”点赞、关注、评论“，这也是我持续下去的动力，我是多动症男孩（ddboy），因为自己淋过雨，所以想给你们撑把伞的未来前端技术专家，我们下一篇再见✋！！！

avatar
文章
阅读
粉丝