2024年最全React 基础：创建我们的第一个 React 应用程序(1)，2024年最新前端常见面试题及答案

基础面试题

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括：HTML，CSS，JavaScript，浏览器，性能优化等等

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

现在在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”的书出现了。

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

最后

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

]

[外链图片转存中…(img-Y9T0QbWx-1715651336788)]

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】