22【React基础-1】Hello World

女爷i 2022-12-14 03:49 132阅读 0赞

### 写在前面 ###

从这篇文章开始，我们重新来学习一下React的官网。本文从经典的Hello World示例开始，给大家介绍下react应用的创建，通过本文的介绍，我们学会新建一个react应用。

### 概述 ###

React其实就是一个JS文件库，本质上跟我们的jQuery这些JS库是一样的，所以大家在开始的时候不要有任何的心理负担，觉得它很难，其实它一点都不难。这篇文章我们先来新建第一个react应用。

### 项目demo地址 ###

>     https://github.com/xuqwCloud/reactbasic

### React使用方法 ###

React使用方法有两种，第一种就跟jQuery一样，在我们的HTML页面中通过<script>标签引入；第二种是借助npm这个包管理工具，将它通过"npm install react"的方式安装到我们的项目中。

在我们这个系列的文章中我们采用第二种方式来给大家介绍，因为第一种方法虽然说是行得通的，但是目前我们前端开发基本都是清一色的SPA单页面应用，项目底层全部是采用webpack这些主流的打包工具来构建的，所以第一种方法在实际项目开发中用的不是很多。

### React应用创建 ###

采用第二种方式来创建一个react的项目应用的话，是需要在项目中配置一些webpack的简单配置，还要配置babel这些转义工具什么的，特别麻烦。如果你对这个过程感兴趣的话，可以在我的博客分类【React进阶】中查看《如何从零创建一个react应用》这一篇文章，里面有详细的记录。我们在此处就不耽误时间来介绍这些东西，刚开始学习react的话这些东西大家可以先不用关注，把精力放在react上就行。

我们在这里创建react项目应用的时候直接使用react官方提供的一个脚手架工具，叫"create-react-app"。通过这个工具，我们可以使用一行命令就可以创建一个基础的、配置好的、可以直接拿来就用的react项目。这个工具使用的前提是你的电脑上已经安装了node环境。

我们新建一个文件夹，然后进入此文件夹之后键盘按住shift键并且鼠标右击，选择"在此处打开Powershell窗口"，然后输入命令"npx create-react-app reactbasic"来创建第一个react应用，如下：

![20201013084759275.png][]

### Hello World编写 ###

react应用创建完成之后，在命令行面板会提示我们通过命令"cd reactbasic"进入项目目录，然后通过命令"npm start"来启动项目。我们依次输入这两个命令来启动项目，如果你看到如下所示的面板，说明我们的react应用创建成功，它会自动打开我们的浏览器并且监听3000端口：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70][]

有了一个基础的项目应用之后，我们接下来编写第一个react应用程序——Hello World。

我们先用代码编辑器打开新建的项目，然后删除掉src目录下除了index.js文件以外的所有文件，最后项目的文件目录及index.js文件里的代码如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 1][]

index.js文件代码：

import React from 'react';
    import ReactDOM from 'react-dom';
    
    ReactDOM.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
      document.getElementById('root')
    );

然后我们将下面的代码替换到index.js文件中保存后，查看页面，发现Hello World成功展示在了我们的浏览器页面中：

import React from 'react';
    import ReactDOM from 'react-dom';
    
    ReactDOM.render(<span>Hello World</span>, document.getElementById('root'));

![20201013085022517.png][]

至此，我们的Hello World应用编写成功。到目前为止，你肯定有一大堆疑惑：明明是一份js后缀的文件，为啥里面可以写<span>标签？import导进来的React都没有使用，为啥最上面这一行删掉后会报错？我代码复制粘贴后按保存，浏览器页面都没有点击刷新按钮，页面怎么自动刷新了？这些项目里我就改了改index.js这一个文件，那其他文件是做什么的……

如果你有上述的问题，请保留你的疑问，接下来的文章中我们会一一解答。本文就到此结束了，这一篇文章其实大家只需要知道react的两种使用方式，并且学会使用"create-react-app"创建react应用即可。

[20201013084759275.png]: /images/20221123/fd12d606045c4b958d877db934f81539.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70]: /images/20221123/32d454ee83614d9ca0c2d1fb45e027aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 1]: /images/20221123/ba8ecf6ad18349ce8d9de3a30c7bfc11.png
[20201013085022517.png]: /images/20221123/acad18cc950a40779f8dd157dcdf40c1.png