React Native Course – Android and iOS App Development
By freeCodeCamp.org
Published: Apr 10, 2023
Master React Native with this comprehensive course, covering everything from the basics of setup and components to advanced topics like navigation and fetching API data. Learn to build a weather app from scratch, complete with a sleek user interface and real-time data integration, while exploring concepts like state management, hooks, and styling.
💻 Code: https://github.com/Em01/weather-app-demo
âœï¸ Course created by @codecupdev
🔗 Instagram: https://www.instagram.com/codecup_dev/
🔗 Twitter: https://twitter.com/codecupdevâï¸ Contents âï¸
âŒ¨ï¸ (0:00:00) Introduction
âŒ¨ï¸ (0:01:25) What is React Native?
âŒ¨ï¸ (0:03:45) Expo
âŒ¨ï¸ (0:04:22) Setup with Expo
âŒ¨ï¸ (0:06:17) Setting up a custom app
âŒ¨ï¸ (0:10:17) Setting up Android Studio
âŒ¨ï¸ (0:12:03) The directory structure
âŒ¨ï¸ (0:12:42) Setting up linting
âŒ¨ï¸ (0:14:33) Setting up Prettier
âŒ¨ï¸ (0:16:35) Debugging
âŒ¨ï¸ (0:18:17) Native components
âŒ¨ï¸ (0:19:00) Core components
âŒ¨ï¸ (0:20:17) JSX
âŒ¨ï¸ (0:21:29) Working with components
âŒ¨ï¸ (0:21:57) What are components
âŒ¨ï¸ (0:23:08) Creating our first component
âŒ¨ï¸ (0:26:50) Styling basics
âŒ¨ï¸ (0:31:17) Layout props
âŒ¨ï¸ (0:32:37) The current weather screen
âŒ¨ï¸ (0:40:17) Adding icons to the screen
âŒ¨ï¸ (0:42:40) Components
âŒ¨ï¸ (0:46:01) Reviewing what we have learnt so far
âŒ¨ï¸ (0:48:52) Creating the upcoming weather component
âŒ¨ï¸ (0:52:17) Introducing lists
âŒ¨ï¸ (1:19:17) Implementing our list
âŒ¨ï¸ (1:09:10) Key extractors
âŒ¨ï¸ (1:11:41) Other FlatList props
âŒ¨ï¸ (1:15:01) Styling our FlatList
âŒ¨ï¸ (1:19:23) Images
âŒ¨ï¸ (1:22:31) Using an image in the upcoming weather component
âŒ¨ï¸ (1:24:10) ImageBackground
âŒ¨ï¸ (1:26:05) Props
âŒ¨ï¸ (1:35:17) Refactoring what we have done so far
âŒ¨ï¸ (1:43:04) Implementing the city screen
âŒ¨ï¸ (2:00:17) Refactoring the city screen
âŒ¨ï¸ (2:15:32) Refactoring the current weather screen
âŒ¨ï¸ (2:26:25) Introducing Navigation
âŒ¨ï¸ (2:34:37) Implementing tabs in our app
âŒ¨ï¸ (2:40:02) Styling our tabs
âŒ¨ï¸ (2:47:27) Extracting the tabs
âŒ¨ï¸ (3:06:55) State
âŒ¨ï¸ (3:15:07) The useState hook
âŒ¨ï¸ (3:19:24) Hooks
âŒ¨ï¸ (3:23:24) The useEffect hook
âŒ¨ï¸ (3:32:05) Adding a loading state
âŒ¨ï¸ (3:38:31) Using the open weather map api
âŒ¨ï¸ (3:39:31) Getting the users location
âŒ¨ï¸ (3:47:36) Seting up fetching the api data
âŒ¨ï¸ (3:52:38) Fetching the Api data
âŒ¨ï¸ (4:01:17) Making our own hook
âŒ¨ï¸ (4:05:17) Passing the data to our components
âŒ¨ï¸ (4:08:42) Updating current weather to use the data
âŒ¨ï¸ (4:14:32) Updating the upcoming weather to use the data
âŒ¨ï¸ (4:18:17) Installing Moment
âŒ¨ï¸ (4:21:17) Updating the city component
âŒ¨ï¸ (4:25:53) Creating the error screen
âŒ¨ï¸ (4:31:42) Some last refactoring
âŒ¨ï¸ (4:33:59) Bonus material🎉 Thanks to our Champion and Sponsor supporters:
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Erdeniz Unvan
👾 Justin Hual
👾 Agustín Kussrow
👾 Otis Morgan—
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news