在React中使用风格化的组件
在本教程中，你将了解React的概况和什么是风格化组件，以及为什么它是网页风格化的一个好选择。最后，我们将在React中建立一个简单的网页，并使用styled-components为其添加样式。
让我们开始吧!
前提条件
请确保安装并运行以下要求，以跟随编码部分。
- 以管理权限运行的命令行界面。
- 具有[JavaScript编程语言]和[CSS]的基本知识。
- 一个软件包管理器，[yarn]或[npm]。
- 你选择的代码编辑器。我将会使用[VS Code]。
- [Node.js]。你可以下载最新版本。
什么是React
React是一个开源的JavaScript库，由Facebook建立和维护。当面临构建优雅和响应式用户界面/UI组件的需求时，React是首选的框架。React是前端开发者的首选，因为它是基于组件的。
React作为一个前端库，与Node.js、Django、Java和Ruby等后端开发库整合得很好。
React是快速、简单和可扩展的，因为它在你的应用程序中渲染数据变化而不需要重新加载应用程序。
在React中，你的应用程序的每个部分都可以单独构建，并可以作为一个组件重复使用。组件是基本的可重用的JavaScript函数，处理屏幕上呈现的内容（UI）和呈现的顺序（UI是如何拼凑起来的）。组件通过render()函数返回HTML脚本和其他单独构建的JSX代码。
然后，这些组件被组合在一起，形成复杂的用户界面。此外，组件允许开发者将他们的用户界面分割成独立的、可重复使用的部分，以孤立地参与每个部分。
在一个网络应用中，像导航栏、搜索栏、标题和其他许多部分的基本部分都可以作为组件来构建，并合并成一个单一的UI。
React中的组件可以写成函数或类--它们接受定义的输入/道具来决定在浏览器上呈现的内容。[Props],(https://reactjs.org/docs/components-and-props.html)是属性的简称，就像函数参数，让你把数据作为输入从一个组件传递到另一个组件。
功能性组件是一个JavaScript函数，它接受单props作为参数传递给一个组件，并返回一个反应元素，而不使用render() 方法。
另一方面，类组件被写成ES6类，它扩展了名为React.Component的基础组件，并有一个render() 方法来返回所有定义的React元素。
按钮、表单、内容区、导航和对话框部分是一些可以定义为组件的前端部分。
现在我们已经看到了什么是React和什么是组件，让我们来看看styled-components 。
什么是风格化组件
Styled-components 是一个为React和React Native开发者建立的库。它允许你在你的应用程序中使用组件级的样式。 ，利用一种称为CSS-in-JS的技术，混合使用JavaScript和CSS。Styled-components
Styled-components 它是基于标记的模板字数，这意味着在为你的组件设计样式时，实际的CSS代码是写在回车键之间的。这使开发人员能够灵活地在一个项目中重复使用他们的CSS代码。
有了styled-components ，就不需要将你创建的组件映射到外部CSS样式。
使用风格化组件的优点
以下是使用风格化组件的一些好处。
- 消除类名错误：
styled-components，为你的样式提供独特的类名，从而消除了类名重复、拼写错误和重叠的问题。 - 更容易管理CSS。由于每一点样式都与一个特定的组件相联系，因此更容易知道哪些CSS被应用 这使得删除不使用的组件样式变得很容易。
- 简单和动态的造型。通过
styled-components中支持的道具和全局主题，造型很简单，无需手动管理几十个类。 - 可重复的样式。当你使用
styled-components，无论你的代码库有多大或多小，你都可以将你的样式导入到其他项目区。
使用Styled-components创建和设计一个简单网页的样式
本节将为disney+登陆页面创建一个克隆，并使用styled-components为其组件添加CSS。
首先，我们需要在React中创建一个应用程序，其中将包含我们的登陆页面。
在你选择的文件夹中，打开命令提示符并输入以下命令。
npx create-react-app disney-landing-page
这将通过加载和安装我们的应用程序所需的所有React依赖项来初始化和创建我们名为disney-landing-page 的react应用程序。
一旦所有的依赖被安装，我们的React应用程序的开发环境就会准备好。
要进入我们的项目文件夹，在命令提示符或你的代码编辑器的终端使用下面的命令。
cd disney-landing-page
安装Styled-components
接下来，我们使用下面的命令将styled-components 和react-router-dom 库安装到我们的项目中。
yarn add styled-components
yarn add react-router-dom
启动开发服务器
要启动应用程序的开发服务器，请在你的终端上运行这两条命令中的任何一条，这取决于你所使用的软件包管理器。
yarn start
npm start
这就是预期的结果。
在为我们的项目设置好一切之后，我们现在可以在代码编辑器中打开该项目，开始编写一些代码。
你的应用程序结构应该是这样的。
创建我们的组件
首先，我们需要创建一个文件夹来存储我们的组件。在你的项目结构中的src文件夹内，创建一个文件夹，并将其命名为组件。
在你新创建的组件文件夹中，创建两个文件，一个命名为Landing.js，另一个命名为Header.js。接下来，我们将在这两个文件中创建我们的组件并对其进行样式设计，我们很快就会看到。
在我们开始使用CSS-in-JS(Styled-components)之前，打开Ling.js文件，添加以下代码来创建我们的第一个组件。
我们用下面的代码创建Landing.js 组件。
import styled from "styled-components";// the styled components library we installed is imported here!
// This component will render the landing page contents in container.
const Landing = (props)=>{ // a functional component
return
(<Container>
<Content>
<Content>
</Container>);
}
export default Landing;
为了创建我们的第二个组件，打开组件文件夹中的Header.js 文件。
在该文件中添加以下代码。
import styled from "styled-components";
// This component will render a Navbar before styling.
const Header = (props)=>{
return (
<Nav>
Header
</Nav>
);
}
export default Header;
将一个组件路由到主应用程序中
为了开始工作，让我们打开App.js ，这是我们应用程序的基础。然后，我们用下面的代码替换其中的所有内容，创建一个应用函数，加载我们的Styled-components，并将其渲染为登陆页面。
在你的网络应用中建立组件/页面后，你可能需要公开并让你的用户浏览它们。为了实现这一点，你需要一个专门的路由器。
React路由器是一个标准库，用于在简单的ReactJs应用程序中动态路由组件/页面视图，如单页Web应用程序。
React路由器保持UI和URL的同步，给用户在Web应用中提供无缝导航。
为了将组件路由到主应用程序中，你将从react-router-dom ，即我们之前安装的React-router包中导入功能。
Import {BrowserRouter as Router, Switch, Route} from "react-router-dom";//The Router, Switch, and Route will help us move between our created component and the main App.js.
Import Landing from "./components/Landing" //This is to import the component created in the Landing.js file.
Import Header from "./components/Header" // This is to import the component created in the Header.js file.
Import './App.css';//Load a set of predefined CSS that will define how HTML elements in the landing page behave.
function App() { //main app
return(
<div>
<Router>
<Switch>
<Route exact path="/">
</Route>
</Switch>
</Router>
</div>)
export default App;
这个组件将在样式设计之前渲染一个Navbar 。
现在我们已经创建了我们的组件，现在是时候把它路由到App.js 。
要做到这一点，请在路由标签之间添加下面的代码，如下图所示。
<Landing/>
<Header/>
最终的App.js 现在应该包含以下代码。
import {BrowserRouter as Router, Switch, Route} from "react-router-dom";
import Landing from "./components/Landing";
import Header from "./components/Header";
import './App.css'
function App() {
return(
<div>
<Router>
<Switch>
<Route path="/">
<Landing/>
<Header/>
</Route>
</Switch>
</Router>
</div>)
}
export default App;
现在要做一些样式设计
请确保在应用程序的公共文件夹中创建一个图像文件夹。
你应该在这个文件夹里有登陆页面的背景图片（BgImage）、Disney+图标图片、logoOne和logoTwo。
你可以从这个Google Drive中获得这些图片和图标。
让我们在我们创建的组件(Landing 和Header)上添加一些很酷的功能，并根据它们所包含的内容，使用styled-components 样式。
在Landing.js 组件中的Content tags 之间添加以下代码。
<BgImage/>{/*holder for the landing page back-ground image should be here*/}
<CTA>
<LogoOne src="images/cta-logo-one.svg" alt='' /> {/*holder for your logo-one should be here, to be styled as imgage*/}
<Signup>GET IT ALL HERE</Signup>
<Description> {/*holder for a paragraph of text to be styled as p tag*/}
Get premium access to raya and the latest dragon show with a Disney+ subscription. As of 03/04/2021
, the price of Disney+ and the Disney bundle will increase by $1.
</Description>
<LogoTwo src = "images/cta-logo-two.png" alt='' /> {/*holder for your logo-two should be here, to be styled as image*/}
</CTA>
接下来，在Header.js 组件中的Nav tags 之间添加下面的代码。
<Logo>
<img src="/images/logo.svg" alt= "Disney+"/>
</Logo>
如果你达到了这一点，那就很好!
没有样式的页面应该类似于下面的截图。
为了给我们的Landing.js 组件中的容器、内容区、段落、按钮和图片设置样式，请在导出默认的Landing这一行之后立即写下以下CSS-in-JS。
容器的样式
为了给容器中的项目设置布局，可以使用CSS属性，如overflow,flex,text-alignment ，等等，如下所示。
{/*Container is declared in JavaScript and styled. Section is assigned to it*/}
{/*then CSS code is written within backticks to act on the Container*/}
const Container = styled.section`
overflow: hidden;
display: flex;
flex-direction: column;
text-align: center;
height: 100vh;
`;
内容区的样式
为了在内容区的元素周围创造空间，可以设置元素height 和position 。人们可以使用CSS属性，如margin,height,width,padding, 和position 来进行额外的定制。
{/*Content is declared in JavaScript and styled.div is assigned to it*/}
{/*CSS code is written within backticks(tagged-template literals) to render all content inside a div*/}
const Content = styled.div`
margin-bottom: 10vw;
width: 100%;
position: relative;
min-height: 100vh;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 80px 40px;
height: 100%;
`;
背景图片的样式
像background-size 和z-index 这样的CSS属性可以让你将图像设置为覆盖整个div，并让其他元素优先于图像。我们还可以从图像中设置background-position 。
{/*BgImage is declared in JavaScript and styled.div is assigned to it*/}
{/*CSS code is written within backticks(tagged-template literals) to render the image inside a div*/}
const BgImage = styled.div`
height: 100%;
background-position: top;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
background-image: url("images/back-ground.jpg"); {/*the image is loaded as a url*/}
top: 0;
left: 0;
right: 0;
z-index: -1
`;
为行动呼吁（CTA）区域设置样式
为了使CTA区域的所有元素居中，我们将设置margin-right 和margin-left 为auto 。justify-content ，强制CTA区域的元素居中对齐。
CSS属性，如max-width ，和margin ，将允许我们设置元素的覆盖区域。
{/*The CTA will hold both the two logos and the description. It is styled as a div*/}
const CTA = styled.div`
margin-bottom: 2vw;
max-width: 650px;
display:flex;
flex-direction:column;
flex-wrap: wrap;
justify-content: center;
margin-top: 0;
margin-right: auto;
margin-left: auto;
text-align: center;
`;
塑造LogoOne
LogoOne中的图片需要没有background-color ，有一定像素的height 和width ，同时在它和下面的元素之间有margin-space 。
为了实现上面的造型，请使用下面的CSS属性。
{/*LogOne styled as an image to render the img tag*/}
{/*CSS is to define height, width, margin*/}
const LogoOne = styled.img`
margin-bottom : 12px;
background-color: none;
max-width: 700px;
min-height: 60px;
display: block;
width: 100%;
`;
注册按钮的样式
我们将使用悬停选择器来创建一个具有hover 效果的按钮，并在悬停时显示一个background-colour 。
{/*SignUp is styled to wrap around a text and appear as button.It is styled as anchor tag*/}
{/*CSS is to used define how it should appear*/}
const Signup = styled.a`
font-weight: bold;
color: #f9f9f9;
background-color: #0063e5;
margin-bottom: 12px;
width: 100%;
letter-spacing: 1.5px;
font-size: 25px;
padding: 16.5px 0;
border: 1px solid transparent;
border-radius: 4px;
&:hover{
background-color :#0483ee;
}
`;
描述的样式设计
为了给描述中的文本设置font-size 、line-height 、letter-spacing 和color ，我们将使用下面的CSS属性。
{/*holder for a paragraph of text to be styled as p tag. This will render a styled paragraph*/}
const Description = styled.p`
color: hsla(0, 0%, 95.3%, 1);
font-size: 14px;
margin: 0 0 24px;
line-height: 1.5em;
letter-spacing: 1.5;
`;
为LogoTwo设计样式
LogoTwo中的图片应该与LogoOne的样式设计要求相一致。
{/*It is styled as an image to render the img tag*/}
{/*CSS is to define height, width, margin*/}
const LogoTwo = styled.img`
margin-bottom : 20px;
max-width: 700px;
min-height: 60px;
display: inline-block;
vertical-align: bottom;
width: 100%;
`;
为了给我们的Header 组件中的Nav 和Logo 样式，请在Header.js 文件中的导出默认Header后立即添加以下代码。
样式化导航
{/*Styling with .nav to render the Nav tag*/}
const Nav = styled.nav`
position: fixed; //sets the nav as fixed regardless of any scroll behaviour.
top: 0;
left: 0;
right: 0;
height:70px; //defines the height of the navbar
background-color: #090b13; //gives the nav a background a color
display: flex;
justify-content: space-between; //creates space between nav elements
align-items: center;
padding: 0 36px;
letter-spacing: 16px;
z-index:3; //sets priority level for the navbar against other elements
`;
{/*Styling the Logo with .a to render the image as an anchor*/}
const Logo = styled.a`
padding:0;
width:80px;
margin-top:4px;
max-height:70px;
display: inline-block;
font-size:0;
img{
display: block;
width:100%;
}
`;
最后的页面，当加载到你的浏览器上时，应该如下图所示。
总结
在本教程中，我们探索了库中的styled-component及其优点。简单的设计和易于在React代码库中整合的造型使开发过程更加高效。我们最终使用styled-components创建了一个简单的登陆页面。
