react 组件构建

Who doesn't love beer? When you drink a great beer you want to tell someone. You definitely want to be able to remind yourself of the great beers you've had. Enter Brewstr, a beer rating application that allows you to enter a beer you're drinking and give it a rating. This way, you know what to get next time since there's no way you'll remember it later.

谁不喜欢啤酒？ 当您喝一杯优质啤酒时，您想告诉别人。 您绝对希望能够使自己想起曾经喝过的啤酒。 输入Brewstr，这是一款啤酒评级应用程序，可让您输入您正在喝的啤酒并为其评级。 这样，您知道下次会得到什么，因为以后您将永远不会记住它。

React gives the ability to create a component for rating that can be used and re-used anyplace a rating component is needed. You could even add it to your company's internal package management system so that the component is easily consumed by any React application that needs it.

React提供了创建评级组件的功能，该组件可以在需要评级组件的任何地方使用和重复使用。 您甚至可以将其添加到公司的内部软件包管理系统中，以便任何需要它的React应用程序都可以轻松使用该组件。

To build this app, you will need:

要构建此应用，您需要：

• A basic, working knowledge of React基本的React工作知识
• A free-forever Okta Developer Account永久免费的Okta开发人员帐户
• A Firebase Real-Time DatabaseFirebase实时数据库
• The create-react-app command-line toolcreate-react-app 命令行工具

搭建您的React应用 ( Scaffold Your React Application )

To get this thing kicked off, scaffold a basic React application by running the following command in the terminal in a folder where you'd like to store your code:

要启动此功能，请在终端中要存储代码的文件夹中运行以下命令，以搭建基本的React应用程序：

create-react-app brewstr

Once this program has created your React application's skeleton, change into your code directory and open it in your favorite code editor. I'll be using Visual Studio Code, so I'll run the following command:

一旦此程序创建了您的React应用程序的框架，请转到您的代码目录，然后在您喜欢的代码编辑器中将其打开。 我将使用Visual Studio Code，因此将运行以下命令：

code.

将Okta身份验证添加到您的React应用程序 ( Add Okta Authentication to Your React Application )

Now that you have a basic React app, you'll need to set up Okta to allow users to authenticate into your application. If you don't already have one, create a free-forever Okta developer account. Once you've logged in, take note of your Okta org URL on the top right of the dashboard. Then choose Applications from the main menu and click Add Application.

既然已经有了基本的React应用程序，则需要设置Okta以允许用户向您的应用程序进行身份验证。 如果您还没有，请创建一个永久的Okta开发者帐户 。 登录后，记下仪表板右上方的Okta组织URL。 然后从主菜单中选择“ 应用程序 ”，然后单击“ 添加应用程序” 。

In the wizard, choose Single-Page App from the available platforms and click Next. In the Application Settings page you'll want to name the app "Brewstr" and change the BaseURIs, and Login redirect URIs values to use port 3000, and click Done. Take note of the Client ID for your newly created app.

在向导中，从可用平台中选择“ 单 页应用程序 ”，然后单击“ 下一步” 。 在“ 应用程序设置”页面中，您将要命名应用程序“ Brewstr”并更改BaseURIs和Login重定向URIs值以使用端口3000，然后单击完成 。 记下您新创建的应用程序的客户端ID 。

Back in the React application, add two packages to your application:

返回React应用程序，将两个包添加到您的应用程序：

@media (max-width: 1280px) { .go-go-gadget-react img:first-child { display: none; } }@media (max-width: 780px) {.go-go-gadget-react { flex-direction: column; }.go-go-gadget-react img { margin-left: 0 !important; margin-bottom: 12px !important; }.header-thingy { margin-top: 20px; }.button-thingy { margin-left: 0 !important; margin-top: 12px !important; }} @media (max-width: 1280px) { .go-go-gadget-react img:first-child { display: none; } }@media (max-width: 780px) {.go-go-gadget-react { flex-direction: column; }.go-go-gadget-react img { margin-left: 0 !important; margin-bottom: 12px !important; }.header-thingy { margin-top: 20px; }.button-thingy { margin-left: 0 !important; margin-top: 12px !important; }}

yarn add @okta/okta-react@^1.2.3 react-router-dom@^5.1.2

Create a .env.local file at the root of the project and add the following to it:

在项目的根目录中创建一个.env.local文件，并将以下内容添加到其中：

REACT_APP_OKTA_CLIENT_ID={yourClientId}
REACT_APP_OKTA_ORG_URL=https://{yourOktaOrgUrl}

Then, in the index.js file, add the following snippet right below the import statements:

然后，在index.js文件中，在import语句下面添加以下代码段：

const oktaConfig = {issuer: `${process.env.REACT_APP_OKTA_ORG_URL}/oauth2/default`,redirect_uri: `${window.location.origin}/implicit/callback`,client_id: process.env.REACT_APP_OKTA_CLIENT_ID,
};

Add some imports to your index.js file:

将一些导入添加到您的index.js文件中：

import { BrowserRouter } from 'react-router-dom';
import { Security } from '@okta/okta-react';

Then replace the entire ReactDOM.render statement with the following:

然后，将整个ReactDOM.render语句替换为以下内容：

ReactDOM.render(<BrowserRouter><Security {...oktaConfig}><App /></Security></BrowserRouter>,document.getElementById('root')
);

This sets up Okta to handle user authentication. It also makes it easy to get information about the logged in user by wrapping the App component in the Security component. Now you just have to use it.

这将Okta设置为处理用户身份验证。 通过将App组件包装在Security组件中，还可以轻松获取有关已登录用户的信息。 现在，您只需要使用它。

To start simple, just change the App.js file to look like this:

为了简单App.js ，只需将App.js文件更改为如下所示：

import React from 'react';
import { Link, Route } from 'react-router-dom';
import { SecureRoute, ImplicitCallback } from '@okta/okta-react';import './App.css';function App() {return (<div className="App"><nav><Link to="/">Home</Link><Link to="/rating">Rate</Link></nav><main><Route exact path="/" component={()=> 'Home Page'} /><SecureRoute exact path="/rating" component={()=>'Rating Page'} /><Route path="/implicit/callback" component={ImplicitCallback} /></main></div>);
}export default App;

Make sure you've logged out of your Okta account, and then run the application with:

确保您已经退出Okta帐户，然后使用以下命令运行该应用程序：

yarn start

When you click on the Rate menu item, it should redirect you to log in with Okta. You can use the credentials you use to log in to your Okta dashboard. If you don't get prompted to log in, it may be because the application still has you logged in. Go to your Okta dashboard and log out, then clear your tokens in the dev tools under Application, LocalStorage, http://localhost:3000. Then try to go to the Rate page again and make sure it prompts you to log in.

单击“ 速率”菜单项时，它应将您重定向到Okta登录。 您可以使用用于登录Okta仪表板的凭据。 如果未提示您登录，则可能是因为该应用程序仍在登录。转到Okta仪表板并注销，然后在Application ， LocalStorage ， http：// localhost下的dev工具中清除令牌。 ：3000 。 然后尝试再次进入“ 费率”页面，并确保它提示您登录。

NOTE: If you're still having problems getting the login to work, go back and double-check all your values and code from the previous steps.

注意：如果仍然无法使登录正常工作，请返回并仔细检查前面步骤中的所有值和代码。

设置Firebase实时数据存储 ( Set Up a Firebase Real-Time Datastore )

You'll be storing your app's beer ratings in a Firebase Real-Time Data Store, so you'll need an account there. Once you've signed up and logged in, click the Add Project tile and choose the name "Brewstr", then click Continue. On the next screen, turn off analytics (since it's a test project), then click Create Project. This may take a few moments to get created. Once you see, "Your new project is ready", click Continue.

您将在Firebase实时数据存储区中存储应用程序的啤酒等级，因此您将需要一个帐户 。 注册并登录后，单击“ 添加项目”图块并选择名称“ Brewstr”，然后单击“ 继续” 。 在下一个屏幕上，关闭分析（因为它是一个测试项目），然后点击创建项目 。 这可能需要一些时间才能创建。 一旦看到“您的新项目已准备就绪”，请点击继续 。

You will then be taken to a screen that has three white icons for "Getting Started". Choose the icon for web apps that should have </> as the text. You'll need to register the project you just created with Firebase, so put in the name of your app again, "Brewstr", and click Continue. You'll see a chunk of code there, just copy it to an empty text file for now.

然后，您将进入一个带有三个白色图标的屏幕，用于“入门”。 选择应该以</>作为文本的Web应用程序图标。 您需要注册刚刚使用Firebase创建的项目，因此再次在应用程序名称中输入“ Brewstr”，然后点击继续 。 您将在此处看到一大堆代码，现在只需将其复制到一个空文本文件即可。

Now click Database in the left-hand menu and scroll down to Or choose Realtime Database. In that block, click on Create database and in the dialog that pops up choose Start in test mode then click Enable. The permissions here are completely open for reads and writes. Obviously, this is not the way you'll want to set it up for production, but in the case of testing, this is the easiest set up.

现在，单击左侧菜单中的数据库 ，然后向下滚动至或选择实时数据库 。 在该块中，单击“ 创建数据库” ，然后在弹出的对话框中选择“ 以测试模式启动”，然后单击“ 启用” 。 此处的权限对读取和写入完全开放。 显然，这不是您要为生产设置的方式，但是在测试的情况下，这是最简单的设置。

Back in the editor, add some new keys to the .env.local file:

回到编辑器中，向.env.local文件中添加一些新键：

REACT_APP_FIREBASE_APIKEY={yourApiKey}
REACT_APP_FIREBASE_AUTH_DOMAIN={yourAuthDomain}
REACT_APP_FIREBASE_DB_URL={yourDatabaseUrl}
REACT_APP_FIREBASE_PROJECT_ID={yourProjectId}
REACT_APP_FIREBASE_STORAGE_BUCKET={yourStorageBucket}
REACT_APP_FIREBASE_MESSAGE_SENDER_ID={yourMessagSenderId}
REACT_APP_FIREBASE_APP_ID={yourAppId}

Add the firebase package to your app:

将firebase程序包添加到您的应用程序：

yarn add firebase@7.5.0

Now you can create a JavaScript file to set up your database connection. Create a file called firebase.js in your src directory.

现在，您可以创建一个JavaScript文件来建立数据库连接。 在src目录中创建一个名为firebase.js的文件。

import * as firebase from 'firebase';var firebaseConfig = {apiKey: process.env.REACT_APP_FIREBASE_API_KEY,authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,databaseURL: process.env.REACT_APP_FIREBASE_DB_URL,projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGE_SENDER_ID,appId: process.env.REACT_APP_FIREBASE_APP_ID
};firebase.initializeApp(firebaseConfig);
const databaseRef = firebase.database().ref();
export const BrewstrRef = databaseRef.child('ratings');

This will set up the connection to the data store and allow you to use it wherever you need.

这将建立与数据存储的连接，并允许您在需要的地方使用它。

NOTE: You may need to stop the application from running (with a CTRL+c) and restart it so it can pick up the environment variables you put in .env.local.

注意：您可能需要停止运行应用程序（使用CTRL + c）并重新启动它，以便它可以拾取您在.env.local中放置的环境变量。

创建星级评分组件 ( Create a Star Rating Component )

The beauty of React is being able to reuse common components and compose pages from those components. Since you're creating a beer rating site, you'll create a star rating component that will handle collecting users' ratings.

React的优点在于能够重用常见组件并从这些组件组成页面。 由于您正在创建啤酒评分网站，因此您将创建一个星级评分组件，该组件将处理收集用户的评分。

Start by creating a folder called components in the src directory and add a rater folder inside that. Then add two files: star-rating.jsx and star-rating.css. In the star-rating.jsx file add the following contents:

首先在src目录中创建一个名为components的文件夹，然后在其中添加一个rater文件夹。 然后添加两个文件： star-rating.jsx和star-rating.css 。 在star-rating.jsx文件中，添加以下内容：

import React, { Component } from 'react';import './star-rating.css';class StarRating extends Component {constructor(props) {super(props);this.state = {currentRating: this.props.currentRating};}componentDidMount() {this.setRating();}hoverHandler = ev => {const stars = ev.target.parentElement.getElementsByClassName('star');const hoverValue = ev.target.dataset.value;Array.from(stars).forEach(star => {star.style.color = hoverValue >= star.dataset.value ? 'yellow' : 'gray';});};setRating = ev => {const stars = this.refs.rating.getElementsByClassName('star');Array.from(stars).forEach(star => {star.style.color =this.state.currentRating >= star.dataset.value ? 'yellow' : 'gray';});};starClickHandler = ev => {let rating = ev.target.dataset.value;this.setState({ currentRating: rating }); // set state so the rating stays highlightedif(this.props.onClick){this.props.onClick(rating); // emit the event up to the parent}};render() {return (<divclassName="rating"ref="rating"data-rating={this.state.currentRating}onMouseOut={this.setRating}>{[...Array(+this.props.numberOfStars).keys()].map(n => {return (<spanclassName="star"key={n+1}data-value={n+1}onMouseOver={this.hoverHandler}onClick={this.starClickHandler}>★</span>);})}</div>);}
}export default StarRating;

The import statements should be self-explanatory. The class component starts by setting up the basic state with a prop passed in that allows parent components to set an initial rating. In the componentDidMount() function the this.setRating() function is called so the initial rating is reflected in the number of stars highlighted when the component loads.

import声明应该是不言自明的。 通过用设置基本状态的类组件启动prop在于通过允许在父组件设置初始等级。 在componentDidMount()函数中， this.setRating()函数，因此初始评级反映在加载组件时突出显示的星数。

The next three functions are handlers for the rating component. The hoverHandler() function gets all the star elements in the components and as the user hovers and highlights all the stars up to (and including) the star being hovered over.

接下来的三个函数是评级组件的处理程序。 hoverHandler()函数获取组件中的所有star元素，并且当用户将鼠标悬停并突出显示所有（直到包括）被悬停的星星时，所有star都会突出显示。

The setRating() function is called from componentDidMount() to highlight the stars with the initial rating. It is also called as an event handler from the component when the user moves their mouse away from the rating component without choosing a rating. This will reset the highlighting back to the current rating.

从componentDidMount()调用setRating()函数以突出显示具有初始等级的星星。 当用户将鼠标从等级组件移开而不选择等级时，它也被称为组件的事件处理程序。 这会将突出显示重置为当前等级。

The starClickHandler() is used by the component when a user clicks a rating. It sets the state's currentRating value so that the highlighting is locked in when the user moves their mouse away from the component. It also emits an event up to the parent's onClick handler that was passed to the component and passes up the rating that the user clicked on.

当用户单击评分时，组件将使用starClickHandler() 。 它设置状态的currentRating值，以便当用户将鼠标从组件移开时突出显示被锁定。 它还向父级的onClick处理程序发出一个事件，该事件已传递给组件，并向上传递用户单击的等级。

The render() method displays a container to hold the stars and then it displays the requested number of stars, using a property passed in from the parent component. it loops through an array with that number of elements and gives each star a value of the current index + 1 to account for the zero-based nature of arrays. The relevant portion is:

render()方法显示一个容器来容纳星星，然后使用从父组件传入的属性来显示请求的星星数量。 它遍历具有该数量元素的数组，并为每个恒星赋予当前索引值+1，以说明数组从零开始的本质。 相关部分是：

{[...Array(+this.props.numberOfStars).keys()].map(n => {return (<spanclassName="star"key={n+1}data-value={n+1}onMouseOver={this.hoverHandler}onClick={this.starClickHandler}>★</span>);
})}

This just uses the spread operator ... on a new array with a size based on the number of stars requested. Each star gets wired to the hoverHandler() and starClickHandler() event handlers. The ★ is just the Unicode value of a star. I also added a little style to my stars in the star-rating.css file:

这仅在新阵列上使用散布运算符... ，其大小取决于请求的星数。 每个星星都连接到hoverHandler()和starClickHandler()事件处理程序。 ★ 只是星星的Unicode值。 我还在star-rating.css文件中为star-rating.css添加了一些样式：

.star {color: gray;
}

This just sets the initial color of the stars to gray. You don't have to do this, but I think it makes it look a lot nicer and it can help if you're putting the star rater component on a weird colored background.

这只是将星星的初始颜色设置为灰色。 您不必执行此操作，但是我认为它看起来要好得多，并且如果您将星级评分器组件放在怪异的彩色背景上也可以提供帮助。

消耗等级成分 ( Consume the Rating Component )

Now that you've got a rating component, you'll want to put it on a page. Create a folder in src called pages and inside that add a new rating folder with a rating-page.jsx and rating-page.css file.

现在，您已经有了一个评分组件，您需要将其放在页面上。 在src创建一个名为pages的文件夹，并在其中创建一个包含rating-page.jsx和rating-page.css文件的新rating文件夹。

The contents of the rating-page.jsx should be:

rating-page.jsx的内容应为：

import React, { Component } from 'react';
import { withAuth } from '@okta/okta-react';import { BrewstrRef } from '../../firebase';
import StarRating from '../../components/rater/star-rating';
import './rating-page.css';class RatingPage extends Component {constructor(props) {super(props);this.state = {name: '',description: '',rating: 0,user: ''};}async componentDidMount(){const user = await this.props.auth.getUser();this.setState({user:user.email});}handleChange = ev => {this.setState({[ev.target.name]: ev.target.value});};setRating = rating => {this.setState({ rating: rating });};saveRating = () => {BrewstrRef.push().set(this.state).then(() => {this.props.history.push('/ratinglist');});};render() {return (<div className="rating-form"><div className="heading">Rate A Beer</div><div className="form-input"><label htmlFor="name">Beer:</label><inputtype="text"name="name"id="name"onChange={this.handleChange}/></div><div className="form-input"><label htmlFor="description">Description:</label><textareaname="description"id="description"onChange={this.handleChange}/></div><div className="form-input rating"><label htmlFor="rating">Rating:</label><StarRatingnumberOfStars="5"currentRating="0"onClick={this.setRating}/></div><div className="actions"><button type="submit" onClick={this.saveRating}>Submit Rating</button></div></div>);}
}export default withAuth(RatingPage);

The import statements bring in the withAuth higher-order component from the @okta/okta-react package. This allows you to get the currently logged in user when saving ratings for that user. This also brings in the Firebase set up and the StarRating component.

import语句从@okta/okta-react包中引入withAuth高阶组件。 这样可以在保存该用户的等级时获得当前登录的用户。 这也带来了Firebase设置和StarRating组件。

At the bottom of the file, you wrap the RatingPage component with the withAuth higher-order component. This allows you to get the currently logged in user in the componentDidMount() function and add the user's email address to the state. This will be saved with their ratings so that when they go to the RatingList page, they will only see their ratings.

在文件的底部，将RatingPage组件与withAuth高阶组件一起包装。 这使您可以在componentDidMount()函数中获取当前登录的用户，并将该用户的电子邮件地址添加到该状态。 这将与他们的评级一起保存，以便当他们进入RatingList页面时，他们只会看到其评级。

The handleChange() function handles the changing of the text values for the beer name and description in the component's form. The setRating() handler is what is passed to the rating component so that when a user clicks on a rating, the value is propagated back to the parent and, in this case, is added to the state.

handleChange()函数处理组件形式中啤酒名称和描述的文本值的更改。 setRating()处理函数是传递给评级组件的内容，以便当用户单击评级时，该值将传播回父级，在这种情况下，将其添加到状态中。

The saveRating() function gets the reference to the Firebase store and pushes a new rating into the collection then the application is routed to the RatingList page.

saveRating()函数获取对Firebase存储的引用，并将新评级推送到集合中，然后将应用程序路由到RatingList页面。

The render() method is pretty standard except where you add the StarRating component. You set the numberOfStars to five for this rating system, then set the currentRating to zero. You could set it to two or three if you think that looks better. Finally, the reference to the click handler is passed to the StarRating component, so that when a user chooses a rating, the value is bubbled back up to the click handler on this page component.

除了在其中添加StarRating组件的位置之外， render()方法是非常标准的。 您为此评级系统将numberOfStars设置为5，然后将currentRating设置为0。 如果您认为效果更好，可以将其设置为两个或三个。 最后，对单击处理程序的引用将传递到StarRating组件，这样，当用户选择评分时，该值就会冒泡返回到此页面组件上的单击处理程序。

The stylesheet for this page is unremarkable. It just contains some styles to make it more readable.

此页面的样式表不明显。 它仅包含一些样式以使其更具可读性。

.rating-form {width: 50%;margin: 1rem auto;padding: 1rem;
}.heading {padding: .5rem;background-color: black;color: white;font-size: 1.5rem;margin-bottom: 1rem;
}.form-input {margin: 1rem;
}.form-input label {font-weight: bold;display: block;
}.form-input input,
.form-input textarea {font-size: 1.5rem;width: 100%;
}.form-input textarea {height: 5rem;
}.form-input.rating {text-align: right;
}.form-input.rating .rating {font-size: 2rem;
}.actions {padding: 1rem;text-align: right;
}.actions button {padding: .5rem;
}

The only thing left is to add a list of the user's ratings. Add a new folder under pages called rating-list and add two files: rating-list.jsx and rating-list.css. First, the CSS file:

剩下的唯一事情就是添加用户等级列表。 在名为rating-list pages下添加一个新文件夹，并添加两个文件： rating-list.jsx和rating-list.css 。 首先，CSS文件：

table {width: 80%;margin: 1rem auto;font-size: 1.25rem;border-collapse: collapse;
}table thead {background-color: black;color: #FFF;
}table, th, td {border: 1px solid black;
}th, td {padding: .5rem;
}td.rating-value {text-align: center;
}

Then the actual page component:

然后是实际的页面组件：

import React, { Component } from 'react';
import { withAuth } from '@okta/okta-react';
import {BrewstrRef} from '../../firebase';
import './rating-list.css';class RatingsListPage extends Component {constructor(props){super(props);this.state = {ratings: [],user:''};}async componentDidMount(){const user = await this.props.auth.getUser();BrewstrRef.orderByChild('user').equalTo(user.email).on('value', snap => {const response = snap.val();const ratings = [];for(let rating in response){ratings.push({id: rating, ...response[rating]});}this.setState({ratings: ratings});});}render(){return (<table className="ratings-list"><thead><tr><th>Beer</th><th>Description</th><th>Rating</th></tr></thead><tbody>{this.state.ratings.map((rating) => {return (<tr className="rating" key={rating.id}><td>{rating.name}</td><td>{rating.description}</td><td className="rating-value">{rating.rating}</td></tr>)})}</tbody></table>)}
}export default withAuth(RatingsListPage);

Again, you're bringing in the Okta and Firebase imports. This componentDidMount() is getting the currently logged in user and passing it to Firebase to get a list of the ratings that this user has entered. All queries to Firebase return a "snapshot" represented here by the variable snap and it is pushed onto an array and then the state is set with that array. If you push each "record" onto the array in the state object, the component will redraw each time one is pushed. That's the reason you push onto another array and then only update the state once. The render() function merely lists the ratings in a table.

同样，您要引入Okta和Firebase import 。 这个componentDidMount()正在获取当前登录的用户，并将其传递给Firebase以获取该用户输入的评级的列表。 对Firebase的所有查询都返回一个“快照”，在这里由变量snap表示，并将其推送到数组上，然后使用该数组设置状态。 如果将每个“记录”推入状态对象中的数组，则每次推入该组件时，组件都会重绘。 这就是您推送到另一个数组，然后仅更新一次状态的原因。 render()函数仅在表中列出评级。

将路由添加到实际组件 ( Add Routing to the Actual Components )

If you remember, all the routing is going to "fake" components that just spit out text right now. You'll need to go back to the App.js file and make sure the routes are hooked to the components you just created. so that the final file contents are:

如果您还记得的话，所有的路由都将“伪造”现在吐出文本的组件。 您需要返回App.js文件，并确保将路由连接到刚刚创建的组件。 这样最终文件的内容为：

import React from 'react';
import { Link, Route } from 'react-router-dom';
import { SecureRoute, ImplicitCallback } from '@okta/okta-react';import RatingPage from './pages/rating/rating-page';
import RatingsListPage from './pages/rating-list/rating-list';
import './App.css';function App() {return (<div className="App"><nav><Link to="/">Home</Link><Link to="/rating">Rate</Link><Link to="/ratinglist">My Ratings</Link></nav><main><Route exact path="/" component={()=> 'Home Page')} /><SecureRoute exact path="/rating" component={RatingPage} /><SecureRoute exact path="/ratinglist" component={RatingsListPage} /><Route path="/implicit/callback" component={ImplicitCallback} /></main></div>);
}export default App;

Here, you just added the imports for the component pages you just created, then updated or added routes to those components.

在这里，您只是为刚刚创建的组件页面添加了imports ，然后更新或添加了到这些组件的路由。

I also added some styling to my menu in App.css in the src folder:

我还在src文件夹的App.css中的菜单中添加了一些样式：

nav {background-color: #333;font-size: 1.5rem;
}nav a {display: inline-block;color: white;padding: 1rem;text-decoration: none;
}nav a:hover {background-color: black;
}

评价一些啤酒 ( Rate Some Beers )

Now when you run your application, you will be able to go to the Rate menu item and add a beer and a rating. If you're not logged in, it will prompt you to do so. When you've entered a beer and rating, you'll be routed to the listing page with a listing of all the beers you've rated.

现在，当您运行您的应用程序时，您将可以转到“ 费率”菜单项并添加啤酒和评分。 如果您尚未登录，它将提示您进行登录。 输入啤酒并进行评分后，您将被转到列出页面，其中列出了您已评分的所有啤酒。

So what does this all mean? What have you learned? You learned how to create a React component with all the functionality encapsulated within it. You also learned how to pass values to the component and emit values back up to the consuming component. You also learned how to connect to a Firebase Realtime data store and read and write from it. That's pretty good for a couple of hours of work!

那么，这意味着什么？ 你学到了什么？ 您学习了如何创建一个具有封装在其中的所有功能的React组件。 您还学习了如何将值传递给组件并将值发送回使用组件。 您还学习了如何连接到Firebase Realtime数据存储以及如何对其进行读写。 这对于几个小时的工作来说是相当不错的！

使用React，Firebase和Okta进行更多工作以实现安全身份验证 ( Do Even More with React, Firebase, and Okta for Secure Authentication )

Check out more tutorials on these subjects:

查看有关这些主题的更多教程：

• Braden shows some Chuck Norris jokes布雷登展示了查克·诺里斯的一些笑话
• Matt Raible takes you mobile with React NativeMatt Raible通过React Native带您移动
• Matt also shows you how to build a backend for React in Spring BootMatt还向您展示了如何在Spring Boot中为React构建后端
• Braden shows some React Redux布雷登展示了一些React Redux
• Heather discusses being a generalist vs. being a specialist希瑟讨论成为通才与专家

If you have any questions, please don’t hesitate to leave a comment below, or ask us on our Okta Developer Forums. Don't forget to follow us on Twitter @OktaDev, on Facebook and on YouTube!

如有任何疑问，请随时在下面发表评论，或在我们的Okta开发者论坛上向我们提问。 不要忘记在Twitter @ OktaDev ， Facebook和YouTube上关注我们！

翻译自: https://scotch.io/tutorials/build-a-star-rating-component-for-react

react 组件构建