React Crash Course For Beginners 2023 - Build An Instagram Clone | React JS Tutorial

In this React crash course and tutorial, you'll learn React JS from scratch by building an Instagram clone with DexieJS and IndexedDb for browser storage. You'll learn how to build functional React applications, what React components are, state management, conditional rendering, handling data and mapping, and everything you need to know to get started in your React journey. It's very beginner friendly and easy to understand. Enjoy! CSS file and assets: https://github.com/ebenezerdon/react-instagram-assets Instagram logo: https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png GitHub repo: https://github.com/ebenezerdon/react-instagram Should you learn React or SolidJS? https://www.newdev.io/blog/solidjs-vs-reactjs Join this channel to get access to perks, challenges and dev hangouts: https://www.youtube.com/channel/UCstfxdhJ1CFLs9Db1kFyb1g/join All my social Links/WhatsApp: https://www.newdev.io/ebenezer Follow me on LinkedIn: https://linkedin.com/in/ebenezerdon Follow me on Twitter: https://twitter.com/ebenezerDN Follow me on GitHub: https://github.com/ebenezerdon ***Chapters*** Introduction - 00:00:00 Setting up our React js Instagram app - 00:01:56 Our React js Instagram Project overview - 00:04:37 What's in package.json? - 00:08:50 What are React js components? - 00:13:52 Adding our Instagram CSS file and image assets - 00:19:25 JSX in React: Structuring the Nav component - 00:20:30 Structuring the Bio Component with JSX - 00:25:39 Structuring the Gallery component with JSX - 00:37:45 Creating and using the Bio state of our React js app - 00:43:41 Updating the name and bio of our React js app - using HTML form - 00:50:49 Conditionally rendering parts of our React js app (our update form) - 00:53:05 Uploading photos in our React js Instagram app - 00:56:37 Creating the gallery state and adding photos - 01:03:04 Adding functionality for deleting photos - 00:08:51 Setting up DexieJS and creating object stores for persisting data - 01:12:48 Persisting the user details and photo in IndexedDb - **01:20:15** Using the useLiveQuery hook for the gallery component - **01:26:25** Using DexieJS to add and delete photos in our React js Instagram app - 01:30:12 Homework - 01:33:40 #webdevelopment #coding #programming