title
React Native - Intro Course for Beginners

description
React Native allows you to use JavaScript to write apps that run natively on Android, iOS, and Blackberry. This full introductory course will teach you the basics of React Native and help you create your first React Native app. The codedamn platform allows you to learn more content like this for absolutely free: https://codedamn.com ⭐️ Contents ⭐️ ⌨️ (0:00:00) Introduction ⌨️ (0:02:54) Setting up React Native ⌨️ (0:17:10) File Structure ⌨️ (0:21:12) Hello World ⌨️ (0:26:38) Hello World Explained ⌨️ (0:32:17) Props ⌨️ (0:36:47) State ⌨️ (0:44:32) Stylesheets and Flexbox Layouts ⌨️ (0:54:55) Getting user text ⌨️ (1:06:45) Uncontrolled vs. controlled components ⌨️ (1:15:28) Creating a Calculator - Part 1 ⌨️ (1:22:18) Creating a Calculator - Part 2 ⌨️ (1:30:13) Creating a Calculator - Part 3 ⌨️ (1:39:57) Creating a Calculator - Part 4 ⌨️ (1:52:36) Creating a Calculator - Part 5 ⌨️ (2:00:41) Creating a Calculator - Part 6 ⌨️ (2:08:18) Creating a Calculator - Part 7 ⌨️ (2:11:32) Finishing the Calculator!! Tutorial from codedamn. Check out the codedamn channel for more great tutorials: https://www.youtube.com/channel/UCJUmE61LxhbhudzUugHL2wQ -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://medium.freecodecamp.org

detail
{'title': 'React Native - Intro Course for Beginners', 'heatmap': [{'end': 1411.954, 'start': 1322.33, 'weight': 1}], 'summary': "'react native - intro course for beginners' covers the introduction to react native, setting up development, android studio installation, react native basics, state and styling, text input and layout, building a calculator app, enhancing the calculator, and javascript and react native ui updates, emphasizing cross-platform app development, android setup, react native structure, state management, layout styling, and calculator app building.", 'chapters': [{'end': 363.654, 'segs': [{'end': 84.893, 'src': 'embed', 'start': 51.704, 'weight': 0, 'content': [{'end': 61.311, 'text': "so for you guys, what react native is is that it's a way to write cross-platform applications on JavaScript.", 'start': 51.704, 'duration': 9.607}, {'end': 69.18, 'text': 'So if you know JavaScript then probably you can get started with React Native immediately.', 'start': 61.812, 'duration': 7.368}, {'end': 84.893, 'text': 'Because what React Native does is that it provides you a way to write JavaScript and then React Native would turn that JavaScript into your native code.', 'start': 69.981, 'duration': 14.912}], 'summary': 'React native enables cross-platform app development using javascript, allowing for immediate start for javascript developers.', 'duration': 33.189, 'max_score': 51.704, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec51704.jpg'}, {'end': 204.037, 'src': 'embed', 'start': 136.622, 'weight': 1, 'content': [{'end': 143.283, 'text': 'Now the downsides of react native is that basically you cannot create almost every app with it.', 'start': 136.622, 'duration': 6.661}, {'end': 152.046, 'text': 'I usually prefer to go with react native for smaller and quicker apps and sometimes some big apps as well.', 'start': 143.283, 'duration': 8.763}, {'end': 159.79, 'text': 'and But React Native, I guess, is not suitable for developing high-end performance things like games or something like that.', 'start': 152.046, 'duration': 7.744}, {'end': 165.973, 'text': 'Because in that case, Native is still the best, though React Native still compiles to Native.', 'start': 160.31, 'duration': 5.663}, {'end': 172.977, 'text': 'But I guess with Native, you have a lot of gears in hand to tweak the controls.', 'start': 166.793, 'duration': 6.184}, {'end': 180.547, 'text': "We're going to discuss how to set up React Native environment and basically get started working with React Native.", 'start': 174.565, 'duration': 5.982}, {'end': 186.01, 'text': 'To get started with React Native, we need to obviously set up its environment and all that stuff first.', 'start': 181.088, 'duration': 4.922}, {'end': 189.951, 'text': 'So first things first, how do we actually set up React Native?', 'start': 186.77, 'duration': 3.181}, {'end': 195.313, 'text': 'So if you go to the official website, you can see that we have got a nice Get Started link here.', 'start': 190.631, 'duration': 4.682}, {'end': 197.834, 'text': 'All right, the confusion starts here.', 'start': 195.954, 'duration': 1.88}, {'end': 200.836, 'text': 'Now, there are two sections.', 'start': 198.695, 'duration': 2.141}, {'end': 204.037, 'text': 'You can see Quick Start and Building Projects with Native Code.', 'start': 201.056, 'duration': 2.981}], 'summary': 'React native is suitable for smaller and quicker apps, not for high-end performance like games; setup involves environment configuration.', 'duration': 67.415, 'max_score': 136.622, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec136622.jpg'}], 'start': 0.129, 'title': 'Introduction to react native', 'summary': 'Introduces react native as a way to write cross-platform applications using javascript, emphasizing the ease of learning, fast performance, and preference for building projects with native code over using expo.', 'chapters': [{'end': 363.654, 'start': 0.129, 'title': 'Introduction to react native', 'summary': 'Introduces react native as a way to write cross-platform applications using javascript, highlighting its ease of learning and fast performance. it also outlines the downsides of react native and explains the setup process for getting started with react native, emphasizing the preference for building projects with native code over using expo.', 'duration': 363.525, 'highlights': ['React Native enables cross-platform applications using JavaScript, making it easy to learn and offering fast performance, suitable for Android and iOS.', 'Preference for using React Native for smaller and quicker apps, while acknowledging its limitations for high-performance applications like games.', 'Recommendation to set up React Native environment by building projects with native code rather than using Expo, as Expo limits flexibility.', 'Explanation of the setup process for React Native, including the installation of Node and targeting the OS as Android for development.']}], 'duration': 363.525, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec129.jpg', 'highlights': ['React Native enables cross-platform applications using JavaScript, offering fast performance for Android and iOS.', 'Recommendation to set up React Native environment by building projects with native code rather than using Expo.', 'Preference for using React Native for smaller and quicker apps, acknowledging its limitations for high-performance applications like games.', 'Explanation of the setup process for React Native, including the installation of Node and targeting the OS as Android for development.']}, {'end': 962.921, 'segs': [{'end': 388.353, 'src': 'embed', 'start': 363.654, 'weight': 2, 'content': [{'end': 370.327, 'text': "so once you're done with this, you need to install the react native CLI and So to do that again, you have to just do npm,", 'start': 363.654, 'duration': 6.673}, {'end': 377.569, 'text': 'install react-native-cli and make sure you install it globally by writing the dash G flag.', 'start': 370.327, 'duration': 7.242}, {'end': 382.851, 'text': 'And since I already have that installed, I guess it should not take me a lot of time.', 'start': 378.089, 'duration': 4.762}, {'end': 388.353, 'text': "So you can see that it's just fetched the local copy of that thing.", 'start': 383.971, 'duration': 4.382}], 'summary': 'Install react native cli globally using npm', 'duration': 24.699, 'max_score': 363.654, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec363654.jpg'}, {'end': 474.331, 'src': 'embed', 'start': 418.104, 'weight': 1, 'content': [{'end': 423.908, 'text': 'basically, npm version 5 is not really compatible with the react native the last time i checked.', 'start': 418.104, 'duration': 5.804}, {'end': 434.433, 'text': 'so, um, if you face any problems and you find out that your npm version is um version 5, point something or above, then what you want to do is npm.', 'start': 423.908, 'duration': 10.525}, {'end': 440.276, 'text': "install NPM and I'll do it version here, right in my case.", 'start': 434.433, 'duration': 5.843}, {'end': 440.816, 'text': "It's four point.", 'start': 440.316, 'duration': 0.5}, {'end': 443.097, 'text': 'six, point one All right.', 'start': 440.816, 'duration': 2.281}, {'end': 452, 'text': 'with that being said, now, once you have done that, you should have your react native CLI on board and, After this,', 'start': 443.097, 'duration': 8.903}, {'end': 455.802, 'text': 'what you want to do is obviously have installed Android studio.', 'start': 452, 'duration': 3.802}, {'end': 465.595, 'text': 'now you need Android studio JDK and all that stuff, Because, remember, React Native is actually developing native apps for you.', 'start': 455.802, 'duration': 9.793}, {'end': 470.163, 'text': 'So just go ahead and download the JDK.', 'start': 465.876, 'duration': 4.287}, {'end': 474.331, 'text': "And how you do that is basically, let's see.", 'start': 470.183, 'duration': 4.148}], 'summary': 'React native may not be compatible with npm v5; use npm v4.6.1. install react native cli and android studio with jdk for development.', 'duration': 56.227, 'max_score': 418.104, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec418104.jpg'}, {'end': 614.501, 'src': 'embed', 'start': 589.175, 'weight': 0, 'content': [{'end': 595.637, 'text': 'But for now, just remember that your React Native right now is targeting this Android 6 platform.', 'start': 589.175, 'duration': 6.462}, {'end': 600.498, 'text': 'And by targeting, that means that your app would be most optimized, developed for this thing.', 'start': 595.677, 'duration': 4.821}, {'end': 605.499, 'text': 'And for backward compatibility, you have to add some sort of code or something.', 'start': 601.238, 'duration': 4.261}, {'end': 610.18, 'text': 'Forward compatibility for forward compatibility as well.', 'start': 606.199, 'duration': 3.981}, {'end': 611.12, 'text': 'So yeah.', 'start': 610.82, 'duration': 0.3}, {'end': 614.501, 'text': 'So here we are.', 'start': 612.48, 'duration': 2.021}], 'summary': 'React native targets android 6 for optimized app development and requires code for backward and forward compatibility.', 'duration': 25.326, 'max_score': 589.175, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec589175.jpg'}, {'end': 801.016, 'src': 'embed', 'start': 754.302, 'weight': 5, 'content': [{'end': 759.909, 'text': 'then you have to go to somewhere like advanced settings of your computer.', 'start': 754.302, 'duration': 5.607}, {'end': 767.134, 'text': 'then you would see environment variables and then basically add those stuff for Linux and Mac OS users.', 'start': 759.909, 'duration': 7.225}, {'end': 775.02, 'text': 'just copy this stuff and Remind me tomorrow.', 'start': 767.134, 'duration': 7.886}, {'end': 779.103, 'text': 'just copy this stuff and go ahead and inside your terminal, right here.', 'start': 775.02, 'duration': 4.083}, {'end': 786.629, 'text': 'Just open your bash profile, or no bash?', 'start': 779.684, 'duration': 6.945}, {'end': 801.016, 'text': 'well, bash, bash profile, it is right.', 'start': 790.205, 'duration': 10.811}], 'summary': 'Instructions for adding environment variables for linux and mac os users.', 'duration': 46.714, 'max_score': 754.302, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec754302.jpg'}], 'start': 363.654, 'title': 'Setting up react native development', 'summary': 'Covers installing react native cli, managing npm versions, setting up react native for android development, and emphasizes the importance of using specific versions for compatibility and targeting android 6 for optimized app development.', 'chapters': [{'end': 443.097, 'start': 363.654, 'title': 'Installing react native cli and managing npm versions', 'summary': 'Outlines the process of installing react native cli and managing npm versions, emphasizing the importance of using version 4.6.1 to ensure compatibility with react native applications.', 'duration': 79.443, 'highlights': ["It is crucial to install the react native CLI by running 'npm install react-native-cli' globally using the -g flag to ensure it is installed globally.", 'Using npm version 4.6.1 is emphasized as it is compatible with React Native applications, while version 5 and above may cause compatibility issues.', 'Incompatibility issues arise when using npm version 5 or above with React Native, necessitating the installation of npm version 4.6.1 to avoid potential problems.']}, {'end': 962.921, 'start': 443.097, 'title': 'Setting up react native for android development', 'summary': 'Walks through setting up react native for android development, covering the installation of android studio, jdk, android sdk, and configuring environment variables, emphasizing the importance of targeting android 6 platform for optimized app development.', 'duration': 519.824, 'highlights': ['Configuring environment variables is essential for Windows, Mac, and Linux users to set up React Native, emphasizing the specific instructions for each operating system.', 'Emphasizing the importance of targeting Android 6 platform for optimized app development, with the mention of backward and forward compatibility.', 'The installation process of Android Studio, JDK, and Android SDK is detailed, with an emphasis on the necessity of these tools for React Native development.']}], 'duration': 599.267, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec363654.jpg', 'highlights': ['Emphasizing the importance of targeting Android 6 platform for optimized app development, with the mention of backward and forward compatibility.', 'The installation process of Android Studio, JDK, and Android SDK is detailed, with an emphasis on the necessity of these tools for React Native development.', "It is crucial to install the react native CLI by running 'npm install react-native-cli' globally using the -g flag to ensure it is installed globally.", 'Using npm version 4.6.1 is emphasized as it is compatible with React Native applications, while version 5 and above may cause compatibility issues.', 'Incompatibility issues arise when using npm version 5 or above with React Native, necessitating the installation of npm version 4.6.1 to avoid potential problems.', 'Configuring environment variables is essential for Windows, Mac, and Linux users to set up React Native, emphasizing the specific instructions for each operating system.']}, {'end': 1935.983, 'segs': [{'end': 1025.281, 'src': 'embed', 'start': 998.7, 'weight': 2, 'content': [{'end': 1005.346, 'text': 'because in my case it might be fetching a lot of stuff from the cache itself, but for you it would be downloading all that stuff.', 'start': 998.7, 'duration': 6.646}, {'end': 1011.631, 'text': 'so you see that i am looks like i am already done right.', 'start': 1005.346, 'duration': 6.285}, {'end': 1018.096, 'text': "you can see that it's set up on my end and hopefully should be set up on yours as well.", 'start': 1011.631, 'duration': 6.465}, {'end': 1025.281, 'text': "and basically, that's it for this video, and in the next video i'm just going to show you a very basic hello world with react native,", 'start': 1018.096, 'duration': 7.185}], 'summary': 'Comparing caching benefits and setup completion for video tutorials.', 'duration': 26.581, 'max_score': 998.7, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec998700.jpg'}, {'end': 1057.897, 'src': 'embed', 'start': 1033.288, 'weight': 1, 'content': [{'end': 1045.788, 'text': "I'm gonna go over through basic file system and how react actually organizes its files so that it's easier to work for you later on with the application folder structure and all that stuff.", 'start': 1033.288, 'duration': 12.5}, {'end': 1048.731, 'text': "so let's get into it All right.", 'start': 1045.788, 'duration': 2.943}, {'end': 1057.897, 'text': 'so, coming to the file structure, what we have right here for React Native is that if you see something like this, if you start from the top,', 'start': 1048.731, 'duration': 9.166}], 'summary': 'Explaining react file system for easier application development.', 'duration': 24.609, 'max_score': 1033.288, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec1033288.jpg'}, {'end': 1243.557, 'src': 'embed', 'start': 1211.448, 'weight': 3, 'content': [{'end': 1213.611, 'text': "So we'd come to that later on.", 'start': 1211.448, 'duration': 2.163}, {'end': 1222.283, 'text': 'then we have the app.json file, which just consists of the name, and you know, stuff like that related to your application, pretty handful stuff.', 'start': 1213.611, 'duration': 8.672}, {'end': 1232.073, 'text': 'and So the next thing is index.js and basically this is the file which bootstraps your application right?', 'start': 1222.283, 'duration': 9.79}, {'end': 1236.175, 'text': 'So this is the first file which React Native enters.', 'start': 1232.714, 'duration': 3.461}, {'end': 1243.557, 'text': 'So yeah, you can see that we are importing the app from here, the same file here.', 'start': 1237.175, 'duration': 6.382}], 'summary': 'App.json contains name and related info. index.js bootstraps react native app.', 'duration': 32.109, 'max_score': 1211.448, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec1211448.jpg'}, {'end': 1411.954, 'src': 'heatmap', 'start': 1322.33, 'weight': 1, 'content': [{'end': 1329.612, 'text': "so um, right now i'm running osx, so i'm just gonna keep this line and move the other two right.", 'start': 1322.33, 'duration': 7.282}, {'end': 1332.332, 'text': 'just save this.', 'start': 1330.952, 'duration': 1.38}, {'end': 1339.954, 'text': 'basically, this virus is telling the react native where the SDK is located for Android.', 'start': 1332.332, 'duration': 7.622}, {'end': 1343.115, 'text': 'right, and once you do that, basically we are good to go.', 'start': 1339.954, 'duration': 3.161}, {'end': 1350.076, 'text': 'so now you can just go to app.js and change this to hello world with just some text,', 'start': 1343.115, 'duration': 6.961}, {'end': 1358.076, 'text': 'and this is again not an error because VS Code is just complaining that this should be in a TypeScript file, not a JS file.', 'start': 1350.076, 'duration': 8}, {'end': 1360.177, 'text': "Not a problem really, but it's okay.", 'start': 1358.236, 'duration': 1.941}, {'end': 1371.261, 'text': "So there we are and once you're done with that, just go ahead to your terminal and write react native run Android and hit enter.", 'start': 1361.237, 'duration': 10.024}, {'end': 1377.283, 'text': 'Now I have my personal Android device connected right here, if you can see.', 'start': 1371.881, 'duration': 5.402}, {'end': 1379.964, 'text': 'this one right.', 'start': 1378.303, 'duration': 1.661}, {'end': 1390.31, 'text': 'so we can just wait for this build to complete and then i would actually be able to run this application on my real android device,', 'start': 1379.964, 'duration': 10.346}, {'end': 1391.291, 'text': 'which is this thing right here.', 'start': 1390.31, 'duration': 0.981}, {'end': 1400.076, 'text': 'you can see, i can move this around with my finger without actually touching the screen right.', 'start': 1391.291, 'duration': 8.785}, {'end': 1411.954, 'text': 'so here we are and let react native, build the application And meanwhile what I can do is inside another tab right here, I can say React Native,', 'start': 1400.076, 'duration': 11.878}], 'summary': 'Demonstrating react native setup and running app on android device.', 'duration': 89.624, 'max_score': 1322.33, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec1322330.jpg'}, {'end': 1545.283, 'src': 'embed', 'start': 1518.7, 'weight': 0, 'content': [{'end': 1523.104, 'text': 'All right, you can see that our Android bundler is 100% done.', 'start': 1518.7, 'duration': 4.404}, {'end': 1525.906, 'text': "So let's just see what's up on my screen.", 'start': 1523.304, 'duration': 2.602}, {'end': 1528.869, 'text': "Hey, it's Hello World from React Native.", 'start': 1526.527, 'duration': 2.342}, {'end': 1538.517, 'text': 'So you can see, this is a truly native application running on your device, on your Android phone right now, coded in JavaScript right?', 'start': 1529.449, 'duration': 9.068}, {'end': 1540.138, 'text': 'And this is a real Android device.', 'start': 1538.697, 'duration': 1.441}, {'end': 1545.283, 'text': "Actually real, because I'm just mirroring my phone on the Mac OS.", 'start': 1541.54, 'duration': 3.743}], 'summary': "Android bundler is 100% complete, showcasing react native's truly native application running on a real android device, coded in javascript.", 'duration': 26.583, 'max_score': 1518.7, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec1518700.jpg'}], 'start': 962.921, 'title': 'Android studio installation and react native basics', 'summary': 'Provides tips for troubleshooting android studio installation, emphasizing time consumption. it also introduces the file structure of a react native project, including key files and folders. additionally, it covers setting up react native for android and ios, running the app on real devices, and demonstrating the power of react native in running the same code on different operating systems.', 'chapters': [{'end': 1018.096, 'start': 962.921, 'title': 'Android studio installation tips', 'summary': 'Provides tips for troubleshooting android studio installation, including checking the sdk and offering assistance in case of persistent errors, while emphasizing the potential time consumption of the process.', 'duration': 55.175, 'highlights': ['It might take a little bit time for you for the first time, because in my case it might be fetching a lot of stuff from the cache itself, but for you it would be downloading all that stuff. (Emphasizing potential time consumption of the installation process)', "If still the error persists, then you can ask that in comments and I'll be just happy to help you. (Offering assistance in case of persistent errors)", 'make sure to check all of that as well. (Emphasizing the importance of checking the Android studio SDK and related installations)']}, {'end': 1332.332, 'start': 1018.096, 'title': 'React native file structure', 'summary': 'Introduces the basic file structure of a react native project, highlighting the android and ios folders, the known modules folder for additional modules, and key files like app.js, app.json, and index.js.', 'duration': 314.236, 'highlights': ['The chapter introduces the basic file structure of a React Native project, highlighting the Android and iOS folders, the known modules folder for additional modules, and key files like app.js, app.json, and index.js.', 'The chapter explains the purpose and content of important files such as app.js, app.json, index.js, and package.json.', 'The chapter briefly touches on setting up a dummy project on a real Android device and preparing the Android device for coding.']}, {'end': 1935.983, 'start': 1332.332, 'title': 'React native setup and hello world app', 'summary': "Covers the process of setting up react native for android and ios, running the app on real devices, and explaining the working of a simple 'hello world' app, demonstrating the power of react native in running the same code on different operating systems.", 'duration': 603.651, 'highlights': ["The process of setting up React Native for Android and iOS, running the app on real devices, and the subsequent demonstration of the 'Hello World' app, showcasing the power of React Native in running the same code on different operating systems.", 'Explanation of the point of entry for the Android project, the import of main React framework and component, the use of platform to differentiate between platforms, and the application of style sheet to create and apply CSS to the React Native component.', "Detailed overview of JSX, its purpose in allowing the writing of HTML inside JavaScript, the explanation of components in React.js and React Native, the rendering of the 'Hello World' app, and the creation and application of style sheet.", 'Importance of having a basic understanding of ES6 for following along with the React Native series, the use of Flexbox layout system in React Native for applying styles, and the assurance of covering detailed explanations of all aspects in subsequent tutorials.']}], 'duration': 973.062, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec962921.jpg', 'highlights': ["The process of setting up React Native for Android and iOS, running the app on real devices, and the subsequent demonstration of the 'Hello World' app, showcasing the power of React Native in running the same code on different operating systems.", 'The chapter introduces the basic file structure of a React Native project, highlighting the Android and iOS folders, the known modules folder for additional modules, and key files like app.js, app.json, and index.js.', 'It might take a little bit time for you for the first time, because in my case it might be fetching a lot of stuff from the cache itself, but for you it would be downloading all that stuff. (Emphasizing potential time consumption of the installation process)', 'The chapter explains the purpose and content of important files such as app.js, app.json, index.js, and package.json.']}, {'end': 3251.451, 'segs': [{'end': 2278.088, 'src': 'embed', 'start': 2253.42, 'weight': 1, 'content': [{'end': 2271.506, 'text': 'So what that means is that if you change the state of your component and by state I mean a particular object in that component React would smartly check what stuff was changed in that particular state and which stuff your component needs to be updated of.', 'start': 2253.42, 'duration': 18.086}, {'end': 2276.288, 'text': "OK, so let's just break this into code example.", 'start': 2272.106, 'duration': 4.182}, {'end': 2278.088, 'text': 'right. so first of all,', 'start': 2277.108, 'duration': 0.98}], 'summary': 'React smartly updates components based on changed state.', 'duration': 24.668, 'max_score': 2253.42, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec2253420.jpg'}, {'end': 2640.731, 'src': 'embed', 'start': 2609.721, 'weight': 0, 'content': [{'end': 2612.843, 'text': "One more time, let's just shake our device and reload.", 'start': 2609.721, 'duration': 3.122}, {'end': 2621.15, 'text': "And you can see how fast these builds are because you're not really building the whole application itself.", 'start': 2613.003, 'duration': 8.147}, {'end': 2624.353, 'text': "That's what React Native does behind the scenes for you.", 'start': 2621.35, 'duration': 3.003}, {'end': 2628.016, 'text': 'So now you can see that we have red, green, red, green, toggling colors.', 'start': 2624.753, 'duration': 3.263}, {'end': 2632.261, 'text': 'with us and basically that is possible because of the state.', 'start': 2628.556, 'duration': 3.705}, {'end': 2640.731, 'text': 'so you see that we do not have any sort of logic which updates, which re-renders this um component.', 'start': 2632.261, 'duration': 8.47}], 'summary': 'React native builds quickly, toggles colors, and updates state efficiently.', 'duration': 31.01, 'max_score': 2609.721, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec2609721.jpg'}, {'end': 2682.635, 'src': 'embed', 'start': 2659.813, 'weight': 3, 'content': [{'end': 2671.123, 'text': 'but right now states would be good for us to go and basically would help us to manage the actual state of the component how the component remembers stuff.', 'start': 2659.813, 'duration': 11.31}, {'end': 2681.415, 'text': "We're going to take a look at what style sheets are in React Native and basically just create a little application as well surrounding around that concept.", 'start': 2672.329, 'duration': 9.086}, {'end': 2682.635, 'text': "So let's get started.", 'start': 2681.895, 'duration': 0.74}], 'summary': 'Exploring state management and style sheets in react native.', 'duration': 22.822, 'max_score': 2659.813, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec2659813.jpg'}, {'end': 2956.226, 'src': 'embed', 'start': 2926.759, 'weight': 4, 'content': [{'end': 2931.521, 'text': "okay, now let's just go ahead and create some complex layouts, right.", 'start': 2926.759, 'duration': 4.762}, {'end': 2939.966, 'text': "so what we can do now and basically, if you just know how to play around with flexbox, it's kind of easy to do so we can say like styles, dot,", 'start': 2931.521, 'duration': 8.445}, {'end': 2956.226, 'text': 'half to one and we can just say a similar thing on half to two, and for here I can say half to one.', 'start': 2939.966, 'duration': 16.26}], 'summary': 'Creating complex layouts using flexbox is easy.', 'duration': 29.467, 'max_score': 2926.759, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec2926759.jpg'}], 'start': 1939.431, 'title': 'React native state and styling', 'summary': 'Covers react native props and state, emphasizing their roles in providing information to components and managing changes. it also discusses state management, component rendering, and flexbox layouts for styling, with examples of dynamic state-based rendering and flexbox-based layouts.', 'chapters': [{'end': 2300.214, 'start': 1939.431, 'title': 'React native props and state', 'summary': 'Discusses the concept of props in react native, explaining their role in providing additional information to components and their association with inbuilt and custom components. it also covers the concept of state in react native, highlighting its role in managing component changes and updates.', 'duration': 360.783, 'highlights': ['The chapter discusses the concept of props in React Native, explaining their role in providing additional information to components and their association with inbuilt and custom components.', 'It covers the concept of state in React Native, highlighting its role in managing component changes and updates.']}, {'end': 2531.806, 'start': 2300.214, 'title': 'Understanding react state and component rendering', 'summary': 'Discusses the concept of state in react components, how it triggers re-rendering, and provides an example of updating the state to dynamically change component styles and trigger re-rendering.', 'duration': 231.592, 'highlights': ['The state in React components is a special object monitored by React, and when it is changed using setState, the component re-renders to reflect the changes.', "The example demonstrates using setState to dynamically update the component's state and trigger re-rendering to reflect the updated styles.", 'The process of utilizing setState to change component state triggers the re-rendering of the React component, as seen in the example of dynamically updating styles.', 'The concept of state in React components and its relationship with triggering re-rendering is explained, showcasing the impact of changing state on component rendering.']}, {'end': 2926.759, 'start': 2531.806, 'title': 'React native styles and state management', 'summary': 'Demonstrates the use of state in react native, showcasing toggling colors based on state and the automatic rendering behavior, and introduces the concept of style sheets with flexbox-based layouts.', 'duration': 394.953, 'highlights': ['React Native automatically updates component rendering when state changes, enabling fast toggling of colors based on state', 'Introduction to the concept of style sheets with flexbox-based layouts in React Native', 'Explanation of how React Native converts styles into native properties for elements, including position, color, opacity, and background']}, {'end': 3251.451, 'start': 2926.759, 'title': 'Flexbox layouts and styling', 'summary': 'Demonstrates creating complex layouts using flexbox, achieving a 2:1 ratio for elements, customizing text elements with specific styles such as color and font size, and applying common styles using a separate class for cleaner and more readable code.', 'duration': 324.692, 'highlights': ['Creating complex layouts using flexbox', 'Achieving a 2:1 ratio for elements', 'Customizing text elements with specific styles', 'Applying common styles using a separate class']}], 'duration': 1312.02, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec1939431.jpg', 'highlights': ['React Native automatically updates component rendering when state changes, enabling fast toggling of colors based on state', "The example demonstrates using setState to dynamically update the component's state and trigger re-rendering to reflect the updated styles", 'The concept of state in React components and its relationship with triggering re-rendering is explained, showcasing the impact of changing state on component rendering', 'Introduction to the concept of style sheets with flexbox-based layouts in React Native', 'Creating complex layouts using flexbox']}, {'end': 4705.119, 'segs': [{'end': 3303.888, 'src': 'embed', 'start': 3277.708, 'weight': 3, 'content': [{'end': 3281.571, 'text': 'You can just associate that object with your state as well.', 'start': 3277.708, 'duration': 3.863}, {'end': 3287.716, 'text': 'And then when you would update that variable, your render function would be called.', 'start': 3282.732, 'duration': 4.984}, {'end': 3294.305, 'text': 'and your CSS applied styles would be updated as well to that element.', 'start': 3288.866, 'duration': 5.439}, {'end': 3303.888, 'text': 'just gonna show you how to work with text input in react native and basically just allows you to get input from the user,', 'start': 3295.6, 'duration': 8.288}], 'summary': 'Learn to associate objects with state in react native for updating variables and applying styles.', 'duration': 26.18, 'max_score': 3277.708, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec3277708.jpg'}, {'end': 3923.732, 'src': 'embed', 'start': 3888.861, 'weight': 0, 'content': [{'end': 3894.363, 'text': 'And I can just say padding of 20 as well so that we get a little bit of distance.', 'start': 3888.861, 'duration': 5.502}, {'end': 3901.645, 'text': 'Right So now you can see that we have got a little nice looking layout, I believe.', 'start': 3895.563, 'duration': 6.082}, {'end': 3908.327, 'text': "And there's a problem again because you cannot have like username and password reflecting the same thing.", 'start': 3902.525, 'duration': 5.802}, {'end': 3923.732, 'text': 'so username, and basically you can just keep it in a state or you can just, you know, get it when you tap on that button as well.', 'start': 3909.432, 'duration': 14.3}], 'summary': 'Discussion on layout design and handling username and password input.', 'duration': 34.871, 'max_score': 3888.861, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec3888861.jpg'}, {'end': 4065.765, 'src': 'embed', 'start': 4034.835, 'weight': 1, 'content': [{'end': 4038.056, 'text': 'now the thing is, if you take a look at the last video.', 'start': 4034.835, 'duration': 3.221}, {'end': 4044.058, 'text': 'what we did is that we have to retrieve value of this text input somehow right.', 'start': 4038.056, 'duration': 6.002}, {'end': 4052.702, 'text': 'so what we did, first of all, is just assigned a state variable to its value and on change text,', 'start': 4044.058, 'duration': 8.644}, {'end': 4059.064, 'text': 'we just updated that state variable so that we get um the value all the time.', 'start': 4052.702, 'duration': 6.362}, {'end': 4065.765, 'text': 'so the ui and the react js code, react native code, is always in sync right.', 'start': 4059.064, 'duration': 6.701}], 'summary': 'In the last video, the speaker explained how they retrieved the value of a text input in react native by assigning a state variable and updating it on change.', 'duration': 30.93, 'max_score': 4034.835, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec4034835.jpg'}, {'end': 4504.835, 'src': 'embed', 'start': 4475.98, 'weight': 2, 'content': [{'end': 4486.704, 'text': 'now the thing is that you react actually recommends you to always not really always use control, but in most of the cases use controlled components.', 'start': 4475.98, 'duration': 10.724}, {'end': 4495.169, 'text': "that's okay to use controlled components, but but the thing is that if you do not really need to interact with these components a lot,", 'start': 4486.704, 'duration': 8.465}, {'end': 4504.835, 'text': 'what i believe is that you are kind of like you know, updating state at every keystroke, so it might not really hurt performance that much.', 'start': 4495.169, 'duration': 9.666}], 'summary': 'React recommends using controlled components in most cases for improved performance.', 'duration': 28.855, 'max_score': 4475.98, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec4475980.jpg'}], 'start': 3251.451, 'title': 'Working with text input and layout in react native', 'summary': 'Covers working with text input, creating a basic login layout, retrieving input values, and using controlled and uncontrolled components in react native, aiming to achieve real-time synchronization of ui and code and demonstrate the use of controlled components for managing values.', 'chapters': [{'end': 3826.898, 'start': 3251.451, 'title': 'Working with text input in react native', 'summary': 'Explains how to work with text input in react native, demonstrating the use of text input to get user input and the customization options available, emphasizing the importance of binding functions to access class properties and reflecting text input changes in the state.', 'duration': 575.447, 'highlights': ['The chapter explains how to work with text input in React Native', 'demonstrating the use of text input to get user input', 'the customization options available', 'emphasizing the importance of binding functions to access class properties', 'reflecting text input changes in the state']}, {'end': 4034.835, 'start': 3827.799, 'title': 'Creating a basic login layout', 'summary': 'Covers creating a basic login layout with username, password, and a button, along with the concept of uncontrolled and controlled components in react native, aiming to achieve a user-friendly interface and data synchronization.', 'duration': 207.036, 'highlights': ['The chapter covers creating a basic login layout with username, password, and a button, along with the concept of uncontrolled and controlled components in React Native, aiming to achieve a user-friendly interface and data synchronization.', 'Demonstrates creating a layout using React Native, including setting up a container with flex properties and padding to achieve a visually appealing design.', 'Explains the importance of keeping the UI and model in sync, especially in applications where user input needs to be synchronized and verified, emphasizing the need for data synchronization in user interfaces.']}, {'end': 4328.241, 'start': 4034.835, 'title': 'Retrieving input values in react native', 'summary': 'Explains how to retrieve input values in react native using state variables, event handling, and refs, allowing for real-time synchronization of ui and code, as well as obtaining input values on demand, illustrated with a specific example of capturing username and password values.', 'duration': 293.406, 'highlights': ['The chapter demonstrates the use of state variables and event handling to ensure real-time synchronization between the UI and React Native code.', 'The method of obtaining input values on demand using refs is explained, allowing for the capture of specific input values, such as capturing username and password values.', 'The use of ref and last native text is highlighted as a way to capture input values on demand, providing a specific example of obtaining the username and password values in real-time.']}, {'end': 4705.119, 'start': 4328.702, 'title': 'Using controlled and uncontrolled components in react native', 'summary': 'Discusses the concept of controlled and uncontrolled components in react native, emphasizing the benefits of using controlled components for managing values, along with a brief mention of creating a calculator application in react native.', 'duration': 376.417, 'highlights': ['React recommends using controlled components in most cases, as it provides more power and control over the component, compared to uncontrolled components.', 'Demonstrates the process of creating a basic UI layout for a calculator application in React Native, outlining the structure and styles required for displaying the result, user input, and operational buttons.', 'Explains the difference between using uncontrolled and controlled components, highlighting the advantage of always having access to the state values when using controlled components.', 'Emphasizes the importance of using controlled components for managing values, as opposed to letting the host platform manage them, such as Android in this case.', 'Mentions the possibility of using an uncontrolled approach if not interacting with the component much, but recommends using controlled components for more power and control.']}], 'duration': 1453.668, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec3251451.jpg', 'highlights': ['The chapter covers creating a basic login layout with username, password, and a button, emphasizing the need for data synchronization in user interfaces.', 'The chapter demonstrates the use of state variables and event handling to ensure real-time synchronization between the UI and React Native code.', 'React recommends using controlled components in most cases, as it provides more power and control over the component, compared to uncontrolled components.', 'The chapter explains how to work with text input in React Native, emphasizing the importance of binding functions to access class properties.']}, {'end': 5848.004, 'segs': [{'end': 4736.173, 'src': 'embed', 'start': 4705.179, 'weight': 0, 'content': [{'end': 4710.262, 'text': 'And basically this kind of like some sort of optimization as well, which React does under the hood.', 'start': 4705.179, 'duration': 5.083}, {'end': 4715.725, 'text': "So in short, it does not hurt to actually use stylesheet.create all the time when you're creating styles.", 'start': 4710.302, 'duration': 5.423}, {'end': 4716.766, 'text': 'So just stick with that.', 'start': 4715.885, 'duration': 0.881}, {'end': 4720.406, 'text': "So with that being done, let's just create some styles now.", 'start': 4717.665, 'duration': 2.741}, {'end': 4726.809, 'text': 'Now for the container part, what we need is just the flex one so that it gives us full screen right now.', 'start': 4721.227, 'duration': 5.582}, {'end': 4729.33, 'text': 'Then for the result.', 'start': 4727.69, 'duration': 1.64}, {'end': 4736.173, 'text': "what we need right now is, let's just say, I give it a flex of one right?", 'start': 4729.33, 'duration': 6.843}], 'summary': 'React optimizes by using stylesheet.create for styles, stick with it.', 'duration': 30.994, 'max_score': 4705.179, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec4705179.jpg'}, {'end': 4858.843, 'src': 'embed', 'start': 4829.617, 'weight': 1, 'content': [{'end': 4832.438, 'text': "Right? And let's just give them a flex property as well.", 'start': 4829.617, 'duration': 2.821}, {'end': 4838.941, 'text': 'And for the buttons, what we can say is just flex grow one so that it just occupies all the remaining space.', 'start': 4832.838, 'duration': 6.103}, {'end': 4845.184, 'text': "So numbers could be flex of, let's just say, three.", 'start': 4840.562, 'duration': 4.622}, {'end': 4847.125, 'text': "I'm not really sure.", 'start': 4846.305, 'duration': 0.82}, {'end': 4848.666, 'text': 'We have to play around numbers here.', 'start': 4847.145, 'duration': 1.521}, {'end': 4851.087, 'text': 'And I can give it a flex of one here.', 'start': 4849.667, 'duration': 1.42}, {'end': 4852.848, 'text': 'So there we are.', 'start': 4852.268, 'duration': 0.58}, {'end': 4858.843, 'text': 'And Now, if we take a look at what we have actually done.', 'start': 4852.868, 'duration': 5.975}], 'summary': 'Adjusting flex properties for buttons to occupy remaining space and play with numbers.', 'duration': 29.226, 'max_score': 4829.617, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec4829617.jpg'}, {'end': 4978.117, 'src': 'embed', 'start': 4919.564, 'weight': 2, 'content': [{'end': 4921.746, 'text': 'we have 2 plus 1, 3 and 7..', 'start': 4919.564, 'duration': 2.182}, {'end': 4931.595, 'text': 'So it takes 70% width of the screen, right? It takes 20% and it takes 10% height, not width, sorry.', 'start': 4921.746, 'duration': 9.849}, {'end': 4936.739, 'text': 'So there we are with a very basic layout for our calculator.', 'start': 4932.436, 'duration': 4.303}, {'end': 4945.625, 'text': "We're gonna take a look at how we can actually go along and build the internals of our parent layouts.", 'start': 4938.201, 'duration': 7.424}, {'end': 4947.906, 'text': "And let's get into it real quick.", 'start': 4945.645, 'duration': 2.261}, {'end': 4956.671, 'text': 'So we can just create some buttons here by, as I said in the last video, by creating rows of buttons.', 'start': 4948.426, 'duration': 8.245}, {'end': 4959.733, 'text': "So we're going to say styles.row here.", 'start': 4956.691, 'duration': 3.042}, {'end': 4962.035, 'text': 'So these would be our rows.', 'start': 4960.834, 'duration': 1.201}, {'end': 4969.294, 'text': "And we're going to need, I'm not sure how many, 1, 2, 3, 4, 4 rows right here.", 'start': 4962.555, 'duration': 6.739}, {'end': 4975.176, 'text': "So we're going to say 1, 2, 3, 4, just like that.", 'start': 4970.094, 'duration': 5.082}, {'end': 4978.117, 'text': "And for each row, we're going to need a button.", 'start': 4976.056, 'duration': 2.061}], 'summary': 'Basic calculator layout with 70% width, 20% height, and 4 rows of buttons.', 'duration': 58.553, 'max_score': 4919.564, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec4919564.jpg'}], 'start': 4705.179, 'title': 'Building a calculator app in react native', 'summary': 'Covers react native styling using stylesheet.create, flex properties for layout, creating 4 rows of 3 buttons using flexbox, and building a calculator app with customized buttons and touchable opacity for responsiveness.', 'chapters': [{'end': 4947.906, 'start': 4705.179, 'title': 'React native styling', 'summary': 'Discusses using stylesheet.create for creating styles in react native, utilizing flex properties for layout, and importing and using views to create a basic calculator layout.', 'duration': 242.727, 'highlights': ['Using stylesheet.create for creating styles in React Native is recommended as it provides optimization under the hood.', 'Utilizing flex properties for layout, such as flex: 1, flex: 2, and flex: 3, is demonstrated for creating a full-screen container, result, calculation part, buttons, and numbers.', 'Importing and using views to create a basic calculator layout, organizing elements in rows and specifying percentages like 70%, 20%, and 10% for width and height, is shown.', 'Discussing the need for separate views inside numbers to contain rows of elements and the limitation of grid layouts in React.', 'The process of importing views and adjusting flex properties to achieve specific percentages for width and height in creating a basic calculator layout is detailed.']}, {'end': 5331.231, 'start': 4948.426, 'title': 'Creating rows of buttons in react native', 'summary': 'Discusses creating rows of buttons, with 4 rows and 3 buttons each, using flexbox properties to style and align the elements in a react native application.', 'duration': 382.805, 'highlights': ['Creating 4 rows with 3 buttons each', 'Styling and aligning elements using flexbox properties', 'Setting font size and color for result and calculation text']}, {'end': 5848.004, 'start': 5331.231, 'title': 'Building a calculator app', 'summary': 'Details the process of building a calculator app, including aligning and customizing buttons, using touchable opacity for responsiveness, and constructing the button section separately.', 'duration': 516.773, 'highlights': ['Constructing the button section separately', 'Using touchable opacity for button responsiveness', 'Aligning and customizing buttons']}], 'duration': 1142.825, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec4705179.jpg', 'highlights': ['Using stylesheet.create for creating styles in React Native is recommended as it provides optimization under the hood.', 'Utilizing flex properties for layout, such as flex: 1, flex: 2, and flex: 3, is demonstrated for creating a full-screen container, result, calculation part, buttons, and numbers.', 'Creating 4 rows with 3 buttons each', 'Importing and using views to create a basic calculator layout, organizing elements in rows and specifying percentages like 70%, 20%, and 10% for width and height, is shown.']}, {'end': 6741.131, 'segs': [{'end': 6008.535, 'src': 'embed', 'start': 5975.345, 'weight': 0, 'content': [{'end': 5986.892, 'text': 'right. so there we are with our basic calculator interface, with the buttons working kind of right, at least responding to the touch,', 'start': 5975.345, 'duration': 11.547}, {'end': 5992.076, 'text': 'but the result and the calculation part is still the same.', 'start': 5986.892, 'duration': 5.184}, {'end': 5995.778, 'text': "so we're going to take a look at that in the next tutorial.", 'start': 5992.076, 'duration': 3.702}, {'end': 6005.954, 'text': 'right now you can see that our calculator interface kind of looks complete.', 'start': 5999.412, 'duration': 6.542}, {'end': 6008.535, 'text': 'I believe the buttons are in place.', 'start': 6005.954, 'duration': 2.581}], 'summary': 'Basic calculator interface with buttons working, result and calculation part pending review. interface looks complete with buttons in place.', 'duration': 33.19, 'max_score': 5975.345, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec5975345.jpg'}, {'end': 6291.678, 'src': 'embed', 'start': 6261.705, 'weight': 2, 'content': [{'end': 6268.09, 'text': 'the only thing which is not a number really right now here is this equal to sign, because a decimal can be.', 'start': 6261.705, 'duration': 6.385}, {'end': 6272.973, 'text': 'you know, you can regard it as a number, because, um, it is used with numbers.', 'start': 6268.09, 'duration': 4.883}, {'end': 6276.476, 'text': 'so what you want to do is add a little bit of validation here.', 'start': 6272.973, 'duration': 3.503}, {'end': 6278.697, 'text': "so let's just add an equal to validation.", 'start': 6276.476, 'duration': 2.221}, {'end': 6283.601, 'text': "so i'm just going to say if text is equal to and equal to, well,", 'start': 6278.697, 'duration': 4.904}, {'end': 6291.678, 'text': 'in that case what we want is we want the actual result so far which we have right here.', 'start': 6283.601, 'duration': 8.077}], 'summary': 'Adding validation for an equal to sign in the code.', 'duration': 29.973, 'max_score': 6261.705, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec6261705.jpg'}, {'end': 6428.847, 'src': 'embed', 'start': 6400.517, 'weight': 3, 'content': [{'end': 6409.764, 'text': "but it's not really okay to have zeros, a lot of zeros in the front right, and actually what we need to do is add a back button to the app as well.", 'start': 6400.517, 'duration': 9.247}, {'end': 6417.429, 'text': 'and if we just take a look inside the calculator, what we have is a delete button right here, right.', 'start': 6409.764, 'duration': 7.665}, {'end': 6420.452, 'text': 'so what we have is one, two, three, four, five.', 'start': 6417.429, 'duration': 3.023}, {'end': 6423.562, 'text': "but how's it working?", 'start': 6420.452, 'duration': 3.11}, {'end': 6428.847, 'text': 'division, multiplication minus and plus plus minus.', 'start': 6423.562, 'duration': 5.285}], 'summary': "Adding a back button to the app and discussing the calculator's functions and numbers.", 'duration': 28.33, 'max_score': 6400.517, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec6400517.jpg'}, {'end': 6671.476, 'src': 'embed', 'start': 6633.171, 'weight': 4, 'content': [{'end': 6635.833, 'text': 'Okay, so, here we are with our first bug.', 'start': 6633.171, 'duration': 2.662}, {'end': 6638.476, 'text': "I'm not really sure how it did that.", 'start': 6636.734, 'duration': 1.742}, {'end': 6639.396, 'text': "Let's just reload it.", 'start': 6638.556, 'duration': 0.84}, {'end': 6645.582, 'text': 'So if I add like 555555123, how the hell did that comma appear there?', 'start': 6640.738, 'duration': 4.844}, {'end': 6663.052, 'text': 'if i do delete now, so it saves me this dot state dot result text dot split is not a function.', 'start': 6651.326, 'duration': 11.726}, {'end': 6671.476, 'text': 'okay, well, um, why is it not?', 'start': 6663.052, 'duration': 8.424}], 'summary': 'First bug encountered, involving unexpected comma and error in function. no. of bugs: 1', 'duration': 38.305, 'max_score': 6633.171, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec6633171.jpg'}], 'start': 5848.004, 'title': 'Building and enhancing a calculator', 'summary': 'Covers building a basic calculator interface with buttons for numbers and operations, implementing functionality to update the result text, adding validation for different number types, integrating a back button, and resolving a bug in the delete functionality.', 'chapters': [{'end': 6231.559, 'start': 5848.004, 'title': 'Building a basic calculator', 'summary': 'Discusses building a basic calculator interface with buttons for numbers, operations, and equals sign, and implementing functionality to update the result text when buttons are pressed, resulting in a complete calculator interface with functional buttons.', 'duration': 383.555, 'highlights': ['The chapter discusses building a basic calculator interface with buttons for numbers, operations, and equals sign, and implementing functionality to update the result text when buttons are pressed, resulting in a complete calculator interface with functional buttons.', 'Implementing functionality to update the result text when buttons are pressed, resulting in a complete calculator interface with functional buttons.', 'Creating a basic calculator interface with buttons for numbers, operations, and equals sign.']}, {'end': 6741.131, 'start': 6231.579, 'title': 'Adding validation and implementing back button', 'summary': 'Discusses the implementation of validation to handle different types of numbers and the addition of a back button to the calculator app, accompanied by the identification and resolution of a bug in the delete functionality.', 'duration': 509.552, 'highlights': ['Implementation of validation to handle different types of numbers', 'Addition of a back button to the calculator app', 'Identification and resolution of a bug in the delete functionality']}], 'duration': 893.127, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec5848004.jpg', 'highlights': ['Implementing functionality to update the result text when buttons are pressed, resulting in a complete calculator interface with functional buttons.', 'Covers building a basic calculator interface with buttons for numbers, operations, and equals sign, and implementing functionality to update the result text when buttons are pressed, resulting in a complete calculator interface with functional buttons.', 'Implementation of validation to handle different types of numbers', 'Addition of a back button to the calculator app', 'Identification and resolution of a bug in the delete functionality', 'Creating a basic calculator interface with buttons for numbers, operations, and equals sign.']}, {'end': 7560.599, 'segs': [{'end': 6796.128, 'src': 'embed', 'start': 6770.318, 'weight': 0, 'content': [{'end': 6776.481, 'text': 'So in this video, I just want to add support for these plus minus and multiplication buttons as well here.', 'start': 6770.318, 'duration': 6.163}, {'end': 6781.043, 'text': 'And actually, we can see that we do not see the division button.', 'start': 6777.121, 'duration': 3.922}, {'end': 6796.128, 'text': 'And the reason for that is that because we are omitting that and actually we can just make it a little bit more dynamic by just replacing this 4 with the or actually not this one,', 'start': 6782.103, 'duration': 14.025}], 'summary': 'The video aims to add support for plus, minus, and multiplication buttons, omitting the division button for increased dynamism.', 'duration': 25.81, 'max_score': 6770.318, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec6770318.jpg'}, {'end': 6861.015, 'src': 'embed', 'start': 6829.445, 'weight': 2, 'content': [{'end': 6833.969, 'text': "to the screen because we're gonna tokenize all our text later on.", 'start': 6829.445, 'duration': 4.524}, {'end': 6836.971, 'text': 'so it should be kind of easy for us.', 'start': 6833.969, 'duration': 3.002}, {'end': 6847.88, 'text': 'so for plus, for minus, for plus, for minus and for multiplication and for division.', 'start': 6836.971, 'duration': 10.909}, {'end': 6855.654, 'text': 'What I want is, just out of basic validation, that our text is not really black.', 'start': 6849.212, 'duration': 6.442}, {'end': 6858.994, 'text': "There's something at least to the left of it.", 'start': 6855.934, 'duration': 3.06}, {'end': 6861.015, 'text': "Right Because that's what we really want.", 'start': 6859.294, 'duration': 1.721}], 'summary': 'Tokenizing text for basic arithmetic operations and left validation.', 'duration': 31.57, 'max_score': 6829.445, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec6829445.jpg'}, {'end': 6918.403, 'src': 'embed', 'start': 6889.841, 'weight': 3, 'content': [{'end': 6894.344, 'text': "because I don't want the user to go beyond anything.", 'start': 6889.841, 'duration': 4.503}, {'end': 6896.505, 'text': 'it does not really make sense.', 'start': 6894.344, 'duration': 2.161}, {'end': 6898.946, 'text': 'because, um, what we are doing essentially here?', 'start': 6896.505, 'duration': 2.441}, {'end': 6904.168, 'text': 'if you take a look inside the console, um, you can see that we get a blank element.', 'start': 6898.946, 'duration': 5.222}, {'end': 6911.832, 'text': 'so splitting on a blank element right here, you can see it does not really make any sense because it returns us.', 'start': 6904.168, 'duration': 7.664}, {'end': 6915.14, 'text': 'uh, array of zero length.', 'start': 6911.832, 'duration': 3.308}, {'end': 6918.403, 'text': 'so when we split on that, we pop it, we get nothing.', 'start': 6915.14, 'duration': 3.263}], 'summary': 'Splitting on a blank element returns an array of zero length, providing no useful outcome.', 'duration': 28.562, 'max_score': 6889.841, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec6889841.jpg'}, {'end': 7041.873, 'src': 'embed', 'start': 7012.425, 'weight': 5, 'content': [{'end': 7020.004, 'text': 'so we can actually, ultimately, we have to tokenize the text anyway, right, so yeah,', 'start': 7012.425, 'duration': 7.579}, {'end': 7024.391, 'text': 'I guess we should tokenize all the text first and then proceed onwards.', 'start': 7020.004, 'duration': 4.387}, {'end': 7034.066, 'text': 'and by tokenizing, what I mean is that if our text is something like this, so I can just convert it into like three, then plus, then three,', 'start': 7024.391, 'duration': 9.675}, {'end': 7041.873, 'text': 'then star and then six and then power and all that stuff, and not really like that.', 'start': 7035.268, 'duration': 6.605}], 'summary': 'Tokenize the text for further processing.', 'duration': 29.448, 'max_score': 7012.425, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec7012425.jpg'}, {'end': 7441.378, 'src': 'embed', 'start': 7407.679, 'weight': 1, 'content': [{'end': 7410.4, 'text': 'then you want to do something right.', 'start': 7407.679, 'duration': 2.721}, {'end': 7414.581, 'text': 'so this is a basic logical implementation of a calculator.', 'start': 7410.4, 'duration': 4.181}, {'end': 7421.583, 'text': 'but what we can do, since we are making use of react native and again, if you remember, we are running JavaScript right,', 'start': 7414.581, 'duration': 7.002}, {'end': 7424.445, 'text': 'so we can cheat a little here.', 'start': 7422.063, 'duration': 2.382}, {'end': 7434.072, 'text': "so what i'm going to do instead of this, all this brainstorming and finding out what stuff goes where and aligning brackets and all that stuff,", 'start': 7424.445, 'duration': 9.627}, {'end': 7441.378, 'text': 'what we can do instead is make use of our old good but infamous friend eval.', 'start': 7434.072, 'duration': 7.306}], 'summary': 'Implementing a basic calculator using react native and javascript, leveraging the eval function for simplicity.', 'duration': 33.699, 'max_score': 7407.679, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec7407679.jpg'}, {'end': 7527.864, 'src': 'embed', 'start': 7497.865, 'weight': 4, 'content': [{'end': 7499.486, 'text': 'So this could possess a problem.', 'start': 7497.865, 'duration': 1.621}, {'end': 7506.789, 'text': 'if we are kind of allowing anything to be typed on the keyboard and then evaluating it.', 'start': 7500.046, 'duration': 6.743}, {'end': 7514.653, 'text': 'But since we are restricting the user input to only numbers, basically, and these signs,', 'start': 7507.289, 'duration': 7.364}, {'end': 7522.699, 'text': "we can pretty much hope that they're not able to type characters and you know, kind of self-excesses them.", 'start': 7514.653, 'duration': 8.046}, {'end': 7527.864, 'text': "so yeah, so it's, i guess, safe to do so if i do like eval of text.", 'start': 7522.699, 'duration': 5.165}], 'summary': 'Restricting user input to numbers and signs makes eval of text safe.', 'duration': 29.999, 'max_score': 7497.865, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec7497865.jpg'}], 'start': 6741.131, 'title': 'Building a calculator app', 'summary': 'Demonstrates adding support for plus, minus, multiplication, and division buttons in a basic calculator implementation, with a focus on ensuring non-blank input for valid operations. it also covers building a react native calculator app, including tokenizing the text, validating the input, and implementing the calculation logic using eval, with a focus on enhancing user input security.', 'chapters': [{'end': 6938.916, 'start': 6741.131, 'title': 'Adding calculator functionality', 'summary': 'Demonstrates adding support for plus, minus, multiplication, and division buttons in a basic calculator implementation, with a focus on ensuring non-blank input for valid operations.', 'duration': 197.785, 'highlights': ['The tutorial focuses on implementing support for plus, minus, multiplication, and division buttons in the calculator, with an emphasis on ensuring non-blank input for valid operations.', 'The speaker discusses the need for basic validation to ensure that the text is not blank when pressing the plus, minus, multiplication, or division buttons, aiming to prevent illogical input.', 'The chapter also addresses the issue of splitting on a blank element, which results in an array of zero length, and emphasizes the importance of adding validation to handle such cases.']}, {'end': 7560.599, 'start': 6939.517, 'title': 'React native calculator app', 'summary': 'Covers building a react native calculator app, including tokenizing the text, validating the input, and implementing the calculation logic using eval, with a focus on enhancing user input security.', 'duration': 621.082, 'highlights': ['The chapter covers building a React Native calculator app', 'implementing the calculation logic using eval', 'tokenizing the text and validating the input']}], 'duration': 819.468, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec6741131.jpg', 'highlights': ['The tutorial focuses on implementing support for plus, minus, multiplication, and division buttons in the calculator, with an emphasis on ensuring non-blank input for valid operations.', 'The chapter covers building a React Native calculator app', 'The speaker discusses the need for basic validation to ensure that the text is not blank when pressing the plus, minus, multiplication, or division buttons, aiming to prevent illogical input.', 'The chapter also addresses the issue of splitting on a blank element, which results in an array of zero length, and emphasizes the importance of adding validation to handle such cases.', 'Implementing the calculation logic using eval, with a focus on enhancing user input security.', 'Tokenizing the text and validating the input']}, {'end': 8287.798, 'segs': [{'end': 7713.81, 'src': 'embed', 'start': 7685.001, 'weight': 1, 'content': [{'end': 7686.602, 'text': 'so this is the problem.', 'start': 7685.001, 'duration': 1.601}, {'end': 7688.522, 'text': 'so obviously we do not.', 'start': 7686.602, 'duration': 1.92}, {'end': 7690.823, 'text': 'we cannot just leave everything on eval.', 'start': 7688.522, 'duration': 2.301}, {'end': 7699.186, 'text': 'so we need to do some sort of validation at our end as well, before actually executing this function.', 'start': 7690.823, 'duration': 8.363}, {'end': 7699.766, 'text': 'all right.', 'start': 7699.186, 'duration': 0.58}, {'end': 7705.747, 'text': "so let's just get into the validation of this text before we actually hit it.", 'start': 7699.766, 'duration': 5.981}, {'end': 7713.81, 'text': 'and if we see what we have right here, is that how we are calculating this.', 'start': 7705.747, 'duration': 8.063}], 'summary': 'Need to perform validation before executing function.', 'duration': 28.809, 'max_score': 7685.001, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec7685001.jpg'}, {'end': 7798.349, 'src': 'embed', 'start': 7764, 'weight': 0, 'content': [{'end': 7774.242, 'text': 'so now, as of now, what I can just imagine as a edge case is that we just leave an operator right there.', 'start': 7764, 'duration': 10.242}, {'end': 7788.753, 'text': 'so if we do like something like if text.slice is equal to like plus or actually like, we can just switch over it as well, if you want,', 'start': 7774.242, 'duration': 14.511}, {'end': 7793.686, 'text': 'can actually just create an array as well of these operators.', 'start': 7791.244, 'duration': 2.442}, {'end': 7795.187, 'text': 'there are so many ways to do it.', 'start': 7793.686, 'duration': 1.501}, {'end': 7798.349, 'text': 'single thing in javascript sometimes.', 'start': 7795.187, 'duration': 3.162}], 'summary': 'Discussing potential edge case scenarios and creating arrays of operators in javascript.', 'duration': 34.349, 'max_score': 7764, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec7764000.jpg'}, {'end': 7919.619, 'src': 'embed', 'start': 7893.965, 'weight': 3, 'content': [{'end': 7901.509, 'text': 'so right now i have the regular calculator opened up and right here is the calculator which we have right.', 'start': 7893.965, 'duration': 7.544}, {'end': 7903.35, 'text': 'so we have a couple of things to do.', 'start': 7901.509, 'duration': 1.841}, {'end': 7909.453, 'text': "first of all, in the ui we need to update the colors, so let's just do that really quickly.", 'start': 7903.35, 'duration': 6.103}, {'end': 7919.619, 'text': 'so right here, if we take a look where we are setting these colors and all is actually inside our style sheet right or basically the react styles.', 'start': 7909.453, 'duration': 10.166}], 'summary': 'Updating ui colors in the calculator app.', 'duration': 25.654, 'max_score': 7893.965, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec7893965.jpg'}, {'end': 8141.786, 'src': 'embed', 'start': 8101.819, 'weight': 2, 'content': [{'end': 8106.963, 'text': 'and uh, why the heck do we have another um warning here?', 'start': 8101.819, 'duration': 5.144}, {'end': 8110.886, 'text': 'each child in an array or iterator should be a unique key.', 'start': 8106.963, 'duration': 3.923}, {'end': 8116.53, 'text': "we are doing that, aren't we?", 'start': 8110.886, 'duration': 5.644}, {'end': 8117.23, 'text': 'or does react?', 'start': 8116.53, 'duration': 0.7}, {'end': 8123.054, 'text': 'expect us to do it here also?', 'start': 8117.23, 'duration': 5.824}, {'end': 8134.396, 'text': "so let's just see, there we are and i believe we should be fine now.", 'start': 8123.054, 'duration': 11.342}, {'end': 8139.543, 'text': 'yep, okay, so it looks like, kind of looks like a calculator.', 'start': 8134.396, 'duration': 5.147}, {'end': 8141.786, 'text': 'not bad, i believe.', 'start': 8139.543, 'duration': 2.243}], 'summary': 'Troubleshooting unique key warning in react, resolved successfully.', 'duration': 39.967, 'max_score': 8101.819, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec8101819.jpg'}, {'end': 8258.983, 'src': 'embed', 'start': 8232.495, 'weight': 6, 'content': [{'end': 8238.583, 'text': 'Well, obviously this calculator does not really require us to press equal to right?', 'start': 8232.495, 'duration': 6.088}, {'end': 8242.018, 'text': 'actually, pressing equal to makes it enlarge.', 'start': 8239.637, 'duration': 2.381}, {'end': 8249.44, 'text': "so that's a task I want to give to you guys now detect how you would create a functionality like this.", 'start': 8242.018, 'duration': 7.422}, {'end': 8258.983, 'text': 'so obviously you have to make use of state variable here instead of like doing calculations when you click on equal to right,', 'start': 8249.44, 'duration': 9.543}], 'summary': "The calculator does not require pressing equals, instead it enlarges; it's a task to create a similar functionality using state variables.", 'duration': 26.488, 'max_score': 8232.495, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec8232495.jpg'}], 'start': 7560.599, 'title': 'Javascript and react native ui updates', 'summary': 'Covers implementing input validation, mathematical expression evaluation, and ui updates in a react application, along with adjustments to the react native calculator ui for improved user experience.', 'chapters': [{'end': 7890.139, 'start': 7560.599, 'title': 'Javascript validation in react', 'summary': "Covers implementing input validation in a react application to prevent potential crashes, ensuring the functionality of evaluating mathematical expressions using 'eval' method, and handling edge cases such as leaving an operator at the end of the input.", 'duration': 329.54, 'highlights': ['Implementing input validation in a React application to prevent potential crashes', "Ensuring the functionality of evaluating mathematical expressions using 'eval' method", 'Handling edge cases such as leaving an operator at the end of the input']}, {'end': 8287.798, 'start': 7893.965, 'title': 'Updating react native calculator ui', 'summary': 'Discusses updating the react native calculator ui by modifying colors, positioning elements, and adding key properties, with a focus on adjusting text and button colors, and addressing ui positioning and functionality for an improved user experience.', 'duration': 393.833, 'highlights': ['The chapter discusses updating the colors and styles of the React Native calculator UI, focusing on modifying the yellow and green colors and adjusting the text and button colors for improved visual appeal and user experience.', "It emphasizes the importance of adding unique key properties to elements in React to avoid warnings and ensure proper rendering, highlighting the use of 'key' to track unique identifiers in the data.", 'The chapter addresses the issue of UI positioning in the calculator, detailing manual shifting of elements to align the layout correctly for a better user experience.', "It suggests creating a functionality for the calculator's equal to button to enlarge the result, utilizing state variables and regular state updates for dynamic text changes and font size adjustments, and encourages viewers to experiment with font styles for improved visual appeal."]}], 'duration': 727.199, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/frvXANSaSec/pics/frvXANSaSec7560599.jpg', 'highlights': ['Handling edge cases such as leaving an operator at the end of the input', "Ensuring the functionality of evaluating mathematical expressions using 'eval' method", 'Implementing input validation in a React application to prevent potential crashes', 'The chapter discusses updating the colors and styles of the React Native calculator UI, focusing on modifying the yellow and green colors and adjusting the text and button colors for improved visual appeal and user experience.', 'The chapter addresses the issue of UI positioning in the calculator, detailing manual shifting of elements to align the layout correctly for a better user experience.', "It emphasizes the importance of adding unique key properties to elements in React to avoid warnings and ensure proper rendering, highlighting the use of 'key' to track unique identifiers in the data.", "It suggests creating a functionality for the calculator's equal to button to enlarge the result, utilizing state variables and regular state updates for dynamic text changes and font size adjustments, and encourages viewers to experiment with font styles for improved visual appeal."]}], 'highlights': ['React Native enables cross-platform applications using JavaScript, offering fast performance for Android and iOS.', 'Emphasizing the importance of targeting Android 6 platform for optimized app development, with the mention of backward and forward compatibility.', "The process of setting up React Native for Android and iOS, running the app on real devices, and the subsequent demonstration of the 'Hello World' app, showcasing the power of React Native in running the same code on different operating systems.", 'React Native automatically updates component rendering when state changes, enabling fast toggling of colors based on state', 'The chapter covers creating a basic login layout with username, password, and a button, emphasizing the need for data synchronization in user interfaces.', 'Using stylesheet.create for creating styles in React Native is recommended as it provides optimization under the hood.', 'Implementing functionality to update the result text when buttons are pressed, resulting in a complete calculator interface with functional buttons.', 'The tutorial focuses on implementing support for plus, minus, multiplication, and division buttons in the calculator, with an emphasis on ensuring non-blank input for valid operations.', 'Handling edge cases such as leaving an operator at the end of the input']}