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

​

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

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

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

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

npx create-react-app my-app

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

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

npx create-react-app my-app --template typescript

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

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

npm start

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

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

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

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

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

function App() {
return <div className=‘App’>My react app</div>;
}

export default App;

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

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

const Bookshelf = () => {
return <div>Bookshelf</div>;
};

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

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

function App() {
return (
<div className=‘App’>
<Bookshelf></Bookshelf>
</div>
);
}

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

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

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

const Book = () => {
return <div>Book</div>;
};

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

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

const Book = ({ title }) => {
return <div>{title}</div>;
};

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

function App() {
return (
<div className=‘App’>
<Bookshelf></Bookshelf>
<Book title=‘Laravel collections’ />
</div>
);
}

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

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

<Bookshelf>
<Book title=‘Laravel collections’ />
<Book title=‘Ruby for beginners’ />
<Book title=‘CSS is awesome’ />
</Bookshelf>

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

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

const Bookshelf = ({ children }) => {
return <div>{children}</div>;
};

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

提取成分永久链接

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

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

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

export default function Bookshelf({ children }) {
return <div>{children}</div>;
}

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

import Bookshelf from ‘./components/Bookshelf’;

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

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

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

​