Check out a free preview of the full Complete Intro to React, v9 course
The "Wrapping Up" Lesson is part of the full, Complete Intro to React, v9 course featured in this preview video. Here's what you'd learn in this lesson:
Brian wraps up the course sharing a few additional resource and talking through the deployment process with a React app. The build command generates the static files for the client app. These files can be deployed to any web host. The API server would need to be deployed to an environment that supports Node.js.
Transcript from the "Wrapping Up" Lesson
[00:00:00]
>> Brian Holt: So, yeah, thank you. Thank you for all sticking with it, this is a lot of material to take in. I think it's a pretty usable and fun to use library for building interfaces. I still use it to this day, just for my side projects. I do dabble around with solid and HTML and all those kinda things as well, but it's old reliable for me to come back to React.
[00:00:22]
Something I'm gonna have to maintain for a while and have a team work on all that kinda stuff. I still think React is the best library for it, fight me. So, yeah, I'm gonna assert that what I taught you today is 95% of what you need to know about writing React professionally.
[00:00:42]
The last 5% is a pretty long tail and gets into some really strange performance details, like use transition, and some of these things I didn't really end up talking about. If you're doing advanced animations, or animating between pages, or something like that, you'll need a bit more than I talked about today or if you're building like libraries.
[00:01:04]
But for just building interfaces, like everything that I did at Netflix, I think that's fair to say, everything that I did at Netflix is encapsulated what I taught today. So that should tell you something.
>> Brian Holt: And I'll say, yeah, the last 5% I'll be teaching you an intermediate React v6 which is scheduled later.
[00:01:26]
>> Brian Holt: So you might be asking what do I do from here? Well, our intermediate React, v5 has a lot of good stuff in it, and another dashing gentleman in a very nice looking sweater there. I go through all the hooks that exist React 18 in depth, so reducer, memo, callback, I didn't talk about any of these today.
[00:01:49]
We do tailwind if you wanna talk about that, more performance. Code splitting, we kinda talked about today. You could probably actually end up skipping some of this, cuz this will be covered better with v6. I did talk about deferred value and useTransition. We convert the entire project to TypeScript, that might be helpful.
[00:02:09]
Redux and testing this, I moved that into intro cuz that seems more appropriate. So that's out there for you if you wanna do that. There's a front-end master's learning path, there's other stuff on here React performance, TypeScript, Next.js lots of good goodies in there. Next.js, Remix/React-Router, that's all goodness.
[00:02:37]
And then again Tailwind, there's a great Steve King Course on doing Tailwind as well, which is people seem to love with React. Let's just talk a moment about other stuff you could do. You could build your own app, I always encourage people to build apps, cuz that's usually the way that I learn the best.
[00:02:58]
For work I had to build an example app inside, I haven't HTMX very much, and so I spent a bunch of time learning HTMX building a sample app, right? So I think that's the best way to internalize this. I just picked the dumbest idea in my head, I'm gonna go build that.
[00:03:14]
One of the ones I just built recently was associating my Strava and associating my Spotify, and then it would read what music I listened to on my runs, and then it would use open AI to generate stupid titles for my runs. That was it, it's an objectively terrible idea, but I did it, and I learned a bunch of stuff about the technology I was working with, right?
[00:03:37]
So do stuff like that, I encourage you to build the Thomas tabs. The Sarah Vieira is an awesome developer relations person on Twitter. She wants to bring back stupid, and I wholeheartedly endorse that motion. One more thing is, people like to deploy their apps, which I think is a kinda cool thing to do with this afterwards, you can put it as part of your portfolio.
[00:04:01]
Or, I don't know, just learn a bunch of stuff about infrastructure, which I'm also very much into, obviously. So I wanted to talk a second, I was like, how would you go about deploying this app? The first thing, so let's stop our server here, we'd made an npm run build.
[00:04:18]
We already did that at the beginning of the course. This will build everything into a very nice ready to go package here called dist. So you have index.html and all of your static assets. So that's cool, that's all ready to be deployed to a CDN. You would also have to deploy your API, so let's talk just a second about what you would do there.
[00:04:47]
>> Brian Holt: So this is the API.
>> Brian Holt: The first thing is, this is all running on SQLite, which there's another good course on Frontend Master, if you wanna learn about SQLite that I taught.
>> Brian Holt: So you either need to move this database off of this server, or you just have to accept that it's going to not preserve your data long term.
[00:05:11]
One of those two things, if you don't care about saving your database, by all means leave it just the way it is. If you care about saving your database, there's a cool database company called Neon, I don't know if you've heard of it, it's pretty cool. You could definitely load this SQLite database directly into Neon and then put the NEON connection string in here.
[00:05:31]
I am 95% sure that this is just all very dumb SQL that would all work directly with Postgres. So you would just have to change from this SQLite driver to something like the Neon serverless driver or something like that. It would be pretty fast to convert this from SQLite to Postgres, or you could use something like Turso, right, which does SQLite in the cloud.
[00:05:55]
All of those are valid options. And then you'd have to deploy this to something like Vercel or Elastic Beanstalk or something like that.
>> Brian Holt: So if you're able to do that, deploy all your static assets, deploy your app, change your database. If you care about changing your database, then everything should just work.
[00:06:15]
Last thing, you might need to move, you might need to move the style.css and some of the images over to this project, cuz that's kinda where they belong. I was kinda cheating by making it available on the API so that you never had to worry about where the images of the styles were coming from.
[00:06:28]
But that might be the case as well, any questions? All right, nailed it, no questions, perfect dismount. [LAUGH] [APPLAUSE]
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops