🔴Build your first App in React Native in under 2 hours [ Tutorial for beginners ]

Рет қаралды 350,204

Күн бұрын

Whether you're a beginner or advanced in Javascript, this is the perfect chance to follow along and add to your portfolio as your first hybrid mobile application using React Native. I'll guide you through designing the UI and explain each line of code, so you can learn modern Javascript, Typescript and best practices in mobile development.
📚 Enroll NOW in The Full-Stack Mobile Developer course and don’t miss out on your chance to become a 6-figure dev! Check out what our successful students are saying about their experience:
academy.notjust.dev
🎒 Download the Asset Bundle (Images, Dummy data, PDF presentation): assets.notjust.dev/tesla
⌨️ Source code: github.com/Savinvadim1312/Tes...
💬 Join the notJust Development gang and let's build together:
Twitter: / vadimnotjustdev
Instagram: / vadimnotjus. .
Facebook: / notjustdev
LinkedIn: / vadimsavin
Discord: / discord
Timecodes::
00:00 Intro
02:07 What will you learn?
03:04 Who am I?
04:14 Prerequisites
06:52 Init the project
17:00 Render your first content (View, Text)
25:30 Background Image
31:18 Create your first Custom Component
42:52 Button Component
54:43 React Props for Button Component
1:08:36 React Props for Car Item Component
1:22:53 Render a list of items: FlatList
1:35:26 FlatList Snap effect
1:39:02 Header component
1:47:36 DEMO
#VadimSavin #notjustdev #tesla

Пікірлер: 426

@notjustdev 3 жыл бұрын

🎒 Download the Asset Bundle: assets.notjust.dev/tesla 📚 Enroll in "The Full-stack Mobile Developer" and become a 6-figure dev in 2021: academy.notjust.dev/

@davidn907 3 жыл бұрын

Hey Vadim, the resources are not being sent to my email after filling out the form on the link

@notjustdev 3 жыл бұрын

@@davidn907 I see some issues from my end. Please try later today. sorry for inconvenience

@davidn907 3 жыл бұрын

@@notjustdev Okay will do. Thanks

@tendaikaruma738 3 жыл бұрын

Me to im still not getting the resources

@KishanSingh-it6ff 3 жыл бұрын

In this demo app our image being slightly being small from downwards can you please help to get rid of this.. please sir please

@hasansolak23 2 жыл бұрын

It is so fun to watch you coding a cool app like this and explaining the whole stuff. Thanks a lot. It might be my first time watching a coding video on 1x speed and not getting bored.

@TonyWithDaChopper 3 жыл бұрын

You Made me extremely confident to start creating more apps!!!! I love this way over android studio !!!! You are the best and inspired me in not only a career but a hobby as well! thank you for taking the time to educate!

@parthapratimmanna4146 2 жыл бұрын

Built it with you..in fact it was my first React Native project and I had no experience. thoroughly enjoyed Vladim :))..lots of love and support.Thanks for such a nice content.

@walopes 3 жыл бұрын

Amazing Vadim! Just finished it today. Many thanks man

@pasinduudara7212 2 жыл бұрын

This is my first react app and I did it from a to z . Thank you for clear and complete instructions!

@notjustdev 2 жыл бұрын

Awesome

@pasinduudara7212 2 жыл бұрын

@@notjustdev Will you please help to convert this app to installable apk file. Is there a way or is it possible ? If there is a video to do, please suggest that tutorial for me. I'm really enthusiastic to do that 😊

@raphaelfr8778 2 жыл бұрын

I’ve learned a lot from this one video. Love it. Can you PLEASE make a part 2 video to show how to display a menu when you click on the hamburger icon and how to redirect to another page? It will be very helpful to me. I am just starting out and find your explanations very understandable.

@carlharrison10 3 жыл бұрын

I love learning along with your tutorials Vadim - keep it going sir ... great work!

@notjustdev 3 жыл бұрын

Great to hear!

@arpit5552 Жыл бұрын

Thank you so much, I am just starting and this is the first tutorial that i was able to follow and understand properly.

@ouardaoub4166 2 жыл бұрын

This my first React Native app, I'm so proud of the result ! thank you

@bugedits2140 2 жыл бұрын

dude you are truly a blessing!!!! i loved this tutorial ❤❤❤ great job man.

@journeytocoding816 2 жыл бұрын

Nice I am learning react will jump to your tutorial later. this is the best day I got your tutorials. I am now your subscriber. Thank you for sharing knowledge.

@meggsnbacon5440 2 жыл бұрын

Just finished ! Thank you so much for the tutorial 🔥

@kushagrabainsla1641 3 жыл бұрын

I just started react native, so did it side by side and I really loved the whole project and your way of teaching, Thank you

@notjustdev 3 жыл бұрын

That's really awesome, congrats on finishing your first React Native project

@kushagrabainsla1641 3 жыл бұрын

@@notjustdev Next, I'll be watching your whatsapp project.

@notjustdev 3 жыл бұрын

@@kushagrabainsla1641 Awesome, let me know how it goes

@shivanigaddagimath6105 3 жыл бұрын

Hey Kushagra! Seems like you have some valuable skills! What are you upto currently? Are you open for internship/job opportunities?

@kushagrabainsla1641 3 жыл бұрын

@@shivanigaddagimath6105 Hey, I'm open for an internship offer.

@whatsnewnow4469 Жыл бұрын

one of the best guide after reading documentation in react native. Best Kickstarter for app development.

@alexandergavrailovdronevid9742 3 жыл бұрын

It's really hard to see the code. For future videos maybe you can zoom in a bit

@marshalclink 3 жыл бұрын

This is an excellent tutorial, thank you for uploading. For someone looking into React Native for the first time, this is a great resource.

@notjustdev 3 жыл бұрын

Glad you enjoyed it!

@dont_race_me 2 жыл бұрын

how do i download react on my pc

@rdias19 2 жыл бұрын

Thanks for the content. Very clear and detailed instructions. Helped me a lot

@hamzaashraf9529 2 жыл бұрын

Great Tutotial! I just loved it. Now it become very easy to follow next steps thanks buddy

@lki7303 2 жыл бұрын

One of the best Tutorials, helped me alot, thank you very much. Was very understandable espacially when splitting the code into little components. Keep up the great work!!!

@notjustdev 2 жыл бұрын

Great to hear!

@100sainadh 2 жыл бұрын

Really I loved it.I had knowledge on react native but with this basic project I increased my confidence levels .Thanks Alot Vadim.

@notjustdev 2 жыл бұрын

Glad to hear that

@michaelsaucedo3952 3 жыл бұрын

Very nice thank you. I like to snap Vs Code on one side and KZfaq on the other. If you can make the text a bit larger it would be nicer for us here at the learning center. Looking forward to more.

@thatolebethe3238 2 жыл бұрын

Thanks alot for the videos man. Big fan!

@hbarcellos76 3 жыл бұрын

@Vadim, congratz for the video. I used it to teach my son how to code (using modern tools). Do you have any other video (or resource of any kind) teaching how to create several views and navigate back & forth between them? Like most apps, (i.e. navigation bar at the bottom with different screens for each item).

@Reektrades Жыл бұрын

Just completed, took me 6 hours - thank you its my first React App

@narenbakshi6301 2 жыл бұрын

Thanks man, you explained it very well, very well designed, something which every beginner wants and loves to follow 🙌

@notjustdev 2 жыл бұрын

Glad it was helpful!

@flooding1554 3 жыл бұрын

Looking forward to see you making a Reminder app sir ❣️

@JustinThegamerBR 3 жыл бұрын

i love u clone, I am Brazilian, you best developer

@Sam-81810 2 жыл бұрын

Thank you so much for this! Easy to follow along and I learned so much from this one video.

@notjustdev 2 жыл бұрын

Glad it was helpful!

@tonybenci2796 3 жыл бұрын

Very helpful, got me building React Native Apps in ... Let's see... 2 hours... excellent Vadim could you please share the shortcuts library you are using for the FC shortcut, I can't see to find that specific one.

@ozneee 3 жыл бұрын

thanks a lot for sharing your work, it really help to understand react native !

@joshueneyra3661 3 жыл бұрын

I'm loving your videos! ❤️🚀

@notjustdev 3 жыл бұрын

thanks brother

@nilampatel1913 3 жыл бұрын

Amazing work !! can we implement pixel-perfect instead of dimensions? looking forward more videos on redux , redux saga with AWS database and API gateway

@danielnjama1470 2 жыл бұрын

wow, seemed easier than I thought. Nice tutorial

@user-xi7xb8ft2h 2 жыл бұрын

I love learning along with your tutorials

@ricardohernandezmendez4207 7 ай бұрын

I have learned a lot. Thank you!🚀

@pratapgavali4786 2 жыл бұрын

Thank you for this tutorial, I have created my first mobile app 😊😊

@keithlamontdavis8047 3 жыл бұрын

This was truly excellent. Excellent balance of not too much handholding but not too difficult for beginners (with some javascript experience). Thank you for this. Subbed!!

@notjustdev 3 жыл бұрын

I'm glad you liked it. Welcome onboard

@creative01st 3 жыл бұрын

Hey man, it was good to learn from you, would you also do a tutorial for videos and only audio embedded within apps

@raj010574 3 жыл бұрын

Very nice tutorials. Thanks Vadim.

@stevenkebila 2 жыл бұрын

This was a great and fun tutorial. Loved it

@shihab2218 Жыл бұрын

very good initiative video. thanks man . Love from Bangladesh

@Leftlifetech 2 жыл бұрын

Great tutorial for starting React Native, I am stuck though. I have followed everything and reviewed it repeatedly from start to 40.14 but I continue to get an exception error. Error: Requiring module "components/CarItem/styles.js", which threw an exception: TypeError: undefined is not an object (evaluating '_react.StyleSheet.create'). Everything in my code is what the video has. Been trying to figure this out.

@Michael-xj8ju 2 жыл бұрын

Perfect introduction to React Native. Thanks!

@notjustdev 2 жыл бұрын

Glad it helped!

@kug3lschr31b3r 2 жыл бұрын

With a small base of knowledge of react in front of this video =>it is very good. Well explained and you have a clear voice. Very important for non-native speakers like me.

@notjustdev 2 жыл бұрын

Glad it was helpful!

@biswanathtewari9220 2 жыл бұрын

hey, it was a great tutorial and it helped me to shift from react to react-native. Great Stuff man!

@bkosimi Жыл бұрын

Looks great on my iPhone, bud! Thank you for this great tutorial. Love it!!!

@notjustdev Жыл бұрын

Happy to help!

@shreyasphadnis5550 2 жыл бұрын

amazing explanation finally understood flatlist and animations ! thanks alot

@notjustdev 2 жыл бұрын

Great to hear!

@praj777 2 жыл бұрын

Thanks a lot, I was able to do it with detailed tutorial.

@guymerlindyangnou117 3 жыл бұрын

Hey Vadim, it's really well explained. thank for that

@notjustdev 3 жыл бұрын

Glad it was helpful!

@hascardenas 3 жыл бұрын

Thank you very much for these videos!

@Squad2ND 2 жыл бұрын

Thanks for the tutorial! Really nice to get into React Native this way. If you want some small feedback, you might wanna limit the numbers of "Uhhhhh" between sentences when talking.

@boldthoughts1 3 жыл бұрын

Loved it and very comprehensively explained

@notjustdev 3 жыл бұрын

Thanks

@sameralsudani7323 3 жыл бұрын

Well done, I love this tutorial

@notjustdev 3 жыл бұрын

Thanks Samer

@user-hs3dh4di6k Жыл бұрын

thank you bro it very very interesting and useful. I am new react native developer and I highly recommend to do this project for other new devs.

@vitaliano01 3 жыл бұрын

Thank you for the good and fun introduction Vadim

@notjustdev 3 жыл бұрын

Glad you enjoyed it

@areebchoudhary3785 2 жыл бұрын

Great learning platform you are giving us, I've learned a lot of things in this precise coding, loved it, Thanks Vadim Savin, God Bless you.... ❣❣❣❣❣❣❣❣

@notjustdev 2 жыл бұрын

Glad it was helpful!

@wahidamini7591 2 жыл бұрын

It was greate man. well done

@RadCor 3 жыл бұрын

Тот момент когда русскоговорящий смотрит русскоговорящего на английском :D За туториал спасибо!

@user-bh2sz9tz6f 3 жыл бұрын

@h_worker1826 3 жыл бұрын

Да уж, русский акцент выдаёт себя.

@projectcubit1494 2 жыл бұрын

Я не русский, поэтому смотрю учебник русского парня на английском.

@syedjaffersathikful 2 жыл бұрын

Amazing, Excellent, One of best video, I have ever seen... Thanks for your time and effort for us..

@notjustdev 2 жыл бұрын

Thank you for the kind words. It means a lot to me

@rhinopromptmovers3468 Жыл бұрын

Great Tutorial there.Definately one of the best tutors with detailed and carefully thought out material.Kudos

@rafaellozano6340 3 жыл бұрын

You explain very good! thanks for share your knowledge!

@notjustdev 3 жыл бұрын

Glad it was helpful!

@dnial6992 3 жыл бұрын

This is great and mind blown. Thank you for sharing sir. May God bless you sir

@notjustdev 3 жыл бұрын

Thanks and welcome

@vinuthmarasinghe3932 2 жыл бұрын

You deserve 100 mil subs !!! keep it up sir

@themiyajayakodi4052 3 жыл бұрын

Thank you very much.It's very helpful tutorial.

@pranavgoswami2814 3 жыл бұрын

Dude you made it so easy...!!! Outstanding. But...... . . . . . After seeing car price at 19:28, I knew that "you are a man of culture as well"

@notjustdev 3 жыл бұрын

Thanks a lot! . . . That's even funnier for me now knowing that it was not intentional. I guess it is in my blood 😂 I think that will be my thing, and who knows will understand :D

@mylespang9774 7 ай бұрын

Thanks a lot! Much appreciated! I got it running, lol

@dnial6992 3 жыл бұрын

it's nice to see you develop voting app with it's database. Looking forward to learn it from you sir.

@notjustdev 3 жыл бұрын

Thanks for suggestion

@sudhanshuwu 2 жыл бұрын

Loved It

@notjustdev 2 жыл бұрын

Glad you liked it!

@Y09176 2 жыл бұрын

Thanks for your efforts, it's very helpful ❤⚘

@alexiszucco3379 3 жыл бұрын

Nice work!! Thanks 4sharing

@notjustdev 3 жыл бұрын

Thanks for watching

@dolapoajayi2156 3 жыл бұрын

to change the button background color and text color we can also use spread operator like this; const bgC = (type)=>( type==='primary'?'black':'white' ); style={{...styles.btn,backgroundColor:bgC(type)}}

@minespace101 3 жыл бұрын

Nice work! Thank You..

@zeyuwang1790 3 жыл бұрын

SUBSCRIBED! This is amazing! Could you please please do an Airbnb clone with react native if possible? I would greatly appreciate that.

@notjustdev 3 жыл бұрын

Thanks a lot for the support. Airbnb seems like a fun project to create. I will definitely clone it, thanks

@thepocguy 3 жыл бұрын

Excellent explanation! Subscribed.... and oh i thought for abut 2 hours after the session and then it popped in my mind.. Tom Cruise from Tropic Thunder...:p

@notjustdev 3 жыл бұрын

Thanks

@prashoonbhattacharjee8211 3 жыл бұрын

Very fun & informative video!!

@notjustdev 3 жыл бұрын

Glad you enjoyed it!

@jeuxdeau2009 3 жыл бұрын

dude this is amazing. thank you

@notjustdev 3 жыл бұрын

Glad you like it!

@EvolutionX91 2 жыл бұрын

Amazing content!

@codeermite9636 2 жыл бұрын

Hello thank you for all you're doing for us. I'm very proud to be your students. So can you make a tutorial in how to connect a react native app to a PHP made api

@devanshshukla2840 2 жыл бұрын

Can you please tell me which theme you have used for the WebStorm? Looks good, just wanna try.😁😁

@ucchinhnguyen6509 3 жыл бұрын

Thank you very much, from Vietnam. But I have a question, in 35:02, what snippet did you use?

@gurgen5217 Жыл бұрын

It was great, my first app, like и ещё отлично понятно и просто говоришь по английский

@notjustdev Жыл бұрын

Spasibo :)

@irocx8745 3 жыл бұрын

Great tutorial with hands on coding 💯

@notjustdev 3 жыл бұрын

Glad it was helpful!

@saifsaeed1158 2 жыл бұрын

thank you so much for this amount of information in this tutorial , bless you brother

@notjustdev 2 жыл бұрын

You are very welcome

@lukelu Жыл бұрын

Hope to hear your expertise: how to make the design responsive so a rotation won't mess up the layout. I notice your github repository uses Dimensions but a listener would be required, which makes the app slow. Anyway, thanks for your Great tutorial !

@abdih1230 Жыл бұрын

You can use the useWindowDimensions hook to listen to screen changes and adapt the screen to landscape mode and other screen size changes, it will notify you whenever that happens.

@arthuroyugi2045 Жыл бұрын

Great tutorial, was wondering how to create a more responsive design for smaller screens

@kazuyaboossiii9889 2 жыл бұрын

Amazing. thanks man.

@tebogomodingoane3967 3 жыл бұрын

Hi there Vadim, thank you si much for the tutorial. I've got an error in the index page for this => when declaring the props

@notjustdev 3 жыл бұрын

Send a screenshot in discord, I will try to help

@AngeloSanfilippo Жыл бұрын

Hi Congratulations on your videos. I have recently started coding with react native and I would like to ask you if you have any suggestions for creating an event calendar using react native (expo) Thanks in advance for the reply

@Gangbuster74 3 жыл бұрын

You earned a subscriber bro👍

@notjustdev 3 жыл бұрын

Thanks

@EcklerV 3 жыл бұрын

Привет, Вадим! Спасибо большое за туториал :) Подскажи, пожалуйста, как настроить WebStorm, чтобы он подсказывал наиболее часто используемые окончания команд как у тебя. У меня почему-то он даже не подсказывает атрибуты внутри JSX тегов :( Может быть есть какой-нибудь хороший видос по этой теме или просто набор настроек? Спасибо!

@notjustdev 3 жыл бұрын

Hey there, will answer in English as I don't have a Russian keyboard. I feel that even my webstorm is not setup correctly, but I am that type of person that doesn't like to setup things. I have a plugin "Codota" installed, which gives AI based recommendation.

@EcklerV 3 жыл бұрын

@@notjustdev Thank you! :)

@Ankitsharma-qk2sc 3 жыл бұрын

Hi Vadim, will you please clear this ? - Companies use Expo or React Cli and Why ? Thanks.

@MADPURO 3 жыл бұрын

This was a really engaging project. I started learning react native seriously on Dec 1st. Every day ive been taking several hours to get the basics down and learning how to use props, state, as well as getting comfortable with making my own tags. Aside from the course i am taking, i seen this video cause i was looking into others teaching state, so i noticed how long its gonna take, which wasnt much time really, and dived in. The more we make these projects, the easier it gets. One thing i do want to point out is that i am using a pixel 4 emulator and the images are still slightly cut off. On the iphone it was perfect but not the pixel device. Would you know how to fix that? I tried ‘screen’ instead of ‘window’ but then one image looked funky, but the others were just right.

@notjustdev 3 жыл бұрын

Hey, thanks for watching. Keep building and experimenting and you will become comfortable with react native in no time 🚀

@guratete 3 жыл бұрын

I am just starting on React native too, I have some course I am taking and I also want to find some videos from KZfaq

@sf8262 3 жыл бұрын

Im in the same situation here. For some reason the header component doesnt seem to follow the styling i have set either

@zhony-pony 2 жыл бұрын

Yeah, same problem. Did you find out how to fix this?

@jamesonvparker 2 жыл бұрын

@@zhony-pony Hey guys, I haven't run into this problem yet. I just wanted to say that you guys are asking the right questions, which is all part of the process. I'm a web application developer but learning the right way to ask the right questions and google searches is something even the most experienced do. Did you all find your answers yet?

@ricardomarques2978 3 жыл бұрын

Great tutorial!!!

@notjustdev 3 жыл бұрын

Thanks brother ✌️

@verbally_active 2 жыл бұрын

Excellent tutorial sir

@hadithecoder 3 жыл бұрын

Would you add in the backend of things as well ? or the functionalities ?

@msehlihama3864 3 жыл бұрын

i really like the way you do things, you explain a lot makes it easyer to understand what's going on . did you develop any app with a backend mongoose or mongoDB if you did share me the link ?

@carlotadias9335 3 жыл бұрын

Hello ! How did you 'write' the basic structure of the component and the style automatically? Is it something like intelliSense (autocomplete)?, inscrusted in the IDE? Is it the snippet you are talking about? How can one implement it? Is Visual Sudio Code for example?

@notjustdev 3 жыл бұрын

Snippets plugin. Will do a short video about them soon

@carlotadias9335 3 жыл бұрын

thank you !!

@webdeveloper8334 Жыл бұрын

I have successfully created my first react native app by using this tutorial. Thank you so much. How to generate apk and run apk for this app on my android and ios devices?

@sanusilamido2342 3 жыл бұрын

Hi, im pretty new to programming, this is my first project and im confused with the expo CLI doccumentation. Do i copy and past those commands somewhere?