写在前面

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

Hello World编写

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

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

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

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'));

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

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

作者：X北辰北

链接：https://xuqwblog.blog.csdn.net/article/details/109043852

来源：CSDN
著作权归作者所有，转载请联系作者获得授权，切勿私自转载。