React Native Crash Course

In this video we will look at what React Native is, we will setup the CLI, initialize an application and look at some key aspects of the React Native framework. We'll be using Windows / Android but you can follow on Mac and iOS as well.

Components, State & Props
View & Text
StyleSheet
Touchable Elements
ListView
Navigator
Button
Events

CODE

SUPPORT THIS CHANNEL WITH A CUP OF COFFEE PER MONTH

ONE TIME DONATIONS

[luanrodrigues]

0:00 What This Guide Covers
1:20 What is React Native
2:30 Real Mobile Apps
3:30 Advantages of React Native
5:09 UI Component Examples
7:15 APIS for Device Interaction
7:51 Development Environment & Specs
9:08 MyApp Component (Code Explanation)
11:00 Let's Code... Install and Setup
17:56 React Native Structure
20:23 Coding from Scratch
24:30 Component 1 - Simple TextView
26:45 Component 1 - Properties (Props)
31:37 How to Debug Console on Terminal
32:41 Styling
33:20 Component 2 - In Line Styles
35:33 Component 2 - StyleSheet
43:06 Touchable Highlight
47:12 Touchable Opacity
49:49 Component 3 - TextInput
57:07 Component 3 - Switch
1:00:37 Component 4 - ListView
1:09:50 Component 5 - Get Data from Api
1:16:37 Component 6 - Navigator

FULL REACT NATIVE COURSE

[fata__morgana]

For new comers, ListView and Navigator is deprecated.

[michaelr.santos]

This should be categorized as porn for front end developers :). Nice tutorial man. I'm gonna checkout your paid stuff

[chrisr]

Thanks for the video. Things went well for me till Navigation component (Component6). While testing this, I got into error - Invariant Violation: Navigator is deprecated and has been

[lebs]

You need a website, why not do it yourself? With Traversy, you can create your own professional website.

[MasterZiomekPL]

For anyone who wants to learn it in 2019, most of the beginning is outdated.. just stick with the documentation. It's really easy to understand.

[igormingmesquita]

Congratulations for you work. Absolutelly useful class. Currently we don't have so much content about react native free. Thank you for that.

[damiencook]

I love the sound of that keyboard, very satisfying.

[zhangbruce]

great video man, just had to act like a smart ass and point out that the last few second you should change the push component 5 to pop for back button so the ui doesn't feels like we are going to a new page.

[xJinWook]

Are you going to make another Eduonix course like you did with React? That project-by-project course was fantastic.

[flumiie]

I am very frustrated with the react-native install

1. I already tried reinstalling node.js both LTS and latest
2. Tried the npm uninstall -g react-native-cli and re-install it again
3. Tried reboot
4. Tried npm install the react-native-cli in different directories
5. System environment path for %appdata%/npm and Pyhton is already set up

But still react-native is can't be recognized by both cmd and bash.
I really need help for this (other than resetting my Windows).

[factsdekhoo]

I am a beginner in app development. and have completed REACT course & learned a lot from you Mr.Brad Thanks a lot. I am building my career, kindly help in making decesion which is better Framework REACT NATIVE or Flutter from future perspective.

[zulqarnainsabir]

good tutorial, just hate that annoying keyboard button sounds

[brodusmax]

Excellent course, got me started even with a limited understanding of React.js. Thank you!! :D

[ZaidKhanPathan]

Great tutorial as always.
Minor change: [1:30:25]

It should be navigator.pop(); instead of navigator.push();.
Because push will create new object of Component5 and pop will get user back to already created Component5.

[harbilito]

Hi Brad, should i learn ReactJS first before learning React Native? Or is it ok to skip it? I was in a hurry coz my boss just give me a project on developing mobile app. Im a JS developer btw

[MrSaurabhnanda]

my project is running on simulator but when i am opening my project there is no index.android.js and index.ios.js file.
please help me if any one know

[haciendadad]

Some issues I had to overcome for getting android development on a Mac so that my app can get installed and I can see it reflect my code changes.
- Make sure you have the Java SDK installed, not just the JRE
- Make sure you have values set at "echo $JAVA_HOME" and your path is getting this value
- Make sure that when you run "java -version" it matches what you have installed at "$JAVA_HOME/bin/java -version"
- When setting your $JAVA_HOME path, I had to point to instead of "/Library/Internet
- May not be completely necessary, but the $ANDROID_HOME may be needed and added to your $PATH
- You may need to check/use adb to see if devices are in the database, you can run this program from here: "cd then "./adb devices". It should show some devices. If not, your app can't get installed in the virtual device. At a minimum, you can connect your phone with a USB cord and then the adb will show one device that available to have your app installed. Make sure you phone has Debugging turned on and that you have the Android File Transfer app installed on your Macbook.
- For virtual Devices, I used Genymotion (Personal License) and was able to install any device I wanted and it works much faster than the Android Emulator.
- If you installed Genymotion and created a new virtual device, you can now run the "./adb devices" command (in the proper directory, see above) and you should see that adb can now see your virtual device you created from genymotion

[win]

Please make complete course with react native in udemy.

Really looking forward to it.
Never seen any udemy course which is near the quality you produce.

Love you and your work, Brad

[darkraccn]

Quick Note:
The List View you are talking about at 1:02:30 has improved. It's pretty easy now.

Btw. Great Tutorial! It is really worth the time spending, to get started!