react數(shù)據(jù)從本地讀取

In this tutorial, we’re going to cover how to connect to a spreadsheet hosted on Google, display that information inside a React application, and deploy it to Netlify.

在本教程中，我們將介紹如何連接到Google托管的電子表格，如何在React應(yīng)用程序中顯示該信息并將其部署到Netlify。

Skip to “The Setup” if you don’t care where the data will be coming from or why I chose to build this. I won’t be mad, I promise.

如果您不在乎數(shù)據(jù)將來(lái)自何處或?yàn)槭裁催x擇構(gòu)建它，則跳至“設(shè)置”。 我保證，我不會(huì)生氣。

Right now the final result looks like this, but I’ll be adding more features to it shortly.

現(xiàn)在，最終結(jié)果看起來(lái)像這樣，但是我很快會(huì)為其添加更多功能。

為什么 (The Why)

I love cars ? ??. If you’re even slightly interested in cars, you’ve probably at some point stumbled upon Doug Demuro’s Youtube channel. He reviews a wide range of cars anywhere from a $3 Million Ferrari Enzo to a 3 wheeled BMW Isetta. Doug’s format is a little bit different than most user reviews. His roughly 20 minute videos have three main points:

我愛(ài)汽車(chē)嗎？ ? 如果您甚至對(duì)汽車(chē)不太感興趣，那么您可能會(huì)偶然發(fā)現(xiàn)Do ug Demuro的Youtube頻道。 他評(píng)論了各種各樣的汽車(chē)，包括價(jià)值300 萬(wàn)美元的法拉利Enzo t oa 3 輪式BMW Isetta。 Doug的格式與大多數(shù)用戶(hù)評(píng)論略有不同。 他大約20分鐘的視頻有三個(gè)要點(diǎn)：

• Interesting quirks and features: about 70% of the video is him taking about the car’s exterior and interior quirks. These can range from a paragraph in the owner’s manual to an interesting shape of the break lights.
  有趣的怪癖和功能：大約70％的視頻是他關(guān)于汽車(chē)外觀和內(nèi)部怪癖的。 這些范圍可以從使用手冊(cè)中的段落到有趣的斷燈形狀。

• Driving: about 20% of the video is Doug taking the car out on the road and making funny faces when he accelerates. He also talks about the interior noise, handling, speed, and so on.
  駕駛：大約有20％的視頻是道格將汽車(chē)駛出公路，并在他加速時(shí)做鬼臉。 他還談到了室內(nèi)噪音，處理，速度等。

• The DougScore: Doug created a spreadsheet with all the cars he’s ever reviewed (since creating the scoring system) and ranked all of them using his own system. It’s broken down into two categories:

  DougScore：Doug創(chuàng)建了一個(gè)電子表格，其中包含他曾經(jīng)審查過(guò)的所有汽車(chē)(自創(chuàng)建計(jì)分系統(tǒng)以來(lái))，并使用自己的系統(tǒng)對(duì)所有汽車(chē)進(jìn)行排名。 它分為兩類(lèi)：

  * Weekend Score: Essentially how much fun the car is.

  *周末分?jǐn)?shù)：從本質(zhì)上講，這輛車(chē)有多有趣。

  * Daily Score: Essentially how practical the car is.

  *每日得分：從本質(zhì)上講，汽車(chē)的實(shí)用性。

That’s why, in my opinion, he can get over 1.5M views on a 25 minute video of a minivan ???. Since the videos are so quirky, and Doug himself is pretty quirky too, his following has come up with some creative comments. My favourite are the “Doug is the type of guy to…” remarks, like those above.

我認(rèn)為，這就是為什么他可以在25分鐘的微型貨車(chē)視頻中獲得超過(guò)150萬(wàn)的觀看次數(shù)。 由于視頻是如此古怪，而且道格本人也很古怪，因此他的追隨者提出了一些富有創(chuàng)意的評(píng)論。 我最喜歡的是“道格是那種……”。

And now, to all of you who have stuck around after that intro that has nothing to do with building an app, Google Sheets API, or React, here’s what I am on about.

現(xiàn)在，對(duì)于所有在介紹之后一直停留在與構(gòu)建應(yīng)用程序，Google Sheets API或React無(wú)關(guān)的人來(lái)說(shuō)，這就是我要做的。

設(shè)置 (The Setup)

Doug keeps his spreadsheet on Google Sheets, and anyone with a link can access it. To me, it was hard to navigate. So I decided to see if there was a way to extend it and add some additional functionality.

道格將電子表格保存在Google表格中，任何有鏈接的人都可以訪問(wèn)它。 對(duì)我來(lái)說(shuō)，這很難導(dǎo)航。 因此，我決定看看是否有擴(kuò)展它并添加一些其他功能的方法。

React創(chuàng)建應(yīng)用 (React Create App)

Facebook’s React boilerplate will get us started fairly quickly without the need to configure any backends. In your Terminal of choice (Hyper for me), go ahead and put in:

Facebook的React樣板將使我們相當(dāng)快速地開(kāi)始，而無(wú)需配置任何后端。 在您選擇的終端機(jī)(對(duì)我來(lái)說(shuō)， 超級(jí) )中，繼續(xù)輸入：

npx create-react-app doug-score cd doug-score yarn start

(Or npm start, whatever floats your boat but I'll be using yarn.)

(或者npm start ，無(wú)論您的船如何漂浮，但我將使用毛線。)

Open up the folder in your editor of choice (VS Code for me) and head over to App.js. We’re going to create a separate component called CarList , putting it inside a components folder and adding it to App .

在您選擇的編輯器(對(duì)我而言是VS Code)中打開(kāi)文件夾，然后轉(zhuǎn)到App.js 我們將創(chuàng)建一個(gè)單獨(dú)的名為CarList組件，將其放在components文件夾中，并將其添加到App 。

import React, { Component } from "react"; import logo from "./logo.svg"; import "./App.css"; import CarList from "./components/CarList"; class App extends Component {render() {return (<div className="App"><header className="App-header"><img src={logo} className="App-logo" alt="logo" /><h1 className="App-title">Welcome to React</h1></header><CarList /></div>);} } export default App;

For now, this is what CarList component will look like:

現(xiàn)在，這是CarList組件的外觀：

import React, { Component } from 'react'; class CarList extends Component {render() {return (<div>This will be the car list</div>);} }

Google Sheets API (Google Sheets API)

Let’s go ahead and create a new project on Google. I’ve called it doug-score. Once it’s been created, in the APIs box, click “Go to APIs overview.” Once you click “Enable APIs and Services” you’ll be presented with the API Library. We’ll go ahead and search for “Google Sheets API.” Once you click into it, click “Enable,” and after it’s processed you should see this page.

讓我們繼續(xù)， 在Google上創(chuàng)建一個(gè)新項(xiàng)目 。 我稱(chēng)它為doug-score 。 創(chuàng)建完成后，在“ API”框中，單擊“轉(zhuǎn)到API概述”。 單擊“啟用API和服務(wù)”后，您將看到API庫(kù)。 我們將繼續(xù)搜索“ Google Sheets API”。 單擊后，單擊“啟用”，處理完成后，您應(yīng)該會(huì)看到此頁(yè)面。

In the sidebar, head over to “Credentials,” click the “Create credentials” button, and select “API Key.” Click the “Restrict Key” and set a name for it (I set it to “DougScore”). Under “Application Restrictions,” we’re going to set it to “HTTP referrers” and add http://localhost:3000 for now. Under “API Restrictions” select the “Google Sheets API” and save. We should be good to go on this end.

在邊欄中，轉(zhuǎn)到“憑據(jù)”，單擊“創(chuàng)建憑據(jù)”按鈕，然后選擇“ API密鑰”。 單擊“限制鍵”并為其設(shè)置一個(gè)名稱(chēng)(我將其設(shè)置為“ DougScore”)。 在“應(yīng)用程序限制”下，我們將其設(shè)置為“ HTTP Referrers”，并立即添加http://localhost:3000 。 在“ API限制”下，選擇“ Google Sheets API”并保存。 我們應(yīng)該為此而努力。

連接 (The Connection)

Now that we have an API key, head back over to the application code and create a new file called config.js . Input your API key and the spreadsheet ID into it.

現(xiàn)在我們有了一個(gè)API密鑰，回到應(yīng)用程序代碼并創(chuàng)建一個(gè)名為config.js的新文件。 在其中輸入您的API密鑰和電子表格ID。

export default {apiKey: "YOUR_API_KEY",discoveryDocs: ["https://sheets.googleapis.com/$discovery/rest?version=v4"],spreadsheetId: "1KTArYwDWrn52fnc7B12KvjRb6nmcEaU6gXYehWfsZSo" };

Now, we’ll need the Google API library, so we’ll use our index.html file inside the public library after our <div id="root"></div>

現(xiàn)在，我們需要Google API庫(kù)，因此在<div id="root"> </ div>之后，我們將在public庫(kù)中使用index.html文件

<!DOCTYPE html> <html lang="en"><head><!-- Stuff --></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script src="https://apis.google.com/js/api.js"></script><!-- Stuff --></body> </html>

This will give us access to window.gapi which we’ll use to connect to the Sheets API. For more information on it, head over to Google’s Docs.

這將使我們能夠訪問(wèn)window.gapi ，我們將使用它來(lái)連接到Sheets API。 有關(guān)更多信息，請(qǐng)?jiān)L問(wèn)Google的文檔 。

數(shù)據(jù) (The Data)

Now that we have access to the API, let’s establish the connection to it. The best place to do that would be inside the componentDidMount lifecycle of the CarList component we created earlier. Let’s head over there.

現(xiàn)在我們已經(jīng)可以訪問(wèn)該API，讓我們建立與其的連接。 最好的選擇是在我們之前創(chuàng)建的CarList組件的componentDidMount生命周期內(nèi)。 我們?nèi)ツ沁叀?

componentDidMount() {// 1. Load the JavaScript client library.window.gapi.load("client", this.initClient); }

window.gapi.load accepts a callback so our initClient function looks like this:

window.gapi.load接受回調(diào)，因此我們的initClient函數(shù)如下所示：

initClient = () => {// 2. Initialize the JavaScript client library.window.gapi.client.init({apiKey: config.apiKey,// Your API key will be automatically added to the Discovery Document URLs.discoveryDocs: config.discoveryDocs}).then(() => {// 3. Initialize and make the API request.load(this.onLoad);}); };

A few things are introduced here. config is coming from the config.js file we created earlier, so don’t forget to do import config from “../config”; at the top of the CarList.js file.

這里介紹一些事情。 config來(lái)自我們之前創(chuàng)建的config.js文件，因此不要忘記import config from “../config”; 在CarList.js文件的頂部。

load is a function that we’ll be creating now. It will be in charge of connecting to the right spreadsheet, formatting the data correctly, and returning it to the component within the this.onLoad callback (or returning an error if we messed something up).

load是我們現(xiàn)在要?jiǎng)?chuàng)建的函數(shù)。 它將負(fù)責(zé)連接到正確的電子表格，正確格式化數(shù)據(jù)，并將其返回到this.onLoad回調(diào)中的組件(或者如果我們搞砸了則返回錯(cuò)誤)。

I wanted to separate that logic from the component to keep the files small and fairly readable. Let’s create a new folder called helpers inside src and put a spreadsheet.js file in there.

我想將該邏輯與組件分開(kāi)，以使文件更小且更易讀。 讓我們?cè)趕rc創(chuàng)建一個(gè)名為helpers的新文件夾，然后在其中放置一個(gè)spreadsheet.js 。

import config from "../config"; /*** Load the cars from the spreadsheet* Get the right values from it and assign.*/ export function load(callback) {window.gapi.client.load("sheets", "v4", () => {window.gapi.client.sheets.spreadsheets.values.get({spreadsheetId: config.spreadsheetId,range: "Sheet1!A4:T"}).then(response => {const data = response.result.values; const cars = data.map(car => ({year: car[0],make: car[1],model: car[2]})) || []; callback({cars});},response => {callback(false, response.result.error);});}); }

So here we’re invoking the sheets API and getting values from the spreadsheet by passing the spreadsheetId and the range . The promise returns two responses: one if there is data and one if there is an error. The response values are an array of arrays where each one is a row within the spreadsheet.

因此，在這里，我們要調(diào)用工作表API，并通過(guò)傳遞spreadsheetId和range從電子表格中獲取值。 承諾返回兩個(gè)響應(yīng)：一個(gè)響應(yīng)(如果有數(shù)據(jù))和一個(gè)錯(cuò)誤(有錯(cuò)誤)。 響應(yīng)值是一個(gè)數(shù)組數(shù)組，其中每個(gè)都是電子表格中的一行。

顯示器 (The Display)

Now that we have data back inside the CarList component, we can start setting up the display for it. Inside the initClient function, we had the load(this.onLoad) function, so let’s pick up there.

現(xiàn)在我們已經(jīng)有數(shù)據(jù)返回到CarList組件內(nèi)部，我們可以開(kāi)始為其設(shè)置顯示了。 在initClient函數(shù)內(nèi)部，我們有l(wèi)oad(this.onLoad)函數(shù)，因此讓我們開(kāi)始學(xué)習(xí)。

onLoad = (data, error) => {if (data) {const cars = data.cars;this.setState({ cars });} else {this.setState({ error });} };

If the load function within spreadsheet.js returns data, we set the cars state to that data. Otherwise we set an error state to show to our users that something went wrong.

如果spreadsheet.js .js中的load函數(shù)返回?cái)?shù)據(jù)，則將cars狀態(tài)設(shè)置為該數(shù)據(jù)。 否則，我們將設(shè)置一個(gè)error狀態(tài)，以向用戶(hù)顯示出了問(wèn)題。

默認(rèn)狀態(tài) (Default state)

Since data won’t be available instantly, we need to set up a default state for our component.

由于無(wú)法立即獲得數(shù)據(jù)，因此我們需要為組件設(shè)置默認(rèn)狀態(tài)。

state = {cars: [],error: null }

渲染 (Render)

Now inside the render function we can display the state:

現(xiàn)在，在render函數(shù)中，我們可以顯示狀態(tài)：

render() {const { cars, error } = this.state;if (error) {return <div>{this.state.error}</div>;}return (<ul>{cars.map((car, i) => (<li key={i}>{car.year} {car.make} {car.model}</li>))}</ul>); }

Here we’re destructuring the state (ES6 FTW ??) and first checking if there is an error. If not, we’re mapping over the cars and displaying them in an unordered list.

在這里，我們要解構(gòu)狀態(tài)(ES6 FTW ??)，并首先檢查是否存在錯(cuò)誤。 如果沒(méi)有，我們將在汽車(chē)上繪制地圖，并將其顯示在無(wú)序列表中。

部署方式 (Deployment)

Now that we have our super beautiful list of cars Doug has reviewed, we can go ahead and share it with the world. Since it will be a static website, I am going to deploy it to Netlify using their CLI. For that we’re going to stop our localhost and run the following commands:

現(xiàn)在我們有了道格已審查的超級(jí)精美汽車(chē)清單，我們可以繼續(xù)與世界分享。 由于它將是一個(gè)靜態(tài)網(wǎng)站，因此我將使用其CLI將其部署到Netlify 。 為此，我們將停止本地主機(jī)并運(yùn)行以下命令：

yarn build

This will create a build folder within the application which will be production ready. Now all you have to do is:

這將在應(yīng)用程序中創(chuàng)建一個(gè)準(zhǔn)備就緒的build文件夾。 現(xiàn)在您要做的就是：

npm install netlify-cli -g netlify deploy

When it asks, make sure you put in build as the Path to deploy? (current dir) .

在詢(xún)問(wèn)時(shí)，請(qǐng)確保將build作為Path to deploy? (current dir) Path to deploy? (current dir) 。

Netlify is going to do its thing and show you the final URL (mine is https://laughing-yonath-118f58.netlify.com ?)

Netlify將執(zhí)行其操作并向您顯示最終URL(我的網(wǎng)址是https://laughing-yonath-118f58.netlify.com嗎？)

If you try to access the one you created, you’ll see an error in your console because your URL wasn’t added to the Google API console. Go ahead and add the URL you need, and after that everything should be working as expected.

如果您嘗試訪問(wèn)自己創(chuàng)建的控制臺(tái)，則會(huì)在控制臺(tái)中看到錯(cuò)誤消息，因?yàn)槟木W(wǎng)址未添加到Google API控制臺(tái)中。 繼續(xù)并添加所需的URL，然后一切都將按預(yù)期工作。

結(jié)束 (The End)

I hope all of this made sense. You can now work your magic on adding features to that list such as sorting, filtering, pagination, search, comparison, and so on. And when Doug adds another car to that list, the app will be automatically updated with the new information.

我希望所有這些都是有道理的。 現(xiàn)在，您可以發(fā)揮神奇的作用，向該列表添加功能，例如排序，過(guò)濾，分頁(yè)，搜索，比較等等。 當(dāng)?shù)栏駥⒘硪惠v車(chē)添加到該列表時(shí)，該應(yīng)用程序?qū)⒆詣?dòng)更新為新信息。

If this tutorial made sense, give it a ?? and share it with a friend. If you want to tell me it sucked or you have any more questions, comment below or yell at me on Twitter, I really don’t mind. If Doug is reading this, hey Doug ??!

如果本教程有意義，請(qǐng)給它一個(gè)？ 并與朋友分享。 如果您想告訴我它很爛，或者您還有其他問(wèn)題，請(qǐng)?jiān)谙旅嬖u(píng)論或在Twitter上對(duì)我大喊，我真的不介意。 如果Doug正在閱讀此內(nèi)容，則嘿Doug ??！

翻譯自: https://www.freecodecamp.org/news/how-to-deploy-a-react-application-to-netlify-that-reads-from-a-google-sheet-97a015806c47/

react數(shù)據(jù)從本地讀取

總結(jié)

以上是生活随笔為你收集整理的react数据从本地读取_如何将从Google表格读取的React应用程序部署到Netlify的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。