title
React Native Crash Course

description
In this course we will talk about what React Native is and get setup, look at some of the built in components and build a small shopping list app Sponsor: Linode Hosting https://linode.com/traversy Code: https://github.com/bradtraversy/react_native_shopping_list 💖 Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Website & Udemy Course Links: https://www.traversymedia.com Follow Traversy Media: https://www.twitter.com/traversymedia https://www.instagram.com/traversymedia https://www.facebook.com/traversymedia

detail
{'title': 'React Native Crash Course', 'heatmap': [{'end': 622.683, 'start': 553.156, 'weight': 1}, {'end': 749.277, 'start': 706.397, 'weight': 0.707}], 'summary': 'This react native crash course covers updated content sponsored by linode, offering $20 free hosting credit, providing an hour-long overview, and includes topics such as installation, setup, development basics, state management, list functionality, and styling list items.', 'chapters': [{'end': 39.312, 'segs': [{'end': 39.312, 'src': 'embed', 'start': 7.401, 'weight': 0, 'content': [{'end': 9.063, 'text': 'This video is sponsored by Linode.', 'start': 7.401, 'duration': 1.662}, {'end': 10.504, 'text': 'Anyone can build on Linode.', 'start': 9.183, 'duration': 1.321}, {'end': 16.731, 'text': "whether you need a development portfolio to land your next job or you're ready to put your app into production, Linode can get you there.", 'start': 10.504, 'duration': 6.227}, {'end': 22.157, 'text': 'For $20 in free hosting credit, click the link below or sign up at linode.com slash Traversee.', 'start': 16.791, 'duration': 5.366}, {'end': 23.811, 'text': "hey, what's going on, guys?", 'start': 22.95, 'duration': 0.861}, {'end': 26.174, 'text': 'welcome to my react native crash course.', 'start': 23.811, 'duration': 2.363}, {'end': 33.785, 'text': "so i did one of these maybe three years ago or so, and it's it's out of date now and a lot of people have asked me to update it.", 'start': 26.174, 'duration': 7.611}, {'end': 37.289, 'text': "so in this video it's going to probably going to be about an hour long or so.", 'start': 33.785, 'duration': 3.504}, {'end': 39.312, 'text': "we're going to talk about what react native is.", 'start': 37.289, 'duration': 2.023}], 'summary': 'Sponsored by linode, this crash course covers react native for an hour.', 'duration': 31.911, 'max_score': 7.401, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Hf4MJH0jDb4/pics/Hf4MJH0jDb47401.jpg'}], 'start': 7.401, 'title': 'React native crash course', 'summary': 'Discusses the updated react native crash course, sponsored by linode, offering $20 in free hosting credit and providing an hour-long overview of react native.', 'chapters': [{'end': 39.312, 'start': 7.401, 'title': 'React native crash course', 'summary': 'Discusses the updated react native crash course, sponsored by linode, offering $20 in free hosting credit and providing an hour-long overview of react native.', 'duration': 31.911, 'highlights': ['The video is sponsored by Linode, offering $20 in free hosting credit to viewers.', 'The chapter provides an hour-long overview of React Native, updating the outdated content from three years ago.', 'The crash course aims to cover the basics of React Native and is expected to be about an hour long.']}], 'duration': 31.911, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Hf4MJH0jDb4/pics/Hf4MJH0jDb47401.jpg', 'highlights': ['The chapter provides an hour-long overview of React Native, updating the outdated content from three years ago.', 'The crash course aims to cover the basics of React Native and is expected to be about an hour long.', 'The video is sponsored by Linode, offering $20 in free hosting credit to viewers.']}, {'end': 721.661, 'segs': [{'end': 146.833, 'src': 'embed', 'start': 102.729, 'weight': 0, 'content': [{'end': 112.076, 'text': 'Well, React Native is something that you use along with the React library that can render out native components to a mobile device,', 'start': 102.729, 'duration': 9.347}, {'end': 114.537, 'text': 'like an iOS device or an Android device.', 'start': 112.076, 'duration': 2.461}, {'end': 121.522, 'text': "So it's important to understand that, whether you're building a web app with React DOM or you're building a mobile app with React Native,", 'start': 115.118, 'duration': 6.404}, {'end': 124.164, 'text': "you're using the same React JS library.", 'start': 121.522, 'duration': 2.642}, {'end': 130.226, 'text': 'Now, one of the biggest advantages to using something like React Native is that you have a single code base.', 'start': 125.244, 'duration': 4.982}, {'end': 139.39, 'text': 'And what I mean by that is if you have a company that wants to build a mobile app, in a lot of cases they want their app to work on iOS and Android.', 'start': 130.827, 'duration': 8.563}, {'end': 146.833, 'text': "However, if you're just building it with the native languages, they're two completely separate projects.", 'start': 139.81, 'duration': 7.023}], 'summary': 'React native allows single code base for ios and android apps, leveraging react js library.', 'duration': 44.104, 'max_score': 102.729, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Hf4MJH0jDb4/pics/Hf4MJH0jDb4102729.jpg'}, {'end': 225.107, 'src': 'embed', 'start': 191.621, 'weight': 3, 'content': [{'end': 192.922, 'text': "I mean, there's ways around it.", 'start': 191.621, 'duration': 1.301}, {'end': 197.106, 'text': "You can use a physical device and there's some other software and stuff like that.", 'start': 192.962, 'duration': 4.144}, {'end': 203.931, 'text': "But usually if you are building with React Native on Windows, you're going to be building and testing in Android.", 'start': 197.186, 'duration': 6.745}, {'end': 206.493, 'text': 'Um, so just be aware of that.', 'start': 204.751, 'duration': 1.742}, {'end': 211.436, 'text': "And then if you're on a Mac, you can build and compile and test for iOS and Android.", 'start': 206.913, 'duration': 4.523}, {'end': 212.898, 'text': "And I'm going to show you how to get set up.", 'start': 211.456, 'duration': 1.442}, {'end': 216.6, 'text': "And even if you're on windows, you can completely follow along with this tutorial.", 'start': 213.258, 'duration': 3.342}, {'end': 218.582, 'text': 'All the code is going to be.', 'start': 216.941, 'duration': 1.641}, {'end': 219.162, 'text': "you know it's going to.", 'start': 218.582, 'duration': 0.58}, {'end': 225.107, 'text': "it's going to run whether you're on windows with the Android emulator or on a Mac with the iOS simulator.", 'start': 219.162, 'duration': 5.945}], 'summary': "When using react native on windows, testing is in android; on mac, it's for ios and android. the tutorial is compatible with both windows and mac.", 'duration': 33.486, 'max_score': 191.621, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Hf4MJH0jDb4/pics/Hf4MJH0jDb4191621.jpg'}, {'end': 374.112, 'src': 'embed', 'start': 343.095, 'weight': 2, 'content': [{'end': 345.858, 'text': "However, I'm going to be using the React Native CLI.", 'start': 343.095, 'duration': 2.763}, {'end': 351.182, 'text': 'And when we use the React Native CLI, we need to have a couple of things set up on our systems.', 'start': 346.538, 'duration': 4.644}, {'end': 355.746, 'text': 'So one is Android Studio along with the Android SDK.', 'start': 351.782, 'duration': 3.964}, {'end': 360.53, 'text': "You definitely want this if you're on Windows because that's most likely what you'll be using and testing in.", 'start': 356.106, 'duration': 4.424}, {'end': 367.901, 'text': "And if you're on a Mac and you want to test for Android devices, you also want to download and install it.", 'start': 361.17, 'duration': 6.731}, {'end': 374.112, 'text': 'So you just want to go to developer.android.com slash studio and download and install it.', 'start': 368.362, 'duration': 5.75}], 'summary': 'Using react native cli requires android studio and sdk setup.', 'duration': 31.017, 'max_score': 343.095, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Hf4MJH0jDb4/pics/Hf4MJH0jDb4343095.jpg'}, {'end': 622.683, 'src': 'heatmap', 'start': 553.156, 'weight': 1, 'content': [{'end': 556.478, 'text': 'dash native, dash CLI.', 'start': 553.156, 'duration': 3.322}, {'end': 566.444, 'text': "OK, so I already had installed anyway, so that's probably why I went so quick.", 'start': 563.095, 'duration': 3.349}, {'end': 571.016, 'text': "But now that's installed globally, so I can now initialize an application.", 'start': 566.825, 'duration': 4.191}, {'end': 576.091, 'text': 'And I can do that by saying react dash native in it.', 'start': 571.73, 'duration': 4.361}, {'end': 580.672, 'text': "And I'm just going to call this shopping list will be really creative here.", 'start': 576.551, 'duration': 4.121}, {'end': 591.194, 'text': "OK, so now after that finishes in 15, 20 seconds or so, it's going to tell you how to run your application on both for iOS and Android.", 'start': 581.832, 'duration': 9.362}, {'end': 596.975, 'text': 'So for iOS, you want to just go into the folder and then you can run react native run iOS.', 'start': 591.574, 'duration': 5.401}, {'end': 601.497, 'text': "you don't need npx because we actually installed react the cli.", 'start': 597.415, 'duration': 4.082}, {'end': 606.139, 'text': "if you didn't install it, you can still run it using npx and then for android.", 'start': 601.497, 'duration': 4.642}, {'end': 610.641, 'text': "so if you're on windows, you're going to want to go into the shopping list folder and run react native.", 'start': 606.139, 'duration': 4.502}, {'end': 613.203, 'text': 'run android, or i mean you could do it.', 'start': 610.641, 'duration': 2.562}, {'end': 616.284, 'text': 'you could run your android emulator on a mac as well.', 'start': 613.203, 'duration': 3.081}, {'end': 622.683, 'text': "so let's cd into shop shopping list and clear this up.", 'start': 616.284, 'duration': 6.399}], 'summary': "Installed react native globally, initialized 'shopping list' app, and run on ios and android.", 'duration': 69.527, 'max_score': 553.156, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Hf4MJH0jDb4/pics/Hf4MJH0jDb4553156.jpg'}], 'start': 39.312, 'title': 'Introduction to react native', 'summary': 'Introduces react native and covers its installation, setup, built-in components, and building a small shopping list application. it assumes prior experience with react.js and emphasizes the advantage of a single code base for mobile apps.', 'chapters': [{'end': 74.794, 'start': 39.312, 'title': 'Introduction to react native', 'summary': 'Covers the installation and setup of react native cli, explores its fundamentals and built-in components, and includes building a small shopping list application. it is an introductory course to react native and assumes prior experience with the react.js library.', 'duration': 35.482, 'highlights': ["We'll look at some slides, install React Native CLI, and explore its fundamentals before building a small shopping list application.", 'The course assumes prior experience with the React.js library, as it does not provide detailed explanations for React concepts.', 'The instructor recommends having prior experience with React.js before taking the React Native course, as it is not an in-depth tutorial on React fundamentals.']}, {'end': 721.661, 'start': 75.914, 'title': 'Introduction to react native', 'summary': 'Introduces react native, highlighting its use alongside react.js, the advantage of a single code base for building mobile apps, and the requirements for setting up react native development, emphasizing the use of react native cli for android and ios development.', 'duration': 645.747, 'highlights': ['React Native allows rendering of native components to iOS and Android devices, using the same React JS library as web apps with React DOM. React Native enables rendering native components to mobile devices using the same React JS library as web apps with React DOM, providing a unified development approach.', 'Advantages of using React Native include a single code base that can compile to both iOS and Android, saving time and money for the company. Using React Native offers the advantage of a single code base that can compile to both iOS and Android, saving time and money for companies by eliminating the need for separate projects and developers for each platform.', "Windows users can build for Android and iOS but can't compile and test for iOS, while Mac users can build, compile, and test for both iOS and Android. Windows users can build for Android and iOS but can't compile and test for iOS, while Mac users can build, compile, and test for both iOS and Android, providing insights into the platform-specific development capabilities.", 'React Native CLI is recommended for setting up development, with the need for Android Studio and Android SDK for Windows users and Xcode for Mac users to test for iOS. The use of React Native CLI is suggested for setting up development, requiring Android Studio and Android SDK for Windows users and Xcode for Mac users to test for iOS, ensuring efficient development environment setup.']}], 'duration': 682.349, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Hf4MJH0jDb4/pics/Hf4MJH0jDb439312.jpg', 'highlights': ['React Native enables rendering native components to mobile devices using the same React JS library as web apps with React DOM, providing a unified development approach.', 'Using React Native offers the advantage of a single code base that can compile to both iOS and Android, saving time and money for companies by eliminating the need for separate projects and developers for each platform.', 'The use of React Native CLI is suggested for setting up development, requiring Android Studio and Android SDK for Windows users and Xcode for Mac users to test for iOS, ensuring efficient development environment setup.', "Windows users can build for Android and iOS but can't compile and test for iOS, while Mac users can build, compile, and test for both iOS and Android, providing insights into the platform-specific development capabilities."]}, {'end': 1344.485, 'segs': [{'end': 780.154, 'src': 'embed', 'start': 722.381, 'weight': 0, 'content': [{'end': 731.964, 'text': "OK, so now we want to run our application and we do that with react dash native and then we're going to do run dash and then either Android or iOS.", 'start': 722.381, 'duration': 9.583}, {'end': 733.244, 'text': "I'm going to run iOS.", 'start': 731.984, 'duration': 1.26}, {'end': 738.692, 'text': 'And it should just automatically open this up here.', 'start': 735.911, 'duration': 2.781}, {'end': 749.277, 'text': 'OK, so that took about 15 seconds or so, and what happened was two things happened.', 'start': 743.794, 'duration': 5.483}, {'end': 752.398, 'text': 'It opened up my emulator with the whoops.', 'start': 749.517, 'duration': 2.881}, {'end': 754.059, 'text': "I don't want to do that.", 'start': 753.198, 'duration': 0.861}, {'end': 756.2, 'text': "Let's get that back.", 'start': 755.179, 'duration': 1.021}, {'end': 758.101, 'text': 'So we should be able to just slide up.', 'start': 756.22, 'duration': 1.881}, {'end': 764.305, 'text': 'Yeah So it opened up the emulator with the boilerplate application, which looks like this.', 'start': 758.501, 'duration': 5.804}, {'end': 769.808, 'text': 'And it also opened up this window, which just is basically our console.', 'start': 765.245, 'duration': 4.563}, {'end': 772.23, 'text': "So we can do console logs and it'll show up here.", 'start': 769.828, 'duration': 2.402}, {'end': 776.753, 'text': 'And it also runs the Metro bundler on port 8081.', 'start': 772.61, 'duration': 4.143}, {'end': 780.154, 'text': "It compiles any of the JavaScript that the device doesn't understand.", 'start': 776.753, 'duration': 3.401}], 'summary': 'Running the application took about 15 seconds, opening the emulator and console window, and running metro bundler on port 8081.', 'duration': 57.773, 'max_score': 722.381, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Hf4MJH0jDb4/pics/Hf4MJH0jDb4722381.jpg'}, {'end': 827.715, 'src': 'embed', 'start': 804.744, 'weight': 2, 'content': [{'end': 811.887, 'text': 'Now, the only two regular dependencies that come right out of the box is the React library and the React Native library.', 'start': 804.744, 'duration': 7.143}, {'end': 818.93, 'text': 'So, this right here is the same exact React that you would run to build a web app.', 'start': 812.307, 'duration': 6.623}, {'end': 821.852, 'text': 'You would just have React DOM instead of React Native.', 'start': 818.97, 'duration': 2.882}, {'end': 824.533, 'text': 'And then these two I just installed separately.', 'start': 822.432, 'duration': 2.101}, {'end': 827.715, 'text': 'So we have the icons and then we have the UUID package.', 'start': 824.573, 'duration': 3.142}], 'summary': 'React and react native are the only default dependencies, with additional icons and uuid package installed separately.', 'duration': 22.971, 'max_score': 804.744, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Hf4MJH0jDb4/pics/Hf4MJH0jDb4804744.jpg'}, {'end': 887.508, 'src': 'embed', 'start': 855.27, 'weight': 3, 'content': [{'end': 856.571, 'text': "I'm not going to go over that stuff.", 'start': 855.27, 'duration': 1.301}, {'end': 861.113, 'text': 'And then these, the Android and iOS folders, these are the native apps here.', 'start': 856.991, 'duration': 4.122}, {'end': 863.495, 'text': 'Okay, so all the native stuff goes in there.', 'start': 861.134, 'duration': 2.361}, {'end': 873.441, 'text': 'What we really want to focus on is our app.js file because this is the entry point to our application just like it is with a standard react app.', 'start': 863.835, 'duration': 9.606}, {'end': 881.465, 'text': 'You have your app JS, which is your root component, and then you have other components that you create and you bring in and you basically embed them.', 'start': 873.461, 'duration': 8.004}, {'end': 887.508, 'text': "Okay So this has, you know, all this stuff that you're seeing on the screen here.", 'start': 882.045, 'duration': 5.463}], 'summary': 'Focus on app.js as the entry point for native android and ios apps.', 'duration': 32.238, 'max_score': 855.27, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Hf4MJH0jDb4/pics/Hf4MJH0jDb4855270.jpg'}, {'end': 1036.902, 'src': 'embed', 'start': 1008.146, 'weight': 4, 'content': [{'end': 1015.468, 'text': "So the view component here, let me just open up the docs real quick and let's actually search for react native.", 'start': 1008.146, 'duration': 7.322}, {'end': 1017.913, 'text': 'view component.', 'start': 1016.932, 'duration': 0.981}, {'end': 1022.895, 'text': 'So this is the most fundamental component for building a UI.', 'start': 1019.753, 'duration': 3.142}, {'end': 1026.237, 'text': "It's a container that supports layout with Flexbox,", 'start': 1023.315, 'duration': 2.922}, {'end': 1036.902, 'text': 'so we can style our layouts using Flexbox and it maps directly to the native view equivalent on whatever platform React Native is running on,', 'start': 1026.237, 'duration': 10.665}], 'summary': 'The view component in react native is a fundamental ui building block that supports layout with flexbox.', 'duration': 28.756, 'max_score': 1008.146, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Hf4MJH0jDb4/pics/Hf4MJH0jDb41008146.jpg'}, {'end': 1329.402, 'src': 'embed', 'start': 1301.229, 'weight': 5, 'content': [{'end': 1308.898, 'text': "I am G and then we'll go down here and let's add in I am G and set a, oops, we need a colon here.", 'start': 1301.229, 'duration': 7.669}, {'end': 1316.479, 'text': "Let's set a width of 100 and a height of 100.", 'start': 1309.819, 'duration': 6.66}, {'end': 1322.56, 'text': "So if I save that, you can see that it's grabbing this image and it's putting it in here with the image component.", 'start': 1316.479, 'duration': 6.081}, {'end': 1326.061, 'text': 'Now, if I wanted to make this rounded, I could use border radius.', 'start': 1322.98, 'duration': 3.081}, {'end': 1329.402, 'text': "However, we can't use percentages, like I can't do 50%.", 'start': 1326.521, 'duration': 2.881}], 'summary': 'Adding image component with width: 100 and height: 100, discussing border radius usage.', 'duration': 28.173, 'max_score': 1301.229, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Hf4MJH0jDb4/pics/Hf4MJH0jDb41301229.jpg'}], 'start': 722.381, 'title': 'React native development basics', 'summary': 'Introduces the basics of react native development, including the package.json file contents, the structure of the app.js file, and the usage of react native components like view and text, as well as the implementation of styles and the image component.', 'chapters': [{'end': 780.154, 'start': 722.381, 'title': 'Running react native application', 'summary': "Demonstrates running a react native application, which automatically opens an emulator and console window, taking about 15 seconds to complete, while also running the metro bundler on port 8081 and compiling javascript that the device doesn't understand.", 'duration': 57.773, 'highlights': ['It took about 15 seconds to run the application. Running the application took approximately 15 seconds to complete.', "The Metro bundler runs on port 8081 and compiles JavaScript that the device doesn't understand. The Metro bundler runs on port 8081 and compiles JavaScript that the device doesn't understand, facilitating the application's execution.", 'The application automatically opens an emulator and a console window. Upon running the application, it automatically opens an emulator with the boilerplate application and a window for console logs.']}, {'end': 1344.485, 'start': 780.574, 'title': 'React native development basics', 'summary': 'Introduces the basics of react native development, including the package.json file contents, the structure of the app.js file, and the usage of react native components like view and text, as well as the implementation of styles and the image component.', 'duration': 563.911, 'highlights': ['The package.json file contains regular dependencies including the React and React Native libraries, along with additional separately installed packages such as icons and UUID. The package.json file includes regular dependencies like React and React Native libraries, and separately installed packages like icons and UUID.', 'The app.js file serves as the entry point to the application, containing the root component and other embedded components that can be created using functional components or class-based components with lifecycle methods or hooks. The app.js file is the entry point to the application and supports the creation of components using functional or class-based components with lifecycle methods or hooks.', 'The usage of React Native components such as View and Text, as well as the ability to style layouts using Flexbox, is demonstrated, with an emphasis on the differences in styling properties and the use of the StyleSheet component for organized styling. The transcript demonstrates the usage of React Native components like View and Text, along with styling layouts using Flexbox and the StyleSheet component for organized styling.', 'The implementation of the Image component, including the usage of source prop and styling properties like width and height, is explained, along with the method to achieve a rounded image using width and height properties. The transcript explains the implementation of the Image component, usage of source prop, and styling properties like width and height, as well as the method to achieve a rounded image using width and height properties.']}], 'duration': 622.104, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Hf4MJH0jDb4/pics/Hf4MJH0jDb4722381.jpg', 'highlights': ["The Metro bundler runs on port 8081 and compiles JavaScript that the device doesn't understand, facilitating the application's execution.", 'The application automatically opens an emulator with the boilerplate application and a window for console logs.', 'The package.json file includes regular dependencies like React and React Native libraries, and separately installed packages like icons and UUID.', 'The app.js file is the entry point to the application and supports the creation of components using functional or class-based components with lifecycle methods or hooks.', 'The transcript demonstrates the usage of React Native components like View and Text, along with styling layouts using Flexbox and the StyleSheet component for organized styling.', 'The transcript explains the implementation of the Image component, usage of source prop, and styling properties like width and height, as well as the method to achieve a rounded image using width and height properties.', 'Running the application took approximately 15 seconds to complete.']}, {'end': 1736.663, 'segs': [{'end': 1467.317, 'src': 'embed', 'start': 1423.608, 'weight': 3, 'content': [{'end': 1425.43, 'text': "We don't need to set flex one.", 'start': 1423.608, 'duration': 1.822}, {'end': 1426.57, 'text': "We're going to set a height.", 'start': 1425.47, 'duration': 1.1}, {'end': 1431.774, 'text': "Let's do height 60 and let's say padding.", 'start': 1427.711, 'duration': 4.063}, {'end': 1439.649, 'text': "Padding I'm going to do 15 and then let's add a background color.", 'start': 1434.388, 'duration': 5.261}, {'end': 1442.57, 'text': "OK And this is on the view that's around the text.", 'start': 1439.669, 'duration': 2.901}, {'end': 1451.072, 'text': "So the background color I'm going to set to dark slate blue and then on the text let's add a style as well.", 'start': 1442.99, 'duration': 8.082}, {'end': 1467.317, 'text': "So we'll say style equals styles dot text and then we'll go down here and let's make the color for this white.", 'start': 1451.132, 'duration': 16.185}], 'summary': 'Setting a height of 60, padding of 15, and dark slate blue background color for a view, with white color for the text.', 'duration': 43.709, 'max_score': 1423.608, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Hf4MJH0jDb4/pics/Hf4MJH0jDb41423608.jpg'}, {'end': 1613.461, 'src': 'embed', 'start': 1578.904, 'weight': 2, 'content': [{'end': 1580.105, 'text': 'And if I save now,', 'start': 1578.904, 'duration': 1.201}, {'end': 1588.792, 'text': 'we get shopping list and we can take it a step further and we can just structure and pull out from the props by using curly braces here pull out the title.', 'start': 1580.105, 'duration': 8.687}, {'end': 1592.732, 'text': 'and then down here instead of props.title, just do title.', 'start': 1589.491, 'duration': 3.241}, {'end': 1598.315, 'text': 'So all the same stuff you can do with React DOM, you can do with React Native.', 'start': 1593.513, 'duration': 4.802}, {'end': 1600.936, 'text': 'We can even set a default prop.', 'start': 1599.455, 'duration': 1.481}, {'end': 1613.461, 'text': 'So if we go down here and say header.defaultprops and set our title to shopping list.', 'start': 1600.996, 'duration': 12.465}], 'summary': "React native allows for easy structuring and setting default props, like 'shopping list'.", 'duration': 34.557, 'max_score': 1578.904, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Hf4MJH0jDb4/pics/Hf4MJH0jDb41578904.jpg'}, {'end': 1662.01, 'src': 'embed', 'start': 1629.166, 'weight': 0, 'content': [{'end': 1630.126, 'text': 'So we have our header.', 'start': 1629.166, 'duration': 0.96}, {'end': 1633.026, 'text': "I think we're all set to close that for now.", 'start': 1630.186, 'duration': 2.84}, {'end': 1636.787, 'text': 'And the next thing I want to do is start to deal with state.', 'start': 1633.847, 'duration': 2.94}, {'end': 1641.708, 'text': 'And I want to deal with the flat list component to list out all the items in our state.', 'start': 1637.007, 'duration': 4.701}, {'end': 1645.449, 'text': "Now, I'm using functional components with hooks.", 'start': 1642.308, 'duration': 3.141}, {'end': 1647.829, 'text': 'So I need to bring in the use state hook.', 'start': 1645.909, 'duration': 1.92}, {'end': 1656.366, 'text': "As we want to bring that in and then right above the return inside the app function here, we're going to have our state.", 'start': 1649.762, 'duration': 6.604}, {'end': 1662.01, 'text': "So we do this by setting some brackets and I'm going to call this items.", 'start': 1656.986, 'duration': 5.024}], 'summary': 'Using functional components with hooks to manage state and list items.', 'duration': 32.844, 'max_score': 1629.166, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Hf4MJH0jDb4/pics/Hf4MJH0jDb41629166.jpg'}, {'end': 1707.529, 'src': 'embed', 'start': 1673.857, 'weight': 1, 'content': [{'end': 1676.878, 'text': 'And in here we have our default, which is going to be an array.', 'start': 1673.857, 'duration': 3.021}, {'end': 1678.98, 'text': "And I'm just going to have some hard coded state.", 'start': 1677.219, 'duration': 1.761}, {'end': 1682.892, 'text': 'items in here, shopping items.', 'start': 1681.45, 'duration': 1.442}, {'end': 1684.694, 'text': "So let's set an ID.", 'start': 1683.412, 'duration': 1.282}, {'end': 1688.478, 'text': 'Now, remember, I installed that UUID component.', 'start': 1685.054, 'duration': 3.424}, {'end': 1693.083, 'text': 'We can actually bring that in here so we can import UUID.', 'start': 1688.618, 'duration': 4.465}, {'end': 1700.672, 'text': "I think it's version four we do from let me just check this out.", 'start': 1693.103, 'duration': 7.569}, {'end': 1707.529, 'text': "So NPM UID, there's a bunch of different ones.", 'start': 1703.027, 'duration': 4.502}], 'summary': 'Creating a default array with hardcoded shopping items and importing uuid version 4.', 'duration': 33.672, 'max_score': 1673.857, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Hf4MJH0jDb4/pics/Hf4MJH0jDb41673857.jpg'}], 'start': 1345.228, 'title': 'React native development', 'summary': 'Discusses creating a header component, using props and state in a react native app, and dealing with the flat list component to list out all the items in the state while emphasizing the usage of functional components with hooks and the integration of the uuid component for generating unique ids.', 'chapters': [{'end': 1736.663, 'start': 1345.228, 'title': 'React native development', 'summary': 'Discusses creating a header component, using props and state in a react native app, and dealing with the flat list component to list out all the items in the state, emphasizing the usage of functional components with hooks and the integration of the uuid component for generating unique ids.', 'duration': 391.435, 'highlights': ['The chapter discusses creating a header component with a height of 60, padding of 15, and a background color of dark slate blue, and using a functional component to achieve this.', 'Usage of props and state in a React Native app is demonstrated, with examples of setting a default prop, destructuring props, and utilizing prop types.', "The chapter explains the usage of the flat list component and the integration of the UUID component for generating unique IDs within the app's state.", 'Demonstrates the usage of functional components with hooks, specifically the use state hook, to manage state and manipulate data within the app.']}], 'duration': 391.435, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Hf4MJH0jDb4/pics/Hf4MJH0jDb41345228.jpg', 'highlights': ['Demonstrates the usage of functional components with hooks, specifically the use state hook, to manage state and manipulate data within the app.', "The chapter explains the usage of the flat list component and the integration of the UUID component for generating unique IDs within the app's state.", 'Usage of props and state in a React Native app is demonstrated, with examples of setting a default prop, destructuring props, and utilizing prop types.', 'The chapter discusses creating a header component with a height of 60, padding of 15, and a background color of dark slate blue, and using a functional component to achieve this.']}, {'end': 2223.591, 'segs': [{'end': 1832.922, 'src': 'embed', 'start': 1803.73, 'weight': 0, 'content': [{'end': 1806.151, 'text': 'In this case, they have another component called item.', 'start': 1803.73, 'duration': 2.421}, {'end': 1815.735, 'text': "So that's what we need is a data attribute and a render item function that takes in a function with item and the restructuring it.", 'start': 1806.811, 'duration': 8.924}, {'end': 1818.096, 'text': 'Notice the the curly braces.', 'start': 1815.795, 'duration': 2.301}, {'end': 1820.937, 'text': "So let's go ahead and do that in our application.", 'start': 1818.616, 'duration': 2.321}, {'end': 1832.922, 'text': "So with flat list we'll say data and let's set our data to items, which is our state, the items in our state, and then render item.", 'start': 1821.677, 'duration': 11.245}], 'summary': 'The application requires a data attribute and a render item function to work with the state items.', 'duration': 29.192, 'max_score': 1803.73, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Hf4MJH0jDb4/pics/Hf4MJH0jDb41803730.jpg'}, {'end': 1890.3, 'src': 'embed', 'start': 1862.466, 'weight': 1, 'content': [{'end': 1865.709, 'text': "So we'll save that and now you can see that these are being rendered out.", 'start': 1862.466, 'duration': 3.243}, {'end': 1869.552, 'text': "Now there's no default styling so we have to handle that ourselves.", 'start': 1866.209, 'duration': 3.343}, {'end': 1878.613, 'text': 'Now, instead of having this just just outputting text here, I want to have a separate component for each list item.', 'start': 1870.549, 'duration': 8.064}, {'end': 1881.375, 'text': "So what I'll do is import.", 'start': 1879.154, 'duration': 2.221}, {'end': 1887.899, 'text': "Let's go up here and import the component we haven't created yet, which is going to be list item.", 'start': 1881.395, 'duration': 6.504}, {'end': 1890.3, 'text': "And that's going to be from.", 'start': 1889.239, 'duration': 1.061}], 'summary': 'Creating separate components for list items to handle default styling.', 'duration': 27.834, 'max_score': 1862.466, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Hf4MJH0jDb4/pics/Hf4MJH0jDb41862466.jpg'}, {'end': 2001.831, 'src': 'embed', 'start': 1976.207, 'weight': 2, 'content': [{'end': 1983.254, 'text': "And this is basically a touch element where if you put your finger on it, it'll have some opacity for a second as you touch it.", 'start': 1976.207, 'duration': 7.047}, {'end': 1988.799, 'text': "So it'll give you that flicker effect that you see in native mobile apps.", 'start': 1983.294, 'duration': 5.505}, {'end': 1994.404, 'text': "And that's going to be the outermost component of this list item component.", 'start': 1989.9, 'duration': 4.504}, {'end': 2001.831, 'text': "So I'm going to replace this view right here with that touchable opacity.", 'start': 1995.225, 'duration': 6.606}], 'summary': 'Replacing view with touchable opacity to provide flicker effect.', 'duration': 25.624, 'max_score': 1976.207, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Hf4MJH0jDb4/pics/Hf4MJH0jDb41976207.jpg'}, {'end': 2140.498, 'src': 'embed', 'start': 2101.56, 'weight': 3, 'content': [{'end': 2105.201, 'text': "Now, we don't have any styles, so let's start to add some of those.", 'start': 2101.56, 'duration': 3.641}, {'end': 2112.343, 'text': "So in here, we'll take the list item and let's set padding to 15.", 'start': 2105.681, 'duration': 6.662}, {'end': 2115.404, 'text': 'And as soon as I save it, you can see the padding gets added.', 'start': 2112.343, 'duration': 3.061}, {'end': 2117.565, 'text': "We'll set a background color.", 'start': 2115.864, 'duration': 1.701}, {'end': 2120.633, 'text': "Let's set that to light gray.", 'start': 2118.933, 'duration': 1.7}, {'end': 2125.394, 'text': "We'll do F eight three times and we're going to do a border.", 'start': 2120.673, 'duration': 4.721}, {'end': 2140.498, 'text': "Let's do border bottom with and we'll set that to one and let's do border color and we'll set that to Tripoli.", 'start': 2126.175, 'duration': 14.323}], 'summary': 'Adding styles: padding of 15, light gray background, 1px bottom border', 'duration': 38.938, 'max_score': 2101.56, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Hf4MJH0jDb4/pics/Hf4MJH0jDb42101560.jpg'}, {'end': 2200.13, 'src': 'embed', 'start': 2161.109, 'weight': 4, 'content': [{'end': 2162.57, 'text': 'We want it to go this way.', 'start': 2161.109, 'duration': 1.461}, {'end': 2168.551, 'text': 'We also want to put any remaining space in between the two items which is going to be the text and the icon.', 'start': 2163.07, 'duration': 5.481}, {'end': 2177.434, 'text': "So to do that let's add justify content and let's set that to space between.", 'start': 2169.912, 'duration': 7.522}, {'end': 2185.328, 'text': 'And then I just want to align items to the center.', 'start': 2181.047, 'duration': 4.281}, {'end': 2199.39, 'text': "Okay And then for the text, so we have list item text, and I'm just going to set the font size to let's do 18.", 'start': 2185.348, 'duration': 14.042}, {'end': 2200.13, 'text': 'All right.', 'start': 2199.39, 'duration': 0.74}], 'summary': 'Setting justify content to space between and aligning items to center. font size set to 18.', 'duration': 39.021, 'max_score': 2161.109, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Hf4MJH0jDb4/pics/Hf4MJH0jDb42161109.jpg'}], 'start': 1738.484, 'title': 'Using flat list and styling list items in react native', 'summary': 'Explains the process of using a flat list in a react native application to display items from state and creating a separate component for each list item. it also covers implementing touchable opacity for a flicker effect, applying styling to list items including padding, background color, border, flex direction, and icon placement.', 'chapters': [{'end': 1947.672, 'start': 1738.484, 'title': 'Using flat list in react native', 'summary': 'Explains the process of using a flat list in a react native application to display items from state, and creating a separate component for each list item.', 'duration': 209.188, 'highlights': ['The process involves using a flat list to display items from the state in the UI, with the data being passed in as a prop and a render item function used to render each item.', "A separate component called 'list item' is created to handle each list item, which requires importing and passing the item as a prop, leading to the need to create the 'list item' component file."]}, {'end': 2223.591, 'start': 1948.927, 'title': 'React native list item styling', 'summary': 'Covers implementing touchable opacity for a flicker effect, applying styling to list items including padding, background color, border, flex direction, and icon placement.', 'duration': 274.664, 'highlights': ['Implementing touchable opacity provides a flicker effect for a native mobile app, enhancing user experience.', 'Applying padding, background color, and border to list items enhances the visual appeal and user experience.', 'Setting flex direction to row and justifying content to space between facilitates the horizontal alignment of text and icon within the list item.', 'Setting the font size of the text to 18 improves readability and visual presentation.']}], 'duration': 485.107, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Hf4MJH0jDb4/pics/Hf4MJH0jDb41738484.jpg', 'highlights': ['Using a flat list to display items from the state in the UI, with the data being passed in as a prop and a render item function used to render each item.', "Creating a separate component called 'list item' to handle each list item, which requires importing and passing the item as a prop, leading to the need to create the 'list item' component file.", 'Implementing touchable opacity provides a flicker effect for a native mobile app, enhancing user experience.', 'Applying padding, background color, and border to list items enhances the visual appeal and user experience.', 'Setting flex direction to row and justifying content to space between facilitates the horizontal alignment of text and icon within the list item.', 'Setting the font size of the text to 18 improves readability and visual presentation.']}, {'end': 3086.682, 'segs': [{'end': 2278.655, 'src': 'embed', 'start': 2249.229, 'weight': 0, 'content': [{'end': 2252.252, 'text': 'And if I save that, now you can see we have our delete icons.', 'start': 2249.229, 'duration': 3.023}, {'end': 2254.174, 'text': 'All right, cool.', 'start': 2253.593, 'duration': 0.581}, {'end': 2256.636, 'text': "So that's our list item component.", 'start': 2254.574, 'duration': 2.062}, {'end': 2260.019, 'text': "We're rendering it, you know, as many times as we have items.", 'start': 2256.656, 'duration': 3.363}, {'end': 2262.962, 'text': "Now let's work on the delete.", 'start': 2261.36, 'duration': 1.602}, {'end': 2266.505, 'text': 'So we want the delete to happen when we click here.', 'start': 2263.202, 'duration': 3.303}, {'end': 2269.328, 'text': 'And you notice when I click on this, we get that opacity effect.', 'start': 2266.525, 'duration': 2.803}, {'end': 2271.17, 'text': "That's because of this touchable opacity.", 'start': 2269.368, 'duration': 1.802}, {'end': 2275.332, 'text': 'But I want to click on the icon and then delete from the state.', 'start': 2271.77, 'duration': 3.562}, {'end': 2278.655, 'text': 'Now, the state is not in the list item component.', 'start': 2275.773, 'duration': 2.882}], 'summary': 'Creating a list item component with delete functionality using touchable opacity.', 'duration': 29.426, 'max_score': 2249.229, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Hf4MJH0jDb4/pics/Hf4MJH0jDb42249229.jpg'}, {'end': 2322.416, 'src': 'embed', 'start': 2295.346, 'weight': 1, 'content': [{'end': 2300.549, 'text': "And this is going to take in as a parameter the ID so we know which one we're deleting.", 'start': 2295.346, 'duration': 5.203}, {'end': 2310.296, 'text': "And we want to call set items because that's what we need to call if we want to manipulate this state, which is what we want to do.", 'start': 2302.05, 'duration': 8.246}, {'end': 2311.457, 'text': 'We want to delete one of these.', 'start': 2310.316, 'duration': 1.141}, {'end': 2320.854, 'text': 'Now this set items is going to take in a function with a parameter of previous items.', 'start': 2312.165, 'duration': 8.689}, {'end': 2322.416, 'text': 'So we call this what we want.', 'start': 2321.054, 'duration': 1.362}], 'summary': 'Function to delete item from state by id.', 'duration': 27.07, 'max_score': 2295.346, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Hf4MJH0jDb4/pics/Hf4MJH0jDb42295346.jpg'}, {'end': 2481.193, 'src': 'embed', 'start': 2450.542, 'weight': 3, 'content': [{'end': 2458.005, 'text': "We'll get rid of this and clear out these styles and change this to add item.", 'start': 2450.542, 'duration': 7.463}, {'end': 2465.447, 'text': 'Now, as far as the components we want to bring in from react native, we want view text style sheet.', 'start': 2459.264, 'duration': 6.183}, {'end': 2471.389, 'text': 'We also want text input because we need a way to type in our item.', 'start': 2465.487, 'duration': 5.902}, {'end': 2481.193, 'text': "And then we also want touchable opacity here as well, because we're going to use that basically as a button to submit.", 'start': 2472.689, 'duration': 8.504}], 'summary': 'In the react native project, we need to include view, text, style sheet, text input, and touchable opacity for functionality.', 'duration': 30.651, 'max_score': 2450.542, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Hf4MJH0jDb4/pics/Hf4MJH0jDb42450542.jpg'}], 'start': 2223.711, 'title': 'React state management and list functionality', 'summary': 'Explains the process of deleting an item from the state using the filter method and passing down the delete item function as a prop, enabling the deletion of an item based on its id. it also covers the implementation of list item deletion and addition functionality in react native, including the setup of components and the manipulation of state using usestate, as well as the validation of user input and the use of built-in components like view, text, and flat list.', 'chapters': [{'end': 2368.839, 'start': 2223.711, 'title': 'React app state management', 'summary': 'Explains the process of deleting an item from the state using the filter method and passing down the delete item function as a prop, enabling the deletion of an item based on its id.', 'duration': 145.128, 'highlights': ['The process of deleting an item from the state using the filter method and passing down the delete item function as a prop. Explanation of the delete item function and its role in manipulating the state to delete an item based on its ID.', 'Explanation of the set items function and its usage to manipulate the state. Usage of the set items function to modify the state by deleting an item from the previous items using filter method.', 'Details on using the filter method to remove an item from the state based on its ID. Utilization of the filter method to remove an item from the state based on a specific ID, ensuring the deletion of the targeted item.']}, {'end': 3086.682, 'start': 2369.499, 'title': 'React native list and add item functionality', 'summary': 'Covers the implementation of list item deletion and addition functionality in react native, including the setup of components and the manipulation of state using usestate. it also introduces the validation of user input and the use of built-in components like view, text, and flat list.', 'duration': 717.183, 'highlights': ['The chapter discusses the implementation of list item deletion and addition functionality in React Native, utilizing props and functions to manipulate state and update the UI.', 'It covers the setup and integration of components such as text input, touchable opacity, and icon in the context of creating a new component for adding items.', 'The transcript details the use of useState to manage the state of user input and the validation of input data to prevent adding empty items, demonstrating the handling of user interaction and state manipulation in the app.', "Additionally, it mentions the potential for further expansion of the application by integrating back-end functionality, async storage, or Firebase, encouraging viewers to enhance the app's capabilities and offering access to the source code for reference."]}], 'duration': 862.971, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Hf4MJH0jDb4/pics/Hf4MJH0jDb42223711.jpg', 'highlights': ['The chapter discusses the implementation of list item deletion and addition functionality in React Native, utilizing props and functions to manipulate state and update the UI.', 'Details on using the filter method to remove an item from the state based on its ID. Utilization of the filter method to remove an item from the state based on a specific ID, ensuring the deletion of the targeted item.', 'Explanation of the set items function and its usage to manipulate the state. Usage of the set items function to modify the state by deleting an item from the previous items using filter method.', 'It covers the setup and integration of components such as text input, touchable opacity, and icon in the context of creating a new component for adding items.']}], 'highlights': ['The crash course aims to cover the basics of React Native and is expected to be about an hour long.', 'The chapter provides an hour-long overview of React Native, updating the outdated content from three years ago.', 'The video is sponsored by Linode, offering $20 in free hosting credit to viewers.', 'Using React Native offers the advantage of a single code base that can compile to both iOS and Android, saving time and money for companies by eliminating the need for separate projects and developers for each platform.', 'React Native enables rendering native components to mobile devices using the same React JS library as web apps with React DOM, providing a unified development approach.', 'The use of React Native CLI is suggested for setting up development, requiring Android Studio and Android SDK for Windows users and Xcode for Mac users to test for iOS, ensuring efficient development environment setup.', "The Metro bundler runs on port 8081 and compiles JavaScript that the device doesn't understand, facilitating the application's execution.", 'The application automatically opens an emulator with the boilerplate application and a window for console logs.', 'The package.json file includes regular dependencies like React and React Native libraries, and separately installed packages like icons and UUID.', 'The app.js file is the entry point to the application and supports the creation of components using functional or class-based components with lifecycle methods or hooks.', 'The transcript demonstrates the usage of React Native components like View and Text, along with styling layouts using Flexbox and the StyleSheet component for organized styling.', 'Demonstrates the usage of functional components with hooks, specifically the use state hook, to manage state and manipulate data within the app.', "The chapter explains the usage of the flat list component and the integration of the UUID component for generating unique IDs within the app's state.", 'Usage of props and state in a React Native app is demonstrated, with examples of setting a default prop, destructuring props, and utilizing prop types.', 'Using a flat list to display items from the state in the UI, with the data being passed in as a prop and a render item function used to render each item.', "Creating a separate component called 'list item' to handle each list item, which requires importing and passing the item as a prop, leading to the need to create the 'list item' component file.", 'Implementing touchable opacity provides a flicker effect for a native mobile app, enhancing user experience.', 'The chapter discusses the implementation of list item deletion and addition functionality in React Native, utilizing props and functions to manipulate state and update the UI.', 'Details on using the filter method to remove an item from the state based on its ID. Utilization of the filter method to remove an item from the state based on a specific ID, ensuring the deletion of the targeted item.', 'Explanation of the set items function and its usage to manipulate the state. Usage of the set items function to modify the state by deleting an item from the previous items using filter method.', 'It covers the setup and integration of components such as text input, touchable opacity, and icon in the context of creating a new component for adding items.']}