React Native Course - Android and iOS App Development
ฝัง
- เผยแพร่เมื่อ 31 ก.ค. 2024
- 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: github.com/Em01/weather-app-demo
✏️ Course created by @codecupdev
🔗 Instagram: / codecup_dev
🔗 Twitter: / 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: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news
Are you kidding me!! Today I had an interview and I was asked if I can differentiate between React and react native and I answered I don't have a knowledge in react native...4 hours later you make a full course on that...thanks man
OMG!! 😂 So can you tell us which company it was and about the Job Role??
@@screenofmohar2860 it was a startup...for full stack developer
@@Avatar-Roku Understood, thanks bro for the response 🙃✌️
Why people hiring fullstack developer for junior level? That's insane spec
Good luck ❤
this is like the 5th tutorial i've tried for react native and finally one that's not outdated, thank god
I swear I was looking for a React Native tutorial today Thank You so much for this....I'M nine minutes in and I can already tell what a gem this ...What a great teacher🙏
x2...
Thank you for always providing courses like these, you guys are treasures.
You are a great teacher! I have never enjoyed an IT course as much as this one. Your teaching style is easy to understand and you simply concepts so well. I look forward to more content from you for freeCodeCamp. Thank you!
Compsci / programming. Not IT
Guys, you have no idea how you help tons of people. God bless you!
Loved every second of this React Native tutorial! completed it after some time due to some roadblocks but came back to it and nailed it. thanks!
You keep what you promise! many thanks I was expecting this one!
Thanks guys!!! I was expecting this course from you :D
Awesome tutorial. The best one actually. From typing everything from the scratch to intentionally leaving bugs so you can explain how to debug, amazing!
I felt very confident after completing this tutorial!
This is an amazing course. I finally got to learn react native in a day. I was hiding behind flutter, i am glad i watched this.
I never comment, but this is an outstanding course, very clear. To the instructor , keep making videos!
The most amazing course EVER! Very well explained. learning Javascript has never been so easy! Thanks to this video I'm now able to create my first IOS app
That was a great introduction to RN! Thank you guys!
One of the best TH-cam tutorials I have ever watched
Finally most awaited course!
Perfect Timing! ❤
Fantastic course! Commited a day to complete it and very glad I did. Recently I've been working on a project using Flutter and I'm just not really enjoying working in the framework, however React Native seems clearer to use to me so I'll certainly be re-writing! Thank you for the thorough course, I've coded along so I'm going to use the knowedge to tweak my Weather App more and experiment 💪
mind if i ask which is harder between flutter/react native ?
@@tarakbelhiba3168 depends ...if you know fundamentals both are pretty easy. Personaly I find flutter easier but react native is also easy to pick up
thats the error m getting
Just finished the course, great material
This was a great introduction to React Native! I'm excited to learn more and more
Amazing course
Thank you so much guys❤
I was looking react native course with last update and now you posted this wow😮
Thanks, i was looking for a short and good react native 😊
Finally after many days of debugging, debugging and more debugging, I've finished the app! This is my first time using React Native, and actually React itself, but you made this course so easy to understand and follow along. It's very motivating to have a working app beyond all the frustrating lines of errors. Thank you, Emma!
whats the diff between react and react native?
@@hatty101 react native is for the front end of mobile applications while react is for web applications
@@hatty101 One is for web browsers (chrome, mozilla, edge) and the other is for mobile devices (phone, tablet).
damn ... the react native and react js are so much fun to use , thanks for your help
Excellent! Watching this after getting a React native junior role!
I've done other YT tutorials and courses on codecademy and this is by far the best! Well done!
Great teaching by the great lady!! Awesome lecture.Thank you from the bottom of my heart!!
Just Completed the complete course and hand down this is one of the best reactnative courses out there , your explanation was on point and the amazing coding techniques were a cherry on the top , loved every bit of it
what kind of apps can you build now that you have completed this course?
can you code figma level design after this course?
Do you need any basics of other languages (like JS or ReactJS) to follow the course?
@@PizzoLab You need to know js first
@@yyyd6559 Yeah, I learned JS and currently practicing with React in the meanwhile.
I discovered that React was the right choice for my purpose.
Thank you!
This is an excellent video, I really appreaciate your approach, even if it means having to type out every single word, but some of it after a while that can become a little daunting for the viewer. what I mean by that, there is a plugin in vs code called simple react snippets that lets us emmet some of our react code so that we can use shortcuts to type out some react code. For example:
'imr + tab' creates import React from 'react'
'sfc' + tab' creates const NameOFComponent =()=>{
return(
);
}
export default NameOfComponent;
sfc - stateless functional component
Aside from this little detail, your video is by far the best react native video I have ever seen. I have searched high and low for a very good comprehensive 'not banging my head against a wall' type of tutorial.
I also have to commend your approach for how you break down your code in such a way to keep everything tidy and clean. That is the mark of a true developer.
Wow, this course comes at the right time when I'm learning about React Native. I am a 3rd year university student and am planning to do an internship in mobile software development, really thanks to FCC and author Emma Williams. Big thanks from Vietnam 🥰.
2k2 đúng hong bạn?
@@buiducphat Hi bạn, mình 2k2 😁
Great course ! Thank you !
thank you 🙏, really awesome course for beginners
thank u Guys! Perfect time
Thank you so much, Need More & More React Native Advanced Project
Absolutely phenomenal course! The instructor's clarity and depth of knowledge in React Native made complex concepts easy to grasp. Each tutorial was well-structured, with practical examples that really helped solidify the learning. Highly recommend this course to anyone looking to dive deep into mobile app development with React Native. Great job! 👍📱
This was a great tutorial! 😁 Please consider a follow up intermediate and advanced series 🤞on this or some other platform. You have a good teacher style and nice cadence. Thanks
Excellent course for beginners
Great explanation with examples ❤❤❤❤❤
This tutorial is worth mora than $100. Thank you. and may god bless you for everything.
Looking forward to this course
perfect timing !
Right on time👏🏾
Much needed change. Must watch.
Patiently waiting for Ionic Tutorial
Nice tutorial by the way
Thank you for the free to use pictures! 😊
Very helpful thank you for your work
If you have problem with dotenv, dont use import statement. Access from process, like const api_key = process.env.expo_api_key, also in the .env add expo before the name, dont know if its requred like in vite for example, i added it because thats in the expo documentation.
Accessing from process works, thanks!
mi cerebro explotó cuando escuché el acento británico jaja, me encantó el curso!
Thanks, Emma Ma'am and the freeCodeCamp to provide this superb React Native tutorial, I have watched many videos but none helped but this one did. Thank you so much.
Good course , but I think you should have developed with the emulator side by side so we can see the changes in style etc in real time. This way you take advantage of hot reload.
Thank you so much for the awesome content 🙌🙌👌👌😍😍👍👍
Excellent!
Excellent tutorial.
if your getting an error that says location is null, then add a check like:
if(location){
//rest of code
}
just so the fetch weather function doesn't get ran when location hasn't been set yet
Nice tutorial 😍
Thank you very much!
The course seems to be pretty good
Perfect timing
Thank you so much!🥰🥰🥰🥰🥰
Thanks a lot for this
Need more videos related to Reactnative ❤
Nice React Native Course ❤.
Thanks guys 😊
Great video.
Thanks a lot ❤
Hello, I really liked your method, it is very educational.
When adding the location functionality to the app at 3:43:50, don't forget to add the parenthesis after requestForegroundPermissionsAsync.
thank you so much, saved me
🔥🔥🔥 thanks
Took me along time to get the ract native CLI app up and running, realised I had to download java and get java and android into my envrionmental variables! Hope it pays off and its not all just on the expo app
great ,thanks
when adding my safe area view component it stayed exactly the same place as where it was before i put it. what should i do?
Thank you ❤
Nice vid!
Thank you 🙏
Thanks❤❤
Thanku so much
best react native tutorial for begginers😇
The setup for this is brutal. You go through so many prompts without saying WHY we are using the defaults and you do not explain what certain components are. You also say in the very begging that you aren't using Code and then all of a sudden you are?
Great!
I got an error like this from Vscode: 'dt_txt' is missing in props validation.
The same code works but Vscode shows the above error, How can I remove it?
Thank you sir
Thank u miss ❤
I created an Apk But it is showing white screen after the loader , App is working fine in Expo App . ??? Please someone help
love this , best ladies
Very good content
Much appreciate it!
But what about this sunrise and sunset timing? :>
Is anyone there have problem with Unrecognized font family 'fontAwesome', I try to figure out on the Internet, but I can't browse node_modules/react-native-vector-icons. I set up my project over react native cli.
at 12:06 i cant find something similar to her screen on my devices. and expo is asking me to create a new project over and over again. And if i type in the same Project name it tells me i already have a project with this name... help pls
Excellent content and it would have been super great if done with bare react native without expo 🎉
Sir thanka for this
nice tutorial
Thanks for the course. Looking for a more complete one like the Flutter course that have 37 hours ç_ç
Can we get a newer flutter course too, please? 🙏
I just create RN project with React Native cli, but I can't import expo/vector_icons. Could anyone tell me how to fix this?
Why when I use SafeAreaView my text does not go under the bar of etas
thank you
Please make a detailed course on graphql Apollo server and client
it's been three days and i'm still stuck in the basic configurations of eslint and prettier .
i get tons of errors....
upload an updated flutter course also pls. it would be great if you do that.
Can someone provide tips for Android based phones instead of X-Code and iPhone based iOS ??
One thing I know of is Expo for sure, what else ?
Excellent superrrrrr