If you’re wondering what the difference between React and Bootstrap is, think of them within the context of a novel. For those who don’t know, Bootstrap is a component library which gives us well documented, styled HTML components such as buttons, cards, tabs, etc. Now that we have our React app working, our second task is to add Bootstrap to the codebase. It should look something like this: Adding Bootstrap Come back here when you have the base app up and running.
Go to the Create React App Github repository page and follow the instructions on setting up a new React project. Instead, we’re using a tool the React team at Facebook have created called Create React App. We could do this manually, but that would take too long. Our first task is to create a new React project. That’s it! Just three ingredients for a delicious web app! Let’s open our text editors and terminals and begin, shall we? Oh, if you’re using Atom, be sure to check out the Best Atom Plugins for Front End Developers. Therefore, we’ll be using the following stack: I try to stick with the same tools and libraries in all of my web apps. Therefore, by the end of this tutorial, you’ll have created a great looking web app built using React and Airtable that lets you rate your favorite movies!
#AIRTABLE DEMO MOVIE#
We’re keeping with the movie theme in this tutorial because I’m a huge fan of movies.
If you’d like to read more about Airtable before we get started on our web app, you can check out their excellent getting started guide. The user interface feels very familiar to Google sheets, making it very easy to understand and use by non-technical people.
Just like in Google Sheets how you add your data in rows and columns, Airtable also lets you add data in rows and columns. So, what are you waiting for? Let’s get started! Table of Contentsīefore we begin, I’m sure some of you are wondering what Airtable is.Īirtable looks and feels like a spreadsheet, but it’s actually a database with an easy to use API that we can plug straight into our front-end with little effort. In this tutorial, we’ll create a simple movie-themed web app using Airtable and React.
0 kommentar(er)
