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

Поделиться
HTML-код
  • Опубликовано: 31 дек 2024

Комментарии •

  • @notjustdev
    @notjustdev  3 года назад +10

    🎒 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
      @davidn907 3 года назад +1

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

    • @notjustdev
      @notjustdev  3 года назад

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

    • @davidn907
      @davidn907 3 года назад

      @@notjustdev Okay will do. Thanks

    • @tendaikaruma738
      @tendaikaruma738 3 года назад

      Me to im still not getting the resources

    • @KishanSingh-it6ff
      @KishanSingh-it6ff 3 года назад +1

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

  • @pasinduudara7212
    @pasinduudara7212 3 года назад +14

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

    • @notjustdev
      @notjustdev  3 года назад +5

      Awesome

    • @pasinduudara7212
      @pasinduudara7212 3 года назад

      @@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 😊

  • @kushagrabainsla1641
    @kushagrabainsla1641 4 года назад +17

    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
      @notjustdev  4 года назад +6

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

    • @kushagrabainsla1641
      @kushagrabainsla1641 4 года назад +2

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

    • @notjustdev
      @notjustdev  4 года назад +1

      @@kushagrabainsla1641 Awesome, let me know how it goes

    • @shivanigaddagimath6105
      @shivanigaddagimath6105 3 года назад

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

    • @kushagrabainsla1641
      @kushagrabainsla1641 3 года назад

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

  • @hasansolak23
    @hasansolak23 3 года назад +12

    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.

  • @parthapratimmanna4146
    @parthapratimmanna4146 3 года назад

    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.

  • @TonyWithDaChopper
    @TonyWithDaChopper 3 года назад +4

    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!

  • @alexandergavrailovdronevid9742
    @alexandergavrailovdronevid9742 3 года назад +29

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

  • @carlosharrytravel
    @carlosharrytravel 3 года назад +5

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

  • @whatsnewnow4469
    @whatsnewnow4469 2 года назад

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

  • @journeytocoding816
    @journeytocoding816 3 года назад

    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.

  • @arpit5552
    @arpit5552 2 года назад

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

  • @pranavgoswami2814
    @pranavgoswami2814 4 года назад +2

    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
      @notjustdev  4 года назад

      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

  • @marshalclink
    @marshalclink 3 года назад +4

    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
      @notjustdev  3 года назад

      Glad you enjoyed it!

    • @dont_race_me
      @dont_race_me 3 года назад

      how do i download react on my pc

  • @ouardaoub4166
    @ouardaoub4166 2 года назад

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

  • @kug3lschr31b3r
    @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.

  • @bkosimi
    @bkosimi 2 года назад +1

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

  • @keithlamontdavis8047
    @keithlamontdavis8047 4 года назад +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
      @notjustdev  4 года назад

      I'm glad you liked it. Welcome onboard

  • @syedjaffersathikful
    @syedjaffersathikful 3 года назад +2

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

    • @notjustdev
      @notjustdev  3 года назад +1

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

    • @rhinopromptmovers3468
      @rhinopromptmovers3468 2 года назад

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

  • @raphaelfr8778
    @raphaelfr8778 3 года назад +1

    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.

  • @SuperGroot
    @SuperGroot 2 года назад

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

  • @Michael-xj8ju
    @Michael-xj8ju 3 года назад +1

    Perfect introduction to React Native. Thanks!

  • @RadCor
    @RadCor 3 года назад +25

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

  • @MADPURO
    @MADPURO 4 года назад +10

    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
      @notjustdev  4 года назад

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

    • @guratete
      @guratete 4 года назад

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

    • @sf8262
      @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
      @zhony-pony 3 года назад

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

    • @jamesonvparker
      @jamesonvparker 3 года назад +1

      @@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?

  • @walopes
    @walopes 3 года назад +1

    Amazing Vadim! Just finished it today. Many thanks man

  • @bugedits2140
    @bugedits2140 3 года назад

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

  • @Sam-81810
    @Sam-81810 2 года назад +1

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

  • @hamzaashraf9529
    @hamzaashraf9529 3 года назад

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

  • @อลงกรณ์จอมขันเงิน

    I love learning along with your tutorials

  • @lki7303
    @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!!!

  • @meggsnbacon5440
    @meggsnbacon5440 3 года назад

    Just finished ! Thank you so much for the tutorial 🔥

  • @thatolebethe3238
    @thatolebethe3238 3 года назад

    Thanks alot for the videos man. Big fan!

  • @Leftlifetech
    @Leftlifetech 3 года назад +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.

  • @joshueneyra3661
    @joshueneyra3661 4 года назад +4

    I'm loving your videos! ❤️🚀

  • @tonybenci2796
    @tonybenci2796 3 года назад +1

    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.

  • @zeyuwang1790
    @zeyuwang1790 4 года назад +15

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

    • @notjustdev
      @notjustdev  4 года назад +9

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

  • @lukelu
    @lukelu 2 года назад +1

    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
      @abdih1230 2 года назад

      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.

  • @100sainadh
    @100sainadh 3 года назад

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

  • @boldthoughts1
    @boldthoughts1 3 года назад +1

    Loved it and very comprehensively explained

  • @JustinThegamerBR
    @JustinThegamerBR 4 года назад +1

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

  • @rdias19
    @rdias19 2 года назад

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

  • @StickMan1316
    @StickMan1316 2 года назад

    around 1:47:00 for absolute position, the "top" property doesn't work the way you intended on my app. I typed up the same code you did and the menu bar is not displaying. It's weird for absolute position the top and bottom properties are reversed. update I fixed it, I had to move to the bottom the Header component in my App.js for it to show the menu and logo.

  • @gurgen5217
    @gurgen5217 2 года назад +1

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

  • @thepocguy
    @thepocguy 3 года назад +1

    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

  • @carlotadias9335
    @carlotadias9335 3 года назад +1

    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
      @notjustdev  3 года назад +1

      Snippets plugin. Will do a short video about them soon

    • @carlotadias9335
      @carlotadias9335 3 года назад

      thank you !!

  • @jefyekee581
    @jefyekee581 2 года назад +2

    Woow....I've really got alot out of this tutorial....THANKS SO MUCH!!!!! Everyone needs to subscribe to this channel :) :)

  • @shreyasphadnis5550
    @shreyasphadnis5550 3 года назад

    amazing explanation finally understood flatlist and animations ! thanks alot

  • @hbarcellos76
    @hbarcellos76 3 года назад +1

    @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).

  • @shihab2218
    @shihab2218 Год назад

    very good initiative video. thanks man . Love from Bangladesh

  • @tecnologiasdeinformacionge1358
    @tecnologiasdeinformacionge1358 2 года назад +1

    tNice tutorials is how an editing software beginner tutorial is done. tNice tutorials video is a standard for all editing software tutorials

  • @pradeepkumarreddykondreddy7048
    @pradeepkumarreddykondreddy7048 3 года назад +1

    How to generate the code snippet like you did for creating a new component, rather than typing the boiler plate code. I'm using VS code.

    • @notjustdev
      @notjustdev  3 года назад +1

      marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

  • @pratapgavali4786
    @pratapgavali4786 2 года назад

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

  • @mateovelo
    @mateovelo 2 года назад

    With position absolute in sec 31.04 on image ..my background disappear,but if you try position absolute on title everything is all right!

  • @dolapoajayi2156
    @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)}}

  • @stevenkebila
    @stevenkebila 3 года назад

    This was a great and fun tutorial. Loved it

  • @ДурбекЭргашбаев
    @ДурбекЭргашбаев 2 года назад

    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.

  • @ricardohernandezmendez4207
    @ricardohernandezmendez4207 Год назад

    I have learned a lot. Thank you!🚀

  • @danielnjama1470
    @danielnjama1470 2 года назад

    wow, seemed easier than I thought. Nice tutorial

  • @rafaellozano6340
    @rafaellozano6340 4 года назад +2

    You explain very good! thanks for share your knowledge!

  • @narenbakshi6301
    @narenbakshi6301 2 года назад

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

  • @areebchoudhary3785
    @areebchoudhary3785 3 года назад +8

    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.... ❣❣❣❣❣❣❣❣

  • @vinuthmarasinghe3932
    @vinuthmarasinghe3932 3 года назад

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

  • @localbus7008
    @localbus7008 3 года назад

    1:31:20 sir I am getting error undefined is not an object (evaluating ' props$cars.name)

  • @midrees1286
    @midrees1286 4 года назад +2

    >>>I would like to say You are doing a great Job. Just one thing could you share those slides as well:) we are lazy people. it would help us in doing our own implementation and having something to look back . Even if one person do something on its own. Its a win-win.
    Cheers

    • @notjustdev
      @notjustdev  4 года назад +1

      Yeah, you can find the presentation slide in the git repo: github.com/Savinvadim1312/TeslaClone/blob/main/Tesla.pdf

  • @arthuroyugi2045
    @arthuroyugi2045 2 года назад

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

  • @ucchinhnguyen6509
    @ucchinhnguyen6509 3 года назад

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

  • @pradeepkumarreddykondreddy7048
    @pradeepkumarreddykondreddy7048 3 года назад +2

    How did you get that blue and yellow prompt on the terminal ?

    • @notjustdev
      @notjustdev  3 года назад +1

      Some crazy customization.
      gist.github.com/kevin-smets/8568070

    • @pradeepkumarreddykondreddy7048
      @pradeepkumarreddykondreddy7048 3 года назад +1

      @@notjustdev followed that link but could not get exactly same prompt that you have in the terminal. Can you please post your p10k configuration ?

  • @shujakhan6728
    @shujakhan6728 3 года назад

    hy
    can you tell me what are the modules of this project and if those buttons (Custom order and existing inventory do anything)?

  • @pradeepkumarreddykondreddy7048
    @pradeepkumarreddykondreddy7048 3 года назад +2

    Can you do tutorials on react native apps that can be published to play store. May be some game apps using react native or some other useful react-native apps that can be published to play store. I published couple of game apps using flutter. Now i want to publish some apps using react-native also.

    • @shivanigaddagimath6105
      @shivanigaddagimath6105 3 года назад

      Hi Pradeep! That's really impressive! Are you open to job/internship opportunities currently?

  • @KishanSingh-it6ff
    @KishanSingh-it6ff 3 года назад

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

  • @praj777
    @praj777 3 года назад

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

  • @devanshshukla2840
    @devanshshukla2840 3 года назад

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

  • @sameralsudani7323
    @sameralsudani7323 4 года назад +3

    Well done, I love this tutorial

  • @Fivefactsabout-25
    @Fivefactsabout-25 3 года назад

    For some reason I am not able to scroll down through the page after I had added the cars.js objects and configured the CarsList components . Any idea what’s going on?

  • @vitaliano01
    @vitaliano01 3 года назад +1

    Thank you for the good and fun introduction Vadim

  • @souvikbose8553
    @souvikbose8553 3 года назад

    after using flatitems... the subtitles are not showing up... please tell any fix ASAP

  • @dnial6992
    @dnial6992 4 года назад +7

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

  • @jeuxdeau2009
    @jeuxdeau2009 3 года назад

    @35:00 Does anyone know the name of the extension in VScode? The fc (functional component)

  • @sudhanshuwu
    @sudhanshuwu 3 года назад +1

    Loved It

  • @take-aim1815
    @take-aim1815 3 года назад

    i have a query how do i go about creating a button which onPress slides up the content written for the specific page
    For eg. when we are model x page
    the button press should show the content related to model x and
    when we are model 3 page
    the button press should show the content related to model 3

  • @creative01st
    @creative01st 4 года назад +1

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

  • @mussab_babiker
    @mussab_babiker 2 года назад

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

  • @tebogomodingoane3967
    @tebogomodingoane3967 3 года назад +1

    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
      @notjustdev  3 года назад

      Send a screenshot in discord, I will try to help

  • @skytouch4349
    @skytouch4349 3 года назад

    onpress function dosn't work in pressable
    warning message doesn't print
    for windows and output android

  • @guymerlindyangnou117
    @guymerlindyangnou117 3 года назад

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

  • @oleksii.shkulipa
    @oleksii.shkulipa 3 года назад

    Please tell me what is the best video to watch after this? to continue learning

  • @saifsaeed1158
    @saifsaeed1158 2 года назад

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

  • @dnial6992
    @dnial6992 4 года назад

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

  • @brunobeslic3052
    @brunobeslic3052 4 года назад

    One question: I done everything like you (I did all till the time 1:06:55) but no buttons displayed on my screen. What may be the problem? I am suing expo with A5 2017 android phone. When I click on Metro Bundler-Run in web browser buttons display on the left bottom side on the screen but on android phone using expo app nothing... :(
    EDIT: It was a mistake in styles.js folder.
    Thank you very much on this tutorial Vadim :)
    Pozz from Croatia, Split :)

  • @AkashSingh-gr8pl
    @AkashSingh-gr8pl 3 года назад

    Hi! Great Video!
    But the underline css in not working in androind. Is there any other way to do it?
    Thanks!

  • @avam.499
    @avam.499 2 года назад

    I cannot start building the app because at the beggining the terminal in VSC doesn't allow me to write "expo start" or "npm start" ... it doesn't work and I don't know how to do

  • @ishansachdeva8955
    @ishansachdeva8955 2 года назад

    iOS Bundling failed 13ms
    Cannot read properties of undefined (reading 'transformFile')
    Getting this error after putting component in app.js
    Any help would be appreciated
    Thanks

  • @EcklerV
    @EcklerV 3 года назад +2

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

    • @notjustdev
      @notjustdev  3 года назад +1

      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
      @EcklerV 3 года назад

      @@notjustdev Thank you! :)

  • @raj010574
    @raj010574 3 года назад

    Very nice tutorials. Thanks Vadim.

  • @Squad2ND
    @Squad2ND 3 года назад

    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.

  • @bilgech
    @bilgech 3 года назад

    I am getting error in onPress event. can't find veriable:data

  • @hascardenas
    @hascardenas 3 года назад

    Thank you very much for these videos!

  • @geozuniga123
    @geozuniga123 Год назад

    can do a part 2 customer login with a custome navigation drawer also building a host network where application is stored in . can you explain the .idea what its purpose is for as well

  • @hadithecoder
    @hadithecoder 3 года назад

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

  • @michaelsaucedo3952
    @michaelsaucedo3952 4 года назад

    Very nice thank you. I like to snap Vs Code on one side and RUclips 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.

  • @valsistem
    @valsistem 4 года назад +1

    Question: Why do ya use WebStorm over VSC? Is it preference or does it have benefits?

    • @notjustdev
      @notjustdev  4 года назад

      It's mostly preference, but because Webstorm is an IDE, it gives me extra benefits with the cost of it being a bit heavier.

    • @valsistem
      @valsistem 4 года назад

      @@notjustdev Ah, I see. Thank you!