{"id":120,"date":"2018-11-14T00:27:20","date_gmt":"2018-11-14T00:27:20","guid":{"rendered":"http:\/\/blog.upmostly.com\/?p=120"},"modified":"2022-10-28T11:11:31","modified_gmt":"2022-10-28T16:11:31","slug":"create-simple-web-app-react-airtable","status":"publish","type":"post","link":"http:\/\/upmostly.com\/tutorials\/create-simple-web-app-react-airtable","title":{"rendered":"Airtable and React: Create a Simple Web App"},"content":{"rendered":"\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"530\" src=\"http:\/\/upmostly.com\/wp-content\/uploads\/react-airtable-complete-app-1024x530.jpg\" alt=\"Building an app using react and airtable\" class=\"wp-image-346\" srcset=\"https:\/\/upmostly.com\/wp-content\/uploads\/react-airtable-complete-app-1024x530.jpg 1024w, https:\/\/upmostly.com\/wp-content\/uploads\/react-airtable-complete-app-300x155.jpg 300w, https:\/\/upmostly.com\/wp-content\/uploads\/react-airtable-complete-app-768x397.jpg 768w, https:\/\/upmostly.com\/wp-content\/uploads\/react-airtable-complete-app.jpg 1160w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-button aligncenter is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link has-vivid-cyan-blue-color has-text-color\" href=\"https:\/\/whispering-citadel-20400.herokuapp.com\/\" target=\"_blank\" rel=\"noopener\">View Demo<\/a><\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity is-style-default\"\/>\n\n\n\n<p>In this tutorial, we&#8217;ll create a simple movie-themed web app using Airtable and React. So, what are you waiting for? Let&#8217;s get started!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Table of Contents<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"#introduction\">Introduction<\/a><\/li><li><a href=\"#what-are-we-making\">What Are We Making?<\/a><\/li><li><a href=\"#setting-up-the-react-app\">Setting up the React App<\/a><\/li><li><a href=\"#scaffolding-with-create-react-app\">Scaffolding with Create React App<\/a><\/li><li><a href=\"#adding-bootstrap\">Adding Bootstrap<\/a><\/li><li><a href=\"#importing-bootstrap\">Importing Bootstrap<\/a><\/li><li><a href=\"#creating-the-base-component\">Creating the Base Component<\/a><\/li><li><a href=\"#stubbing-out-the-base-component\">Stubbing out the Base Component<\/a><\/li><li><a href=\"#creating-the-moviecard-component\">Creating the MovieCard Component<\/a><\/li><li><a href=\"#looping-through-the-array\">Looping Through the Array<\/a><\/li><li><a href=\"#setting-up-airtable\">Setting up Airtable<\/a><\/li><li><a href=\"#customizing-the-airtable-base\">Customizing the Airtable Base<\/a><\/li><li><a href=\"#accessing-the-airtable-bases-api\">Accessing the Airtable Bases&#8217; API<\/a><\/li><li><a href=\"#integrating-react-and-airtable\">Integrating React and Airtable<\/a><\/li><li><a href=\"#using-our-airtable-data\">Using our Airtable Data<\/a><\/li><li><a href=\"#wrapping-up-react-and-airtable\">Wrapping up React and Airtable<\/a><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"introduction\">Introduction<\/h2>\n\n\n\n<p>Before we begin, I&#8217;m sure some of you are wondering what&nbsp;<a href=\"https:\/\/airtable.com\" target=\"_blank\" rel=\"noreferrer noopener\">Airtable<\/a> is.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Airtable&nbsp;looks and feels like a spreadsheet, but it&#8217;s actually a database with an easy to use API that we can plug straight into our front-end with little effort.<\/p>\n\n\n\n<p>Just like in Google Sheets how you add your data in rows and columns, Airtable also lets you add data in rows and columns. The user interface feels very familiar to Google sheets, making it very easy to understand and use by non-technical people.<\/p>\n\n\n\n<p>If you&#8217;d like to read more about Airtable before we get started on our web app, you can check out their excellent&nbsp;<a href=\"https:\/\/guide.airtable.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">getting started guide<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-are-we-making\">What Are We Making?<\/h2>\n\n\n\n<p>We&#8217;re keeping with the movie theme in this tutorial because I&#8217;m a huge fan of <g class=\"gr_ gr_16 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace\" id=\"16\" data-gr-id=\"16\">movies<\/g>. Therefore, by the end of this tutorial, you&#8217;ll have created a great looking web app built using React and Airtable&nbsp;that lets you rate your favorite movies!<\/p>\n\n\n\n<p>I try to stick with the same tools and libraries in all of my web apps. Therefore, we&#8217;ll be using the following stack:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>React<\/li><li>Bootstrap 4.1<\/li><li>Airtable<\/li><\/ul>\n\n\n\n<p>That&#8217;s it! Just three ingredients for a delicious web app! Let&#8217;s open our text editors and terminals and begin, shall we? Oh, if you&#8217;re using Atom, be sure to check out the <a href=\"http:\/\/upmostly.com\/tutorials\/best-atom-packages-front-end\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"That&#039;s it! Just three ingredients for a delicious web app! Let&#039;s open our text editors and terminals and begin, shall we? Oh, if you&#039;re using Atom, be sure to check out the Best Atom Plugins for Front End Developers. (opens in a new tab)\">Best Atom Plugins for Front End Developers<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"setting-up-the-react-app\">Setting up the React App<\/h2>\n\n\n\n<p>Our first task is to create a new React project. We could do this manually, but that would take too long. Instead, we&#8217;re using a tool the React team at Facebook have created called <em>Create React App<\/em>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"scaffolding-with-create-react-app\">Scaffolding with Create React App<\/h2>\n\n\n\n<p>Go to the <a href=\"https:\/\/github.com\/facebook\/create-react-app\" target=\"_blank\" rel=\"noreferrer noopener\">Create React App Github repository page<\/a> and follow the instructions on setting up a new React project. Come back here when you have the base app up and running. It should look something like this:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"928\" height=\"763\" src=\"http:\/\/upmostly.com\/wp-content\/uploads\/create-react-app-browser.png\" alt=\"\" class=\"wp-image-142\" srcset=\"https:\/\/upmostly.com\/wp-content\/uploads\/create-react-app-browser.png 928w, https:\/\/upmostly.com\/wp-content\/uploads\/create-react-app-browser-300x247.png 300w, https:\/\/upmostly.com\/wp-content\/uploads\/create-react-app-browser-768x631.png 768w\" sizes=\"auto, (max-width: 928px) 100vw, 928px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"adding-bootstrap\">Adding Bootstrap<\/h2>\n\n\n\n<p>Now that we have our React app working, our second task is to add Bootstrap to the codebase. For those who don&#8217;t know, Bootstrap is a component library which gives us well documented, styled HTML components such as buttons, cards, tabs, etc.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>If you&#8217;re wondering what the difference between React and Bootstrap is, think of them within the context of a novel. React would be the spine and pages of the book, while Bootstrap would be the words, headings,&nbsp;<g class=\"gr_ gr_185 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep\" id=\"185\" data-gr-id=\"185\">and<\/g> images.<\/p><\/blockquote>\n\n\n\n<p>There is a library called Reactstrap that has &#8216;<em class=\"\"><g class=\"gr_ gr_3 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace\" id=\"3\" data-gr-id=\"3\">Reactified<\/g><\/em>&#8216; the bootstrap HTML components and turned them into React components, however, we&#8217;ll be using the standard Bootstrap library instead.<\/p>\n\n\n\n<p>To install the latest Bootstrap, open up a terminal window, make sure you&#8217;re in the new React project directory, and run the following commands:<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><div class=\"code-editor-header\">Terminal<\/div><pre class=\"language-bash\"><code class=\"language-bash\"><div><span class=\"token function\">npm<\/span> i bootstrap --save <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token function\">npm<\/span> i popper.js --save <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token function\">npm<\/span> i jquery --save<\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<p>This command installs three libraries:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Bootstrap.<\/li><li>Popper.js, a bootstrap dependency that powers the tooltips and popover components.<\/li><li>jQuery, another bootstrap dependency that Bootstrap relies on for animations, hiding and showing of elements, amongst other things.<\/li><\/ul>\n\n\n\n<p>If all goes well, you should see a console output that looks very similar to this:<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><div class=\"code-editor-header\">Terminal<\/div><pre class=\"language-bash\"><code class=\"language-bash\"><div>+ bootstrap@4.1.3\nadded 1 package from 2 contributors <span class=\"token keyword\">in<\/span> 18.516s\n<span class=\"token punctuation\">[<\/span>+<span class=\"token punctuation\">]<\/span> no known vulnerabilities found <span class=\"token punctuation\">[<\/span>35668 packages audited<span class=\"token punctuation\">]<\/span>\n\n<span class=\"token function\">npm<\/span> WARN bootstrap@4.1.3 requires a peer of jquery@1.9.1 - 3 but none is installed. You must <span class=\"token function\">install<\/span> peer dependencies yourself.\n\n+ popper.js@1.14.5\nadded 1 package from 2 contributors <span class=\"token keyword\">in<\/span> 16.791s\n<span class=\"token punctuation\">[<\/span>+<span class=\"token punctuation\">]<\/span> no known vulnerabilities found <span class=\"token punctuation\">[<\/span>35669 packages audited<span class=\"token punctuation\">]<\/span>\n\n+ jquery@3.3.1\nadded 1 package from 1 contributor <span class=\"token keyword\">in<\/span> 15.364s\n<span class=\"token punctuation\">[<\/span>+<span class=\"token punctuation\">]<\/span> no known vulnerabilities found <span class=\"token punctuation\">[<\/span>35670 packages audited<span class=\"token punctuation\">]<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"importing-bootstrap\">Importing Bootstrap<\/h2>\n\n\n\n<p>You&#8217;re halfway there! Next, we need to actually <span style=\"text-decoration: underline;\"><strong>import<\/strong><\/span>&nbsp;bootstrap into our React app so that we can begin using it.<\/p>\n\n\n\n<p>We want Bootstrap to be accessible from anywhere in our code. Therefore, we should import it at the root of the application.&nbsp;<\/p>\n\n\n\n<p>Open up&nbsp;<span class=\"has-inline-color has-vivid-red-color\"><strong>index.js<\/strong> <\/span>and add two new import statements for the Bootstrap CSS and JS files, towards the end of the existing imports:<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><div class=\"code-editor-header\">index.js<\/div><pre class=\"language-jsx\"><code class=\"language-jsx\"><div><span class=\"token keyword\">import<\/span> React <span class=\"token keyword\">from<\/span> <span class=\"token string\">'react'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> ReactDOM <span class=\"token keyword\">from<\/span> <span class=\"token string\">'react-dom'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token string\">'.\/index.css'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> App <span class=\"token keyword\">from<\/span> <span class=\"token string\">'.\/App'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token operator\">*<\/span> <span class=\"token keyword\">as<\/span> serviceWorker <span class=\"token keyword\">from<\/span> <span class=\"token string\">'.\/serviceWorker'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token comment\">\/\/ Import Bootstrap CSS and JS<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token string\">'bootstrap\/dist\/css\/bootstrap.css'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token string\">'bootstrap\/dist\/js\/bootstrap.js'<\/span><span class=\"token punctuation\">;<\/span>\n\n\nReactDOM<span class=\"token punctuation\">.<\/span><span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>App<\/span> <span class=\"token punctuation\">\/><\/span><\/span><span class=\"token punctuation\">,<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementById<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'root'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token comment\">\/\/ If you want your app to work offline and load faster, you can change<\/span>\n<span class=\"token comment\">\/\/ unregister() to register() below. Note this comes with some pitfalls.<\/span>\n<span class=\"token comment\">\/\/ Learn more about service workers: http:\/\/bit.ly\/CRA-PWA<\/span>\nserviceWorker<span class=\"token punctuation\">.<\/span><span class=\"token function\">unregister<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<p>Good stuff!&nbsp;Now, let&#8217;s make sure Bootstrap has been imported successfully. Open up&nbsp;<strong><span class=\"has-inline-color has-vivid-red-color\">App.js<\/span> <\/strong>and add one line of HTML to insert a Bootstrap styled HTML button component, immediately below the &#8216;Learn React&#8217; link:<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><div class=\"code-editor-header\">App.js<\/div><pre class=\"language-jsx\"><code class=\"language-jsx\"><div><span class=\"token keyword\">import<\/span> React<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span> Component <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">'react'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> logo <span class=\"token keyword\">from<\/span> <span class=\"token string\">'.\/logo.svg'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token string\">'.\/App.css'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">App<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>App<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n        <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>header<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>App-header<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n          <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>img<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>logo<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>App-logo<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">alt<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>logo<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">\/><\/span><\/span><span class=\"token plain-text\">\n          <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n            Edit <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>code<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">src\/App.js<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>code<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\"> and save to reload.\n          <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n          <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a<\/span>\n            <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>App-link<span class=\"token punctuation\">\"<\/span><\/span>\n            <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>https:\/\/reactjs.org<span class=\"token punctuation\">\"<\/span><\/span>\n            <span class=\"token attr-name\">target<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>_blank<span class=\"token punctuation\">\"<\/span><\/span>\n            <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>noopener noreferrer<span class=\"token punctuation\">\"<\/span><\/span>\n          <span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n            Learn React\n          <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>a<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n          <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>button<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>btn btn-primary<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">Primary<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>button<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n        <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>header<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> App<span class=\"token punctuation\">;<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<p>Save your changes and navigate to the running web app in your browser. If you see a blue button, similar to the screenshot below, then you&#8217;ve installed and imported Bootstrap successfully and we can move on! <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"695\" height=\"719\" src=\"http:\/\/upmostly.com\/wp-content\/uploads\/bootstrap-installed.png\" alt=\"\" class=\"wp-image-152\" srcset=\"https:\/\/upmostly.com\/wp-content\/uploads\/bootstrap-installed.png 695w, https:\/\/upmostly.com\/wp-content\/uploads\/bootstrap-installed-290x300.png 290w\" sizes=\"auto, (max-width: 695px) 100vw, 695px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"creating-the-base-component\">Creating the Base Component<\/h2>\n\n\n\n<p>When building a dynamic web app, I always like to &#8216;stub&#8217; out the components first using dummy data. This involves creating the user interface and populating it using static data that I define at the top of the component. You&#8217;ll see what I mean in a few minutes.<\/p>\n\n\n\n<p>While you&#8217;re in&nbsp;<strong><span class=\"has-inline-color has-vivid-red-color\">App.js<\/span><\/strong>, go ahead and delete everything in the render function, as well as the last two import statements at the top of the file.<\/p>\n\n\n\n<p>Then, add a Bootstrap container, row,&nbsp;<g class=\"gr_ gr_62 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep\" id=\"62\" data-gr-id=\"62\">and<\/g> column class. If you don&#8217;t know the basics of defining layout in Bootstrap, I highly suggest you check out their <a href=\"https:\/\/getbootstrap.com\/docs\/4.1\/layout\/overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">overview on layout.<\/a><\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><div class=\"code-editor-header\">App.js<\/div><pre class=\"language-jsx\"><code class=\"language-jsx\"><div><span class=\"token keyword\">import<\/span> React<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span> Component <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">'react'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">App<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>container mt-5<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n        <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>row<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n          <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>col<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n            ...\n          <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n        <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> App<span class=\"token punctuation\">;<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<p>Don&#8217;t hit that save button just yet! We need to add our card HTML components inside the column class. For now, we&#8217;ll add three cards:<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><div class=\"code-editor-header\">App.js<\/div><pre class=\"language-javascript\"><code class=\"language-javascript\"><div><span class=\"token keyword\">import<\/span> React<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span> Component <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">'react'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">App<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token operator\">&lt;<\/span>div className<span class=\"token operator\">=<\/span><span class=\"token string\">\"container mt-5\"<\/span><span class=\"token operator\">><\/span>\n        <span class=\"token operator\">&lt;<\/span>div className<span class=\"token operator\">=<\/span><span class=\"token string\">\"row\"<\/span><span class=\"token operator\">><\/span>\n          <span class=\"token operator\">&lt;<\/span>div className<span class=\"token operator\">=<\/span><span class=\"token string\">\"col\"<\/span><span class=\"token operator\">><\/span>\n            <span class=\"token operator\">&lt;<\/span>div className<span class=\"token operator\">=<\/span><span class=\"token string\">\"card-deck\"<\/span><span class=\"token operator\">><\/span>\n              <span class=\"token operator\">&lt;<\/span>div className<span class=\"token operator\">=<\/span><span class=\"token string\">\"card\"<\/span><span class=\"token operator\">><\/span>\n                <span class=\"token operator\">&lt;<\/span>img className<span class=\"token operator\">=<\/span><span class=\"token string\">\"card-img-top\"<\/span> src<span class=\"token operator\">=<\/span><span class=\"token string\">\"https:\/\/via.placeholder.com\/362x200\"<\/span> alt<span class=\"token operator\">=<\/span><span class=\"token string\">\"Card image cap\"<\/span> <span class=\"token operator\">\/<\/span><span class=\"token operator\">><\/span>\n                <span class=\"token operator\">&lt;<\/span>div className<span class=\"token operator\">=<\/span><span class=\"token string\">\"card-body\"<\/span><span class=\"token operator\">><\/span>\n                  <span class=\"token operator\">&lt;<\/span>h5 className<span class=\"token operator\">=<\/span><span class=\"token string\">\"card-title\"<\/span><span class=\"token operator\">><\/span>Card title<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>h5<span class=\"token operator\">><\/span>\n                  <span class=\"token operator\">&lt;<\/span>p className<span class=\"token operator\">=<\/span><span class=\"token string\">\"card-text\"<\/span><span class=\"token operator\">><\/span>This is a longer card <span class=\"token keyword\">with<\/span> supporting text below <span class=\"token keyword\">as<\/span> a natural lead<span class=\"token operator\">-<\/span><span class=\"token keyword\">in<\/span> to additional content<span class=\"token punctuation\">.<\/span> This content is a little bit longer<span class=\"token punctuation\">.<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>p<span class=\"token operator\">><\/span>\n                  <span class=\"token operator\">&lt;<\/span>p className<span class=\"token operator\">=<\/span><span class=\"token string\">\"card-text\"<\/span><span class=\"token operator\">><\/span><span class=\"token operator\">&lt;<\/span>small className<span class=\"token operator\">=<\/span><span class=\"token string\">\"text-muted\"<\/span><span class=\"token operator\">><\/span>Last updated <span class=\"token number\">3<\/span> mins ago<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>small<span class=\"token operator\">><\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>p<span class=\"token operator\">><\/span>\n                <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n              <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n              <span class=\"token operator\">&lt;<\/span>div className<span class=\"token operator\">=<\/span><span class=\"token string\">\"card\"<\/span><span class=\"token operator\">><\/span>\n                <span class=\"token operator\">&lt;<\/span>img className<span class=\"token operator\">=<\/span><span class=\"token string\">\"card-img-top\"<\/span> src<span class=\"token operator\">=<\/span><span class=\"token string\">\"https:\/\/via.placeholder.com\/362x200\"<\/span> alt<span class=\"token operator\">=<\/span><span class=\"token string\">\"Card image cap\"<\/span> <span class=\"token operator\">\/<\/span><span class=\"token operator\">><\/span>\n                <span class=\"token operator\">&lt;<\/span>div className<span class=\"token operator\">=<\/span><span class=\"token string\">\"card-body\"<\/span><span class=\"token operator\">><\/span>\n                  <span class=\"token operator\">&lt;<\/span>h5 className<span class=\"token operator\">=<\/span><span class=\"token string\">\"card-title\"<\/span><span class=\"token operator\">><\/span>Card title<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>h5<span class=\"token operator\">><\/span>\n                  <span class=\"token operator\">&lt;<\/span>p className<span class=\"token operator\">=<\/span><span class=\"token string\">\"card-text\"<\/span><span class=\"token operator\">><\/span>This card has supporting text below <span class=\"token keyword\">as<\/span> a natural lead<span class=\"token operator\">-<\/span><span class=\"token keyword\">in<\/span> to additional content<span class=\"token punctuation\">.<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>p<span class=\"token operator\">><\/span>\n                  <span class=\"token operator\">&lt;<\/span>p className<span class=\"token operator\">=<\/span><span class=\"token string\">\"card-text\"<\/span><span class=\"token operator\">><\/span><span class=\"token operator\">&lt;<\/span>small className<span class=\"token operator\">=<\/span><span class=\"token string\">\"text-muted\"<\/span><span class=\"token operator\">><\/span>Last updated <span class=\"token number\">3<\/span> mins ago<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>small<span class=\"token operator\">><\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>p<span class=\"token operator\">><\/span>\n                <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n              <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n              <span class=\"token operator\">&lt;<\/span>div className<span class=\"token operator\">=<\/span><span class=\"token string\">\"card\"<\/span><span class=\"token operator\">><\/span>\n                <span class=\"token operator\">&lt;<\/span>img className<span class=\"token operator\">=<\/span><span class=\"token string\">\"card-img-top\"<\/span> src<span class=\"token operator\">=<\/span><span class=\"token string\">\"https:\/\/via.placeholder.com\/362x200\"<\/span> alt<span class=\"token operator\">=<\/span><span class=\"token string\">\"Card image cap\"<\/span> <span class=\"token operator\">\/<\/span><span class=\"token operator\">><\/span>\n                <span class=\"token operator\">&lt;<\/span>div className<span class=\"token operator\">=<\/span><span class=\"token string\">\"card-body\"<\/span><span class=\"token operator\">><\/span>\n                  <span class=\"token operator\">&lt;<\/span>h5 className<span class=\"token operator\">=<\/span><span class=\"token string\">\"card-title\"<\/span><span class=\"token operator\">><\/span>Card title<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>h5<span class=\"token operator\">><\/span>\n                  <span class=\"token operator\">&lt;<\/span>p className<span class=\"token operator\">=<\/span><span class=\"token string\">\"card-text\"<\/span><span class=\"token operator\">><\/span>This is a wider card <span class=\"token keyword\">with<\/span> supporting text below <span class=\"token keyword\">as<\/span> a natural lead<span class=\"token operator\">-<\/span><span class=\"token keyword\">in<\/span> to additional content<span class=\"token punctuation\">.<\/span> This card has even longer content than the first to show that equal height action<span class=\"token punctuation\">.<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>p<span class=\"token operator\">><\/span>\n                  <span class=\"token operator\">&lt;<\/span>p className<span class=\"token operator\">=<\/span><span class=\"token string\">\"card-text\"<\/span><span class=\"token operator\">><\/span><span class=\"token operator\">&lt;<\/span>small className<span class=\"token operator\">=<\/span><span class=\"token string\">\"text-muted\"<\/span><span class=\"token operator\">><\/span>Last updated <span class=\"token number\">3<\/span> mins ago<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>small<span class=\"token operator\">><\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>p<span class=\"token operator\">><\/span>\n                <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n              <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n            <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n          <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n        <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n      <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> App<span class=\"token punctuation\">;<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<p>Each card component is filled with static content for now, so we can see what our app will look like once it&#8217;s being populated with dynamic data from Airtable.<\/p>\n\n\n\n<p>Now you can hit that save button! Once it&#8217;s <a href=\"http:\/\/upmostly.com\/tutorials\/how-to-refresh-a-page-or-component-in-react\">refreshed<\/a>, you should see something that looks like this:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"673\" src=\"http:\/\/upmostly.com\/wp-content\/uploads\/cards-react-app-1024x673.png\" alt=\"\" class=\"wp-image-163\" srcset=\"https:\/\/upmostly.com\/wp-content\/uploads\/cards-react-app-1024x673.png 1024w, https:\/\/upmostly.com\/wp-content\/uploads\/cards-react-app-300x197.png 300w, https:\/\/upmostly.com\/wp-content\/uploads\/cards-react-app-768x504.png 768w, https:\/\/upmostly.com\/wp-content\/uploads\/cards-react-app.png 1192w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"stubbing-out-the-base-component\">Stubbing out the Base Component<\/h2>\n\n\n\n<p>Now that we have three static movie cards looking nice in our component, we can begin to &#8216;stub&#8217; out the data. When stubbing out the data, I do the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Create a&nbsp;<em>temporary<\/em> array of objects which mimics the structure of the data that will eventually be passed into this component from our database via an API. In this case, Airtable.<\/li><li>Turn the static HTML components into a new React component, so that I can dynamically render it.<\/li><li>Loop through the array of objects, rendering out the new React component for each object.<\/li><\/ul>\n\n\n\n<p>Let&#8217;s start with the first step. At the top of our&nbsp;<strong><span class=\"has-inline-color has-vivid-red-color\">App.js<\/span><\/strong> component, right after the import statement, add the following array of objects:<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><div class=\"code-editor-header\">App.js<\/div><pre class=\"language-javascript\"><code class=\"language-javascript\"><div><span class=\"token keyword\">const<\/span> movieData <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span>\n  <span class=\"token punctuation\">{<\/span>\n      title<span class=\"token punctuation\">:<\/span> <span class=\"token string\">'Avengers: Infinity War'<\/span><span class=\"token punctuation\">,<\/span>\n      year<span class=\"token punctuation\">:<\/span> <span class=\"token string\">'2018'<\/span><span class=\"token punctuation\">,<\/span>\n      description<span class=\"token punctuation\">:<\/span> <span class=\"token string\">'Iron Man, Thor, the Hulk and the rest of the Avengers unite to battle their most powerful enemy yet -- the evil Thanos. On a mission to collect all six Infinity Stones, Thanos plans to use the artifacts to inflict his twisted will on reality.'<\/span><span class=\"token punctuation\">,<\/span>\n      imageURL<span class=\"token punctuation\">:<\/span> <span class=\"token string\">'https:\/\/via.placeholder.com\/362x200'<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token punctuation\">{<\/span>\n      title<span class=\"token punctuation\">:<\/span> <span class=\"token string\">'Bohemian Rhapsody'<\/span><span class=\"token punctuation\">,<\/span>\n      year<span class=\"token punctuation\">:<\/span> <span class=\"token string\">'2018'<\/span><span class=\"token punctuation\">,<\/span>\n      description<span class=\"token punctuation\">:<\/span> <span class=\"token string\">'Bohemian Rhapsody is a foot-stomping celebration of Queen, their music and their extraordinary lead singer Freddie Mercury. Freddie defied stereotypes and shattered convention to become one of the most beloved entertainers on the planet.'<\/span><span class=\"token punctuation\">,<\/span>\n      imageURL<span class=\"token punctuation\">:<\/span> <span class=\"token string\">'https:\/\/via.placeholder.com\/362x200'<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token punctuation\">{<\/span>\n      title<span class=\"token punctuation\">:<\/span> <span class=\"token string\">'The Incredibles 2'<\/span><span class=\"token punctuation\">,<\/span>\n      year<span class=\"token punctuation\">:<\/span> <span class=\"token string\">'2018'<\/span><span class=\"token punctuation\">,<\/span>\n      description<span class=\"token punctuation\">:<\/span> <span class=\"token string\">'Everyone\u2019s favorite family of superheroes is back in \u201cIncredibles 2\u201d \u2013 but this time Helen is in the spotlight, leaving Bob at home with Violet and Dash to navigate the day-to-day heroics of \u201cnormal\u201d life.'<\/span><span class=\"token punctuation\">,<\/span>\n      imageURL<span class=\"token punctuation\">:<\/span> <span class=\"token string\">'https:\/\/via.placeholder.com\/362x200'<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\n<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<p>What we&#8217;re doing here is instantiating a new constant of type array. Inside this array are three objects, each with a title, year, description, and imageURL key\/value pairs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"creating-the-moviecard-component\">Creating the MovieCard Component<\/h2>\n\n\n\n<p>This is where the fun begins&#8230;<\/p>\n\n\n\n<p>We&#8217;ve checked off step one: stubbing out our component with dummy data.<\/p>\n\n\n\n<p>If you remember our three steps from before, step two was converting the static HTML components into a React component. To do that, at the bottom of&nbsp;<strong><span class=\"has-inline-color has-vivid-red-color\">App.js&nbsp;<\/span><\/strong>after the export statement, let&#8217;s define a new&nbsp;<strong>stateless, functional React component called MovieCard<\/strong>:<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><div class=\"code-editor-header\">MovieCard.js<\/div><pre class=\"language-javascript\"><code class=\"language-javascript\"><div><span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">MovieCard<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">(<\/span>\n  <span class=\"token operator\">&lt;<\/span>div className<span class=\"token operator\">=<\/span><span class=\"token string\">\"card\"<\/span><span class=\"token operator\">><\/span>\n    <span class=\"token operator\">&lt;<\/span>img className<span class=\"token operator\">=<\/span><span class=\"token string\">\"card-img-top\"<\/span> src<span class=\"token operator\">=<\/span><span class=\"token string\">\"https:\/\/via.placeholder.com\/362x200\"<\/span> alt<span class=\"token operator\">=<\/span><span class=\"token string\">\"Card image cap\"<\/span> <span class=\"token operator\">\/<\/span><span class=\"token operator\">><\/span>\n    <span class=\"token operator\">&lt;<\/span>div className<span class=\"token operator\">=<\/span><span class=\"token string\">\"card-body\"<\/span><span class=\"token operator\">><\/span>\n      <span class=\"token operator\">&lt;<\/span>h5 className<span class=\"token operator\">=<\/span><span class=\"token string\">\"card-title\"<\/span><span class=\"token operator\">><\/span>Card title<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>h5<span class=\"token operator\">><\/span>\n      <span class=\"token operator\">&lt;<\/span>p className<span class=\"token operator\">=<\/span><span class=\"token string\">\"card-text\"<\/span><span class=\"token operator\">><\/span>This is a wider card <span class=\"token keyword\">with<\/span> supporting text below <span class=\"token keyword\">as<\/span> a natural lead<span class=\"token operator\">-<\/span><span class=\"token keyword\">in<\/span> to additional content<span class=\"token punctuation\">.<\/span> This card has even longer content than the first to show that equal height action<span class=\"token punctuation\">.<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>p<span class=\"token operator\">><\/span>\n      <span class=\"token operator\">&lt;<\/span>p className<span class=\"token operator\">=<\/span><span class=\"token string\">\"card-text\"<\/span><span class=\"token operator\">><\/span>\n        <span class=\"token operator\">&lt;<\/span>small className<span class=\"token operator\">=<\/span><span class=\"token string\">\"text-muted\"<\/span><span class=\"token operator\">><\/span>Last updated <span class=\"token number\">3<\/span> mins ago<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>small<span class=\"token operator\">><\/span>\n      <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>p<span class=\"token operator\">><\/span>\n    <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n  <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Remember, all React component names are written in upper camel case (pascal case). For example: MovieCard, TableList, and SideBar.<\/p><\/blockquote>\n\n\n\n<p>A stateless functional component has no state, and its props are passed into <g class=\"gr_ gr_19 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar multiReplace\" id=\"19\" data-gr-id=\"19\">it<\/g> through parameters.<\/p>\n\n\n\n<p>Our component has no props. Let&#8217;s go ahead and add these to the parameter list. We&#8217;ll also add the props in the HTML so we can begin to populate our HTML component with the values that are passed into the props.<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><div class=\"code-editor-header\">MovieCard.js<\/div><pre class=\"language-jsx\"><code class=\"language-jsx\"><div><span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">MovieCard<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> title<span class=\"token punctuation\">,<\/span> year<span class=\"token punctuation\">,<\/span> description<span class=\"token punctuation\">,<\/span> imageURL <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">(<\/span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>card<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n    <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>img<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>card-img-top<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">src<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>imageURL<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">alt<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>Movie poster<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">\/><\/span><\/span><span class=\"token plain-text\">\n    <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>card-body<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>h5<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>card-title<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>title<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>h5<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>card-text<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>description<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>card-text<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n        <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>small<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>text-muted<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>year<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>small<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n    <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n  <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"looping-through-the-array\">Looping Through the Array<\/h2>\n\n\n\n<p>Now for the magic part! Our third and final step for stubbing out our component is to <a href=\"http:\/\/upmostly.com\/tutorials\/how-to-for-loop-in-react-with-examples\" target=\"_blank\" rel=\"noreferrer noopener\">loop through the array<\/a> of objects and render a new copy of our MovieCard component for each object in that array.<\/p>\n\n\n\n<p>Begin by deleting the static HTML card components from the render function, keeping the outer <strong>.card-deck<\/strong> div, like so:<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><div class=\"code-editor-header\">App.js<\/div><pre class=\"language-jsx\"><code class=\"language-jsx\"><div><span class=\"token keyword\">class<\/span> <span class=\"token class-name\">App<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>container mt-5<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n        <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>row<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n          <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>col<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n            <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>card-deck<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n              ...\n            <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n          <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n        <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">}<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<p>Finally, inside the<strong> .card-deck<\/strong> div, loop through the temporary movieData array we defined earlier and render a new copy of our <strong>&lt;MovieCard \/&gt;<\/strong> component for each object in the movieData array.<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><div class=\"code-editor-header\">App.js<\/div><pre class=\"language-jsx\"><code class=\"language-jsx\"><div><span class=\"token keyword\">class<\/span> <span class=\"token class-name\">App<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>container mt-5<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n        <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>row<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n          <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>col<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n            <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>card-deck<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n              <\/span><span class=\"token punctuation\">{<\/span>movieData<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span>movie <span class=\"token operator\">=><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>MovieCard<\/span> <span class=\"token spread\"><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">...<\/span><span class=\"token attr-value\">movie<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">\/><\/span><\/span> <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span><span class=\"token plain-text\">\n            <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n          <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n        <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">}<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<p>The line of code we inserted above is doing quite a lot for one line of code.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>We&#8217;re looping through our movieData array.<\/li><li>For each object in that array, we&#8217;re returning our &lt;MovieCard \/&gt; component.<\/li><li>Finally, we&#8217;re passing in the entire movie object into the &lt;MovieCard \/&gt; component as props.<\/li><\/ul>\n\n\n\n<p>Save the file, switch to your web browser and you should see something similar to before, but this time the cards are being populated by the data defined in our array!<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"543\" src=\"http:\/\/upmostly.com\/wp-content\/uploads\/stubbing-cards-1024x543.png\" alt=\"\" class=\"wp-image-171\" srcset=\"https:\/\/upmostly.com\/wp-content\/uploads\/stubbing-cards-1024x543.png 1024w, https:\/\/upmostly.com\/wp-content\/uploads\/stubbing-cards-300x159.png 300w, https:\/\/upmostly.com\/wp-content\/uploads\/stubbing-cards-768x407.png 768w, https:\/\/upmostly.com\/wp-content\/uploads\/stubbing-cards.png 1232w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Play around with the array data for a while so you can see how the data is populating our&nbsp;MovieCard components. Try changing the data in the array. Add more objects to the movieData array to see more cards being added to our web app.<\/p>\n\n\n\n<p><em>I suggest you take a minute to go over what we&#8217;ve covered so far before moving onto the next section!<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"setting-up-airtable\">Setting up Airtable<\/h2>\n\n\n\n<p>The final piece of the React and Airtable web app puzzle &#8212; Plugging an Airtable database into our&nbsp;quite static front end!<\/p>\n\n\n\n<p>Sign up for a new Airtable account if you haven&#8217;t already.<\/p>\n\n\n\n<p>I&#8217;d really appreciate it if you used my referral link:&nbsp;<a href=\"https:\/\/airtable.com\/invite\/r\/w7plpPSM\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/airtable.com\/invite\/r\/w7plpPSM<\/a>. <\/p>\n\n\n\n<p><em>(Full disclosure: after signing up, I receive a $10 credit towards my Airtable account.)<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"469\" src=\"http:\/\/upmostly.com\/wp-content\/uploads\/airtable-dashboard-1024x469.png\" alt=\"\" class=\"wp-image-214\" srcset=\"https:\/\/upmostly.com\/wp-content\/uploads\/airtable-dashboard-1024x469.png 1024w, https:\/\/upmostly.com\/wp-content\/uploads\/airtable-dashboard-300x137.png 300w, https:\/\/upmostly.com\/wp-content\/uploads\/airtable-dashboard-768x352.png 768w, https:\/\/upmostly.com\/wp-content\/uploads\/airtable-dashboard.png 1221w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>You should be redirected to the dashboard page where you can create a new base after creating a new account. A base is Airtables name for a database.<\/p>\n\n\n\n<p>Click the <strong>&#8216;Add a base&#8217;<\/strong> button and then&nbsp;<strong>&#8216;Start from scratch&#8217;<\/strong>.<\/p>\n\n\n\n<p>Give your new base a name (I chose &#8216;Movies&#8217; &#8212; it felt appropriate), change the color, and pick a funky icon. Once you&#8217;re done customizing your base, <strong>click into it<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"443\" src=\"http:\/\/upmostly.com\/wp-content\/uploads\/airtable-table-1024x443.png\" alt=\"\" class=\"wp-image-216\" srcset=\"https:\/\/upmostly.com\/wp-content\/uploads\/airtable-table-1024x443.png 1024w, https:\/\/upmostly.com\/wp-content\/uploads\/airtable-table-300x130.png 300w, https:\/\/upmostly.com\/wp-content\/uploads\/airtable-table-768x332.png 768w, https:\/\/upmostly.com\/wp-content\/uploads\/airtable-table.png 1069w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"customizing-the-airtable-base\">Customizing the Airtable Base<\/h2>\n\n\n\n<p>An empty base always starts with three columns: &#8216;Name&#8217;, &#8216;Notes&#8217;, and &#8216;Attachments&#8217;. We want to store data about our favorite movies. Change the current column structure by:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Rename &#8216;Table 1&#8217; to &#8216;favorites&#8217;.<\/li><li>Delete the &#8216;Notes&#8217; and &#8216;Attachments&#8217; columns.<\/li><li>Rename the &#8216;Name&#8217; column to &#8216;title&#8217; <em>(use lowercase!)<\/em>.<\/li><li>Create a new column of type number and name it &#8216;year&#8217;.<\/li><li>Add a new column of type long text and name it &#8216;description&#8217;.<\/li><li>Create a new column of type attachment and name it &#8216;<g class=\"gr_ gr_12 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace\" id=\"12\" data-gr-id=\"12\">imageURL<\/g>&#8216;.<\/li><\/ul>\n\n\n\n<p><g class=\"gr_ gr_31 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace gr-progress\" id=\"31\" data-gr-id=\"31\">Airtable<\/g> has an incredibly intuitive UI, so I haven&#8217;t given step-by-step instructions on how to accomplish everyting .&nbsp;<em>Take some time to explore it!<\/em><\/p>\n\n\n\n<p>You can start adding in the movie data once you have added these columns. Feel free to add new movies, or copy the data from the movieData array we defined earlier in the tutorial.<\/p>\n\n\n\n<p><strong>You&#8217;ll have to find images of the movie posters online so you can upload them to the &#8216;imageURL&#8217; column.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"325\" src=\"http:\/\/upmostly.com\/wp-content\/uploads\/airtable-movie-data-1024x325.png\" alt=\"\" class=\"wp-image-219\" srcset=\"https:\/\/upmostly.com\/wp-content\/uploads\/airtable-movie-data-1024x325.png 1024w, https:\/\/upmostly.com\/wp-content\/uploads\/airtable-movie-data-300x95.png 300w, https:\/\/upmostly.com\/wp-content\/uploads\/airtable-movie-data-768x244.png 768w, https:\/\/upmostly.com\/wp-content\/uploads\/airtable-movie-data.png 1033w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"accessing-the-airtable-bases-api\">Accessing the Airtable Bases&#8217; API<\/h2>\n\n\n\n<p>What makes Airtable so great for developers is their API. Each base provides its own <em>very well documented<\/em> API, allowing you to add, delete, edit, and save data from within your own apps. How great is that?!<\/p>\n\n\n\n<p>The best part is&nbsp;<span style=\"background-color: rgb(232, 234, 235);\"><b>the API is already set up for you, and it&#8217;s absolutely free!<\/b><\/span><\/p>\n\n\n\n<p>While you&#8217;re still signed in, go to <a href=\"https:\/\/airtable.com\/api\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/airtable.com\/api.<\/a><\/p>\n\n\n\n<p><strong>Find <\/strong><strong class=\"\">your base<\/strong><strong>&nbsp;and click on it<\/strong>. In front of you is some rather lengthy technical documentation that describes how you interact with the Airtable API.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"406\" src=\"http:\/\/upmostly.com\/wp-content\/uploads\/airtable-api-documentation-1024x406.png\" alt=\"\" class=\"wp-image-226\" srcset=\"https:\/\/upmostly.com\/wp-content\/uploads\/airtable-api-documentation-1024x406.png 1024w, https:\/\/upmostly.com\/wp-content\/uploads\/airtable-api-documentation-300x119.png 300w, https:\/\/upmostly.com\/wp-content\/uploads\/airtable-api-documentation-768x304.png 768w, https:\/\/upmostly.com\/wp-content\/uploads\/airtable-api-documentation.png 1736w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Scroll down to &#8216;Authentication&#8217; and look at the code examples in the dark section to the right of the screen. We&#8217;re interested in the line of code under &#8216;EXAMPLE USING QUERY PARAMETER&#8217;.<\/p>\n\n\n\n<p><strong>Copy and paste<\/strong>&nbsp;<strong>just the URL somewhere for now, or make a note of it. We will need this very soon<\/strong>. Make sure you click the &#8216;Show API Key&#8217; checkbox in the upper right-hand corner.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><pre class=\"language-bash\"><code class=\"language-bash\"><div>https:\/\/api.airtable.com\/v0\/appgOPm5an5ZzNvkk\/favorites?api_key<span class=\"token operator\">=<\/span>YOUR_API_KEY<\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"integrating-react-and-airtable\">Integrating React and Airtable<\/h2>\n\n\n\n<p>Next let&#8217;s bring the data from Airtable into our React app.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>An API (short for Application Programming Interface) is a way for software to communicate with each other. For example, our React web app wants to know what movies are stored in our Airtable database. <\/p><p>Airtable provides us with API documentation which tells us what URLs we must talk to from our React web app.<\/p><\/blockquote>\n\n\n\n<p>Open your text editor and go to the&nbsp;<strong><span class=\"has-inline-color has-vivid-red-color\">App.js<\/span><\/strong> component.<\/p>\n\n\n\n<p>Let&#8217;s add <g class=\"gr_ gr_33 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins doubleReplace replaceWithoutSep\" id=\"33\" data-gr-id=\"33\">state<\/g> to our component. <g class=\"gr_ gr_79 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins doubleReplace replaceWithoutSep\" id=\"79\" data-gr-id=\"79\">State<\/g> is for storing data that changes, such as a ticking timer, number of clicks, or responses from API calls.<\/p>\n\n\n\n<p>Define an initial state inside of a constructor method, like so:<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><div class=\"code-editor-header\">App.js<\/div><pre class=\"language-jsx\"><code class=\"language-jsx\"><div><span class=\"token keyword\">class<\/span> <span class=\"token class-name\">App<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">constructor<\/span><span class=\"token punctuation\">(<\/span>props<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">super<\/span><span class=\"token punctuation\">(<\/span>props<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>state <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span>\n      movies<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token operator\">...<\/span>\n  \n<span class=\"token punctuation\">}<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<p>We&#8217;re setting the initial state of the App component to be an object with an empty array named &#8216;movies&#8217;.<\/p>\n\n\n\n<p>Add another method called componentDidMount directly underneath this new constructor method.<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><div class=\"code-editor-header\">App.js<\/div><pre class=\"language-javascript\"><code class=\"language-javascript\"><div>  <span class=\"token operator\">...<\/span>\n  \n  <span class=\"token function\">componentDidMount<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token function\">fetch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'https:\/\/api.airtable.com\/v0\/appgOPm5an5ZzNvkk\/favorites?api_key=YOUR_API_KEY'<\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span>resp<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> resp<span class=\"token punctuation\">.<\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span>data <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n       <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">setState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> movies<span class=\"token punctuation\">:<\/span> data<span class=\"token punctuation\">.<\/span>records <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token keyword\">catch<\/span><span class=\"token punctuation\">(<\/span>err <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token comment\">\/\/ Error :(<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token operator\">...<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><strong><em>componentDidMount<\/em><\/strong> is a lifecycle method of a class component. The code inside of it is run whenever a component is ready to be loaded onto the page.<\/p><\/blockquote>\n\n\n\n<p>The code above does several things:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>It adds the <strong><em>componentDidMount<\/em><\/strong> method, so that code is run once the component is ready to be shown on the web page.<\/li><li>It uses&nbsp;fetch to call the Airtable API and get our list of movies we added to it earlier.<\/li><li>It updates the component state key &#8216;movies&#8217; to be the data coming back from Airtable.<\/li><\/ul>\n\n\n\n<p><strong>Remember to use your Airtable API_KEY and code I asked you to save earlier or this won&#8217;t work!<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"using-our-airtable-data\">Using our Airtable Data<\/h2>\n\n\n\n<p>Finally, change the render method to use our new &#8216;movies&#8217; array stored in the component state:<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><div class=\"code-editor-header\">App.js<\/div><pre class=\"language-jsx\"><code class=\"language-jsx\"><div>  <span class=\"token operator\">...<\/span>\n  \n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>container mt-5<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n        <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>row<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n          <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>col<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n            <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>card-deck<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n              <\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>state<span class=\"token punctuation\">.<\/span>movies<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span>movie <span class=\"token operator\">=><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>MovieCard<\/span> <span class=\"token spread\"><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">...<\/span><span class=\"token attr-value\">movie<\/span><span class=\"token punctuation\">.<\/span><span class=\"token attr-value\">fields<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">\/><\/span><\/span> <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span><span class=\"token plain-text\">\n            <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n          <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n        <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token operator\">...<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<p>We need to modify the MovieCard component so that the HTML image component src attribute points to the correct value in the object:<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><div class=\"code-editor-header\">MovieCard.js<\/div><pre class=\"language-jsx\"><code class=\"language-jsx\"><div><span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">MovieCard<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> title<span class=\"token punctuation\">,<\/span> year<span class=\"token punctuation\">,<\/span> description<span class=\"token punctuation\">,<\/span> imageURL <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">(<\/span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>card<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n    <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>img<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>card-img-top<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">src<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>imageURL<span class=\"token punctuation\">[<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>url<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">alt<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>Movie poster<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">\/><\/span><\/span><span class=\"token plain-text\">\n    <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>card-body<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>h5<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>card-title<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>title<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>h5<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>card-text<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>description<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>card-text<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n        <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>small<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>text-muted<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>year<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>small<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n    <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n  <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<p>Save and check out the running web app in your browser. You should see some really great looking, data-driven movie cards!<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"723\" src=\"http:\/\/upmostly.com\/wp-content\/uploads\/react-airtable-app-1024x723.png\" alt=\"\" class=\"wp-image-245\" srcset=\"https:\/\/upmostly.com\/wp-content\/uploads\/react-airtable-app-1024x723.png 1024w, https:\/\/upmostly.com\/wp-content\/uploads\/react-airtable-app-300x212.png 300w, https:\/\/upmostly.com\/wp-content\/uploads\/react-airtable-app-768x542.png 768w, https:\/\/upmostly.com\/wp-content\/uploads\/react-airtable-app.png 1286w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>The final component is below:<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><div class=\"code-editor-header\">App.js<\/div><pre class=\"language-jsx\"><code class=\"language-jsx\"><div><span class=\"token keyword\">import<\/span> React<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span> Component <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">'react'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">App<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Component<\/span> <span class=\"token punctuation\">{<\/span>\n\n  <span class=\"token function\">constructor<\/span><span class=\"token punctuation\">(<\/span>props<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">super<\/span><span class=\"token punctuation\">(<\/span>props<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>state <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span>\n      movies<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">componentDidMount<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token function\">fetch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'https:\/\/api.airtable.com\/v0\/YOUR_AIRTABLE_ENDPOINT?api_key=YOUR_API_KEY'<\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span>resp<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> resp<span class=\"token punctuation\">.<\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span>data <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n      console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span>data<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">setState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> movies<span class=\"token punctuation\">:<\/span> data<span class=\"token punctuation\">.<\/span>records <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token keyword\">catch<\/span><span class=\"token punctuation\">(<\/span>err <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token comment\">\/\/ Error<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>container mt-5<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n        <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>row<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n          <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>col<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n            <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>card-deck<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n              <\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>state<span class=\"token punctuation\">.<\/span>movies<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span>movie <span class=\"token operator\">=><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>MovieCard<\/span> <span class=\"token spread\"><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">...<\/span><span class=\"token attr-value\">movie<\/span><span class=\"token punctuation\">.<\/span><span class=\"token attr-value\">fields<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">\/><\/span><\/span> <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span><span class=\"token plain-text\">\n            <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n          <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n        <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> App<span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">MovieCard<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> title<span class=\"token punctuation\">,<\/span> year<span class=\"token punctuation\">,<\/span> description<span class=\"token punctuation\">,<\/span> imageURL <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">(<\/span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>card<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n    <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>img<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>card-img-top<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">src<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>imageURL<span class=\"token punctuation\">[<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>url<span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">alt<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>Movie poster<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">\/><\/span><\/span><span class=\"token plain-text\">\n    <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>card-body<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>h5<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>card-title<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>title<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>h5<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>card-text<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>description<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>card-text<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n        <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>small<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>text-muted<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token punctuation\">{<\/span>year<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>small<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>p<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n    <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token plain-text\">\n  <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">><\/span><\/span>\n<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"wrapping-up-react-and-airtable\">Wrapping Up React and Airtable<\/h2>\n\n\n\n<p>There you have it. We created a dynamic web app using React and Airtable.<\/p>\n\n\n\n<p>I hope you enjoyed going through this tutorial as much as I did writing it!<\/p>\n\n\n\n<p> As always, leave a comment if you run into any issues, or if you want more React and Airtable tutorials. <\/p>\n\n\n\n<p>See you next time!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, we&#8217;ll create a simple movie-themed web app using Airtable and React. So, what are you waiting for? Let&#8217;s get started!<\/p>\n","protected":false},"author":8,"featured_media":346,"comment_status":"open","ping_status":"open","sticky":false,"template":"post-tutorial-new.php","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[33,40,4,38],"class_list":["post-120","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-beginner-react-tutorials","tag-popular-tutorials","tag-react","tag-react-components"],"acf":[],"_links":{"self":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/120","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/comments?post=120"}],"version-history":[{"count":4,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/120\/revisions"}],"predecessor-version":[{"id":13074,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/120\/revisions\/13074"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/media\/346"}],"wp:attachment":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/media?parent=120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/categories?post=120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/tags?post=120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}