003 Teach Jenn how to Deploy a React App with Vite and Vercel with Anthony Campolo
Anthony Campolo teaches Jenn how to Deploy a React App with Vite and Vercel. Livestream from 7/5/2022.
In this video, we'll show you how to deploy a React App with Vite and Vercel. Vercel is a fast, scalable and easy-to-use CDN for React. Vite is a distributed web hosting platform that makes it easy to deploy and manage web applications.
We'll walk you through the steps needed to deploy a React App with Vite and Vercel. This video is a great way to learn about Vercel and Vite and get started Deploying a React App!
Anthony's contact information: https://ajcwebdev.com/
Checkout GitHub Repo of the project: https://github.com/jennjunod/reactapp...
Vercel App of Project: https://reactapp07052022.vercel.app/
00:00:00
00:00:40 Guest Introduction and Topic
00:02:30 Mention of hashnode: [https://hashnode.com/](https://hashnode.com/)
00:03:06 A bit of Anthony’s journey and the value of being a newb
00:06:50 Africa, Coding Therapist on Twitter: [ / africakenyah ]( / africakenyah); [africamincey.com](https://t.co/YrzStvYfQz)
00:08:23 Let’s get started with React, Vite, and Vercel (how to say Vite)
00:11:28 Why React vs Vanilla JS?
00:14:00 Generate project with yarn
00:15:10 What is terminal?
00:17:00 yarn create vite
00:19:20 What is CLI? Command Line Interface = Terminal
00:19:55 The first time “code .” does not work. A forever issue for Jenn
00:21:46 How to cd (change directory) into created folder
00:25:15 Node Modules, are what?
00:26:00 Run project locally on machine with “yarn dev” in terminal
00:26:18 What is local host?
00:27:16 React App Developer is made, in one click!
00:28:11 SRC Folder to app.jsx
00:32:09 3 functions of a file, import, the component itself, export into another file
00:36:38 upload to git repo (repo.new in browser trick)
00:42:46 [Vercel.com](http://Vercel.com)
00:46:00 Vercel app
00:49:13 What’s the difference between a webapp and a website? Website is static, webapp is interactive
00:51:40 What is an RSS feed?
*Tools/Languages/Products used:*
*React.js:* [https://reactjs.org/](https://reactjs.org/) [ / reactjs ]( / reactjs )
*Vite:* [https://vitejs.dev/](https://vitejs.dev/) [ / vite_js ]( / vite_js )
*Vercel:* [https://vercel.com/](https://vercel.com/) [ / vercel ]( / vercel )
*VS Code:* [https://code.visualstudio.com/](https://code.visualstudio.com/)
**Yarn**: [https://classic.yarnpkg.com/lang/en/d...](https://classic.yarnpkg.com/lang/en/d...)
Briefly mentioned:
Webpack: [https://www.vuemastery.com/blog/vite-...](https://www.vuemastery.com/blog/vite-...)
JavaScript Events: [https://www.w3schools.com/js/js_event...](https://www.w3schools.com/js/js_event...)
Yarn vs npm: [https://www.knowledgehut.com/blog/web...](https://www.knowledgehut.com/blog/web...)
Node: [https://nodejs.org/en/](https://nodejs.org/en/)
Mac Terminal (Command Line Interface): [https://www.techopedia.com/definition...](https://www.techopedia.com/definition...)
GUI: [https://www.gartner.com/en/informatio... graphics-based operating system,Apple Macintosh in the 1980s](https://www.gartner.com/en/informatio...)
git repo: [https://www.gitkraken.com/learn/git/t...](https://www.gitkraken.com/learn/git/t...)
Svelt: [ • 036 Teach Jenn Svelte Web Development with... ]( • 036 Teach Jenn Svelte Web Development with... )
Vue: [https://vuejs.org/guide/introduction....](https://vuejs.org/guide/introduction....)
Terminal shortcuts: [https://support.apple.com/guide/termi...](https://support.apple.com/guide/termi...)
Brave Browser: [https://brave.com/](https://brave.com/)
jsx: [https://www.w3schools.com/react/react...](https://www.w3schools.com/react/react...)
Component hierarchy in React: [https://dev.mobify.com/v2.x/get-start...](https://dev.mobify.com/v2.x/get-start...)
React Dev tools can help with hierarchy: [https://www.npmjs.com/package/react-d...](https://www.npmjs.com/package/react-d...)
1Pass: [https://1password.com/](https://1password.com/)