Create a New React App with degit
Our goal is to create an application that allows us and others to create and manage event listings to help others discover events in their area. The first step in getting there is getting set up with a new application that we can start building upon.
In this first lesson, we’ll dig right in by creating a new React application on top of Vite. We’ll learn how we can use an existing template cloned to our local filesystem using degit, to ultimately give us the ability to more quickly start a new project with some templated groundwork that we can use between this and other new projects.
We’ll explore our new application including some of the basic UI and routing that will allow us to jump right into getting started wiring it up with Appwrite.
What You’ll Learn
- Create a new React app from a starter template
- Get familiar with how the app is organized including routing
Resources
Lecturer: [0:00] We're going to dig in creating a new React application. To do that, we're going to use a starter template, which is going to give us a great starting point for creating our new events application.
[0:09] As we can see, this template is going to give us some basic UI that's going to make it easy for us to dig right into Appwrite. To follow along, you can find the link right inside of the lesson description. Where to get started, I'm going to use de-git in order to clone down this project to my local environment with a fresh start.
[0:25] I'm going to go ahead and copy this command and paste it in my terminal, where the only thing I'm going to do is change the directory and project name to my Livebeat, where I'm going to then hit Return. We can see that that project was cloned down to my local environment, where now I'm going to navigate into that directory.
[0:41] I'm going to run npm install to make sure I install all the dependencies for the project. Where finally, I can run npm run dev, which is going to start my development server. When I open that up in my browser, we can see I have my new local instance of Livebeat.
[0:56] Now before we dive in, let's explore the project. If we start to look around at the files, we can see that this is project built on Vite. We can also see that we already have Tailwind installed, as well as TypeScript, where this is already installed and configured so we can use those tools.
[1:11] In addition to that, we're also using a package called Wouter, which if we navigate to the source directory and look at the main file, we can see that we're using Wouter in order to set up routing for our application. Here, we can see that we have routes defined for places like our home page, our login page, and even the event pages.
[1:29] Now similar to what you might expect out of a React-based framework, all of the pages are located inside of the pages directory, including that home page and any of the other pages that we have set up. We also have a variety of components that are put together in order to create our basic layout and any of the basic UI elements inside.
[1:45] Finally, because we don't yet have connection to a database in order to show dynamic events, we still want to be able to show something in our UI. We have a data/events.json file, which is going to include links to all of those different events, just so that we have something to work with.
[2:00] With that event data imported, we can map through that and show whatever we want inside of the UI, which ultimately gives us our Livebeat application.
[2:08] Feel free to continue exploring around the application code. When you're ready, let's get started with the next lesson, where we'll learn how to create a new Appwrite account and install and configure the Appwrite Web SDK.