React 基础：创建我们的第一个 React 应用程序

我坚信边做边学。在本系列中，我们将逐步介绍 React。

在这一部分中，我们将创建我们的第一个应用程序，并基本了解创建我们可以使用的组件。

创建我们的第一个 React 应用程序永久链接

要创建我们的第一个应用程序，我们需要运行以下命令。该my-app部分是您的应用程序的名称。

<span style="color:#f8f8f2"><code style="margin-left:396px" class="language-bash">npx create-react-app my-app </code></span>

注意阅读正确。这是npx不是npm对这个命令

我们还可以通过运行以下命令作为打字稿应用程序启动：

<span style="color:#f8f8f2"><code style="margin-left:396px" class="language-bash">npx create-react-app my-app --template typescript</code></span>

但是，对于此应用程序，我们将使用普通版本。

现在在my-app文件夹中运行以下命令以启动应用程序：

<span style="color:#f8f8f2"><code style="margin-left:396px" class="language-bash"><span style="color:gold">npm</span> start</code></span>

此命令将打开一个浏览器，您应该会看到基本的 React 样板。

创建我们的第一个组件永久链接

React 是一个基于组件的系统，这意味着你看到的一切都是由组件组成的。

在您最喜欢的编辑器中打开您的项目，让我们看看如何开始创建我们的组件。

让我们打开src/App.js文件并从头开始。

<span style="color:#f8f8f2"><code style="margin-left:396px" class="language-js"><span style="color:#00e0e0">function</span> <span style="color:gold">App</span><span style="color:#fefefe">(</span><span style="color:#fefefe">)</span> <span style="color:#fefefe">{</span>
  <span style="color:#00e0e0">return</span> <span style="color:#00e0e0"><</span>div className<span style="color:#00e0e0">=</span><span style="color:#abe338">'App'</span><span style="color:#00e0e0">></span>My react app<span style="color:#00e0e0"><</span><span style="color:#00e0e0">/</span>div<span style="color:#00e0e0">></span><span style="color:#fefefe">;</span>
<span style="color:#fefefe">}</span>

<span style="color:#00e0e0">export</span> <span style="color:#00e0e0">default</span> App<span style="color:#fefefe">;</span></code></span>

这将呈现文本“我的反应应用程序”。还没有什么花哨的，但没关系。

让我们添加我们的第一个自定义组件，这将是一个书架。

<span style="color:#f8f8f2"><code style="margin-left:396px" class="language-js"><span style="color:#00e0e0">const</span> <span style="color:gold">Bookshelf</span> <span style="color:#00e0e0">=</span> <span style="color:#fefefe">(</span><span style="color:#fefefe">)</span> <span style="color:#00e0e0">=></span> <span style="color:#fefefe">{</span>
  <span style="color:#00e0e0">return</span> <span style="color:#00e0e0"><</span>div<span style="color:#00e0e0">></span>Bookshelf<span style="color:#00e0e0"><</span><span style="color:#00e0e0">/</span>div<span style="color:#00e0e0">></span><span style="color:#fefefe">;</span>
<span style="color:#fefefe">}</span><span style="color:#fefefe">;</span></code></span>

我选择将这段代码放在我们的function App声明之上，以保持现在的简单。

要使用此组件，我们需要修改我们的应用程序以呈现以下内容：

<span style="color:#f8f8f2"><code style="margin-left:396px" class="language-js"><span style="color:#00e0e0">function</span> <span style="color:gold">App</span><span style="color:#fefefe">(</span><span style="color:#fefefe">)</span> <span style="color:#fefefe">{</span>
  <span style="color:#00e0e0">return</span> <span style="color:#fefefe">(</span>
    <span style="color:#00e0e0"><</span>div className<span style="color:#00e0e0">=</span><span style="color:#abe338">'App'</span><span style="color:#00e0e0">></span>
      <span style="color:#00e0e0"><</span>Bookshelf<span style="color:#00e0e0">></span><span style="color:#00e0e0"><</span><span style="color:#00e0e0">/</span>Bookshelf<span style="color:#00e0e0">></span>
    <span style="color:#00e0e0"><</span><span style="color:#00e0e0">/</span>div<span style="color:#00e0e0">></span>
  <span style="color:#fefefe">)</span><span style="color:#fefefe">;</span>
<span style="color:#fefefe">}</span></code></span>

如果我们现在重新加载页面，我们应该会看到“书架”这个词。

这听起来可能还不太花哨，但您可能已经开始掌握如何在此处使用组件的概念。

让我们也创建一个 book 组件。

<span style="color:#f8f8f2"><code style="margin-left:396px" class="language-js"><span style="color:#00e0e0">const</span> <span style="color:gold">Book</span> <span style="color:#00e0e0">=</span> <span style="color:#fefefe">(</span><span style="color:#fefefe">)</span> <span style="color:#00e0e0">=></span> <span style="color:#fefefe">{</span>
  <span style="color:#00e0e0">return</span> <span style="color:#00e0e0"><</span>div<span style="color:#00e0e0">></span>Book<span style="color:#00e0e0"><</span><span style="color:#00e0e0">/</span>div<span style="color:#00e0e0">></span><span style="color:#fefefe">;</span>
<span style="color:#fefefe">}</span><span style="color:#fefefe">;</span></code></span>

但是，我们想在使用时给这本书一个标题，而不是固定名称“Book”。

让我们为此添加一个 title 属性！

<span style="color:#f8f8f2"><code style="margin-left:396px" class="language-js"><span style="color:#00e0e0">const</span> <span style="color:gold">Book</span> <span style="color:#00e0e0">=</span> <span style="color:#fefefe">(</span><span style="color:#fefefe">{</span> title <span style="color:#fefefe">}</span><span style="color:#fefefe">)</span> <span style="color:#00e0e0">=></span> <span style="color:#fefefe">{</span>
  <span style="color:#00e0e0">return</span> <span style="color:#00e0e0"><</span>div<span style="color:#00e0e0">></span><span style="color:#fefefe">{</span>title<span style="color:#fefefe">}</span><span style="color:#00e0e0"><</span><span style="color:#00e0e0">/</span>div<span style="color:#00e0e0">></span><span style="color:#fefefe">;</span>
<span style="color:#fefefe">}</span><span style="color:#fefefe">;</span></code></span>

我们现在可以像这样在我们的应用程序中导入这本书：

<span style="color:#f8f8f2"><code style="margin-left:396px" class="language-js"><span style="color:#00e0e0">function</span> <span style="color:gold">App</span><span style="color:#fefefe">(</span><span style="color:#fefefe">)</span> <span style="color:#fefefe">{</span>
  <span style="color:#00e0e0">return</span> <span style="color:#fefefe">(</span>
    <span style="color:#00e0e0"><</span>div className<span style="color:#00e0e0">=</span><span style="color:#abe338">'App'</span><span style="color:#00e0e0">></span>
      <span style="color:#00e0e0"><</span>Bookshelf<span style="color:#00e0e0">></span><span style="color:#00e0e0"><</span><span style="color:#00e0e0">/</span>Bookshelf<span style="color:#00e0e0">></span>
      <span style="color:#00e0e0"><</span>Book title<span style="color:#00e0e0">=</span><span style="color:#abe338">'Laravel collections'</span> <span style="color:#00e0e0">/</span><span style="color:#00e0e0">></span>
    <span style="color:#00e0e0"><</span><span style="color:#00e0e0">/</span>div<span style="color:#00e0e0">></span>
  <span style="color:#fefefe">)</span><span style="color:#fefefe">;</span>
<span style="color:#fefefe">}</span></code></span>

你应该会看到一本名为“Laravel collections”的书出现了。

您可能会看到我们要做什么，因为我们希望这本书放在书架里。让我们改变它并添加更多书籍。

<span style="color:#f8f8f2"><code style="margin-left:396px" class="language-js"><span style="color:#00e0e0"><</span>Bookshelf<span style="color:#00e0e0">></span>
	<span style="color:#00e0e0"><</span>Book title<span style="color:#00e0e0">=</span><span style="color:#abe338">'Laravel collections'</span> <span style="color:#00e0e0">/</span><span style="color:#00e0e0">></span>
	<span style="color:#00e0e0"><</span>Book title<span style="color:#00e0e0">=</span><span style="color:#abe338">'Ruby for beginners'</span> <span style="color:#00e0e0">/</span><span style="color:#00e0e0">></span>
	<span style="color:#00e0e0"><</span>Book title<span style="color:#00e0e0">=</span><span style="color:#abe338">'CSS is awesome'</span> <span style="color:#00e0e0">/</span><span style="color:#00e0e0">></span>
<span style="color:#00e0e0"><</span><span style="color:#00e0e0">/</span>Bookshelf<span style="color:#00e0e0">></span></code></span>

但是，如果我们现在刷新，我们将看不到任何东西！那是因为我们的书架不知道如何渲染子组件。

为此，我们需要定义我们的书架以接受孩子并像这样渲染他们：

<span style="color:#f8f8f2"><code style="margin-left:396px" class="language-js"><span style="color:#00e0e0">const</span> <span style="color:gold">Bookshelf</span> <span style="color:#00e0e0">=</span> <span style="color:#fefefe">(</span><span style="color:#fefefe">{</span> children <span style="color:#fefefe">}</span><span style="color:#fefefe">)</span> <span style="color:#00e0e0">=></span> <span style="color:#fefefe">{</span>
  <span style="color:#00e0e0">return</span> <span style="color:#00e0e0"><</span>div<span style="color:#00e0e0">></span><span style="color:#fefefe">{</span>children<span style="color:#fefefe">}</span><span style="color:#00e0e0"><</span><span style="color:#00e0e0">/</span>div<span style="color:#00e0e0">></span><span style="color:#fefefe">;</span>
<span style="color:#fefefe">}</span><span style="color:#fefefe">;</span></code></span>

现在我们应该可以看到我们所有的书了！

提取成分永久链接

如果我们向页面添加更多内容，我们很快就会得到一个包含各种组件的庞大文件。

这就是 React 超级强大的地方。我们可以简单地将这些组件移动到它们各自的文件中。

让我们通过components在src. 然后添加Bookshelf.js为文件并添加 Bookshelf 代码，如下所示：

<span style="color:#f8f8f2"><code style="margin-left:396px" class="language-js"><span style="color:#00e0e0">export</span> <span style="color:#00e0e0">default</span> <span style="color:#00e0e0">function</span> <span style="color:gold">Bookshelf</span><span style="color:#fefefe">(</span><span style="color:#fefefe">{</span> children <span style="color:#fefefe">}</span><span style="color:#fefefe">)</span> <span style="color:#fefefe">{</span>
  <span style="color:#00e0e0">return</span> <span style="color:#00e0e0"><</span>div<span style="color:#00e0e0">></span><span style="color:#fefefe">{</span>children<span style="color:#fefefe">}</span><span style="color:#00e0e0"><</span><span style="color:#00e0e0">/</span>div<span style="color:#00e0e0">></span><span style="color:#fefefe">;</span>
<span style="color:#fefefe">}</span></code></span>

然后我们可以App.js像这样在我们的文件中使用这个组件：

<span style="color:#f8f8f2"><code style="margin-left:396px" class="language-js"><span style="color:#00e0e0">import</span> Bookshelf <span style="color:#00e0e0">from</span> <span style="color:#abe338">'./components/Bookshelf'</span><span style="color:#fefefe">;</span></code></span>

继续并为 Book 组件尝试相同的方法。

通过提取这些组件，我们得到了更清晰和可维护的代码。

我希望你喜欢构建你的第一个 React 应用程序。您可以在上找到完整的代码示例GitHub.