React教程，第5部分：TODO应用程序入门，基本样式

今天，在React培训课程的下一部分翻译中，我们将开始第一个培训项目的工作，并讨论样式的基础知识。



→ 第1部分：课程概述，React，ReactDOM和JSX普及的原因
→ 第2部分：功能组件
→ 第3部分：组件文件，项目结构
→ 第4部分：父级和子级组件
→ 第5部分：TODO应用程序的开始工作，样式设计的基础
→ 第6部分：关于本课程的一些功能，JSX和JavaScript
→ 第7部分：内联样式
→ 第8部分：继续研究TODO应用程序，熟悉组件的属性
→ 第9部分：组件属性
→ 第10部分：使用组件特性和样式的研讨会
→ 第11部分：动态标记生成和映射数组方法
→ 第12部分：研讨会，TODO应用程序的第三阶段工作
→ 第13部分：基于类的组件
→ 第14部分：关于基于类的组件，组件状态的研讨会
→ 第15部分：组件健康研讨会
→ 第16部分：TODO应用程序的第四阶段工作，事件处理
→ 第17部分：TODO应用程序的第五阶段工作，修改组件的状态
→ 第18部分：TODO应用程序的第六阶段工作
→ 第19部分：组件生命周期方法
第20部分：条件渲染的第一课
→ 第21部分：关于条件渲染的第二课​​和研讨会
→ 第22部分：TODO应用程序的第七阶段工作，从外部资源下载数据
→ 第23部分：关于使用表格的第一课
→ 第24部分：第二形式课
→ 第25部分：使用表单的研讨会
→ 第26部分：应用程序体系结构，容器/组件模式
→ 第27部分：课程项目

第11课。 TODO应用程序。 阶段数1

→ 原创

在本课程中，我们将开始第一个培训项目-TODO应用程序。 类似的课程将被安排为普通的研讨会。 首先，您将获得一个任务，要执行该任务，有必要在先前研究的材料中进行导航，然后提出解决方案。

我们将在这个应用程序上工作一段时间，因此，如果您使用create-react-app ，建议为其创建一个单独的项目。

▍工作

• 创建一个新的React应用程序。
• 使用index.js文件在页面上显示<App />组件。
• <App />组件应生成用于显示3-4标志的代码，并在其后跟随一些文本。 可以使用<p>或<span>标签格式化文本。 您可以做的事情应该类似于待办事项清单，其中已经输入了一些条目。

▍解决方案

index.js文件的代码index.js ：

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

App.js文件App.js ：

 import React from "react" function App() {   return (       <div>           <input type="checkbox" />           <p>Placeholder text here</p>                     <input type="checkbox" />           <p>Placeholder text here</p>                     <input type="checkbox" />           <p>Placeholder text here</p>                     <input type="checkbox" />           <p>Placeholder text here</p>       </div>   ) } export default App 

这是现阶段VSCode中标准的create-react-app项目的样子。


VSCode中的项目

这就是我们的应用程序现在在页面上显示的内容。


浏览器中的应用外观

今天，我们已朝着TODO应用程序迈出了第一步。 但是，在屏幕上显示该应用程序的内容看起来并不像我们过去的实验中在页面上显示的那样令人愉快。 因此，在下一课中，我们将重点介绍元素的样式。

第12课：使用CSS类在React中进行样式化

→ 原创

现在，我们将处理在第10课中由研讨会创建的应用程序。这是该应用程序在屏幕上显示的内容。


浏览器中的应用程序页面

我们想设置页面元素的样式。 React有很多样式化方法。 现在，我们正在使用您可能已经熟悉的原理的方法。 它包括应用CSS类和分配给这些类的CSS规则。 让我们看一下该项目的结构，并考虑需要为哪些元素分配将用于样式化它们的类。


VSCode中的项目

index.js文件负责呈现App组件。 App组件显示一个<div>元素，其中包含其他三个组件MainComponent和Footer 。 每个组件仅显示一个带有文本的JSX元素。 我们将在这些组件中进行样式设计。 让我们来研究Header组件。 回想一下在他的工作阶段，他的代码如下所示：

 import React from "react" function Header() {   return (       <header>This is the header</header>   ) } export default Header 

通常，当他们使用HTML代码并希望将类分配给某个元素时，可以使用class属性来完成。 假设我们要将这样的属性分配给<header>元素。 但是在这里我们不能忘记我们不是在使用HTML代码，而是在使用JSX。 而且这里我们不能使用class属性（实际上，您可以使用具有此名称的属性，但是不建议使用）。 而是使用名为className的属性。 许多出版物说，这样做的原因是因为class是保留的JavaScript关键字。 但是，实际上，JSX使用常规JavaScript API与DOM一起使用。 要使用此API访问元素，请使用以下形式的熟悉的设计：

 document.getElementById("something") 

要将新类添加到元素，请按照下列步骤操作：

 document.getElementById("something").className += " new-class-name" 

在类似的情况下，使用classList元素的属性更方便，特别是因为它具有添加和删除类的便捷方法，但是在这种情况下没有关系。 重要的是className使用了className属性。

实际上，要为JSX元素分配类，就足以知道在HTML中使用class关键字的地方，在JSX中必须使用className关键字。

将导航栏类分配给<header> navbar ：

 import React from "react" function Header() {   return (       <header className="navbar">This is the header</header>   ) } export default Header 

现在，在components文件夹中，创建Header.css文件。 将以下代码放入其中：

 .navbar { background-color: purple; } 

现在，使用import "./Header.css"命令将此文件连接到Header.js （通过此命令，扩展标准import命令的功能，我们告诉Webpack捆绑程序，我们将其用于使用create-react-app工具create-react-app项目中在Header.js使用Header.css ）。

这就是它在VSCode中的外观。


样式文件及其在VSCode中的连接

所有这些将导致以下事实：页面上应用程序显示的顶行外观发生了变化。


更改顶行样式

在这里，我们使用了非常简单的样式。 Header.css内容Header.css文件的内容：

 .navbar {   height: 100px;   background-color: #333;   color: whitesmoke;   margin-bottom: 15px;   text-align: center;   font-size: 30px;   display: flex;   justify-content: center;   align-items: center; } 

另外，打开项目index.css已经存在的index.css文件index.css并将以下样式放入其中：

 body {   margin: 0; } 

index.js使用import "./index.css"命令import "./index.css" index.js这个文件index.js在index.js 。 结果，应用程序页面将采用下图所示的形式。


更改页面样式

请注意， index.css指定的样式影响了页面的所有元素。 例如，如果您使用某种在线编辑器进行实验，则可以以特殊方式组织使用样式文件。 例如，在这种编辑器中，可能有一个自动连接到页面的标准样式文件，其中描述的CSS规则将应用于页面的所有元素。 在我们的简单示例中，完全有可能将所有样式都放在index.css 。

实际上，假设您已经熟悉CSS，我们可以说这里我们使用与样式普通HTML元素完全相同的CSS代码。 在React中使用类样式化元素时要记住的主要事情是，使用className代替了HTML中使用的class元素的属性。

此外，应该注意，只能将类分配给React元素-例如<header> ， <p>或<h1> 。 如果尝试为组件实例分配类名-如<Header />或<MainContent /> ，则系统的行为将与您预期的完全不同。 我们稍后再讨论。 同时，请记住，React应用程序中的类是分配给元素而不是组件的。

这是您可能会发现难以开始使用React的其他事情。 我们正在谈论页面上具有不同层次结构的样式元素。 假设当CSS Flexbox或CSS Grid技术用于样式设置时，就会发生这种情况。 在这种情况下，例如，在使用Flex布局时，您需要知道哪个实体是flex容器，哪些实体是flex元素。 即，可能很难理解-如何精确设置元素样式，将哪些元素应用于某些样式。 例如，假设我们的App组件中的<div>元素必须是flex容器：

 import React from "react" import Header from "./components/Header" import MainContent from "./components/MainContent" import Footer from "./components/Footer" function App() {   return (       <div>           <Header />           <MainContent />           <Footer />       </div>   ) } export default App 

在这种情况下，可通过Header ， MainContent和Footer组件显示弹性元素。 例如，看一下Header组件代码：

 import React from "react" import "./Header.css" function Header() {   return (       <header className="navbar">           This is the header       </header>   ) } export default Header 

<header>元素必须是App组件中<div>元素的直接后代。 应该将其样式化为弹性元素。

为了理解这种构造的样式，您需要考虑应用程序生成的HTML代码。 当使用通过create-react-app的项目时，我们将打开浏览器中显示的页面的Chrome开发人员工具的Elements标签。


页码

标识符为root的<div>元素是我们在index.js文件中调用的ReactDOM.render()方法中引用的index.html页面的元素。 由App组件生成的标记将显示在其中，即下一个<div>元素，其中包含由相应组件形成的<header> ， <main>和<footer>元素。

也就是说，通过分析上面给出的React应用程序的代码，我们可以假定App组件中的<Header />构造被替换为<header className="navbar">This is the header</header>构造。 了解此事实后，您可以使用复杂的方案来设置页面元素的样式。

至此，我们对样式化React应用程序进行了首次介绍。 建议您尝试一下刚刚发现的内容。 例如，尝试<MainContent />设置<MainContent />和<Footer />组件输出<MainContent />元素的<MainContent /> 。

总结

今天，我们开始开发第一个培训项目-TODO应用程序，并且熟悉使用CSS类设计React应用程序的样式。 下次，我们将讨论本课程的作者所坚持的代码样式功能，以及有关JSX和JavaScript的一些知识。

亲爱的读者们！ 您是否已有要使用React创建的应用程序的想法？