title
ReactJS Tutorial for Beginners - Getting Started with React

description
Learn React.js from scratch and use one of the most popular frontend libraries to build amazing web apps! Join the full React.js course: https://acad.link/reactjs Check out all our other courses: https://academind.com/learn/our-courses ---------- • Go to https://www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts • Follow @maxedapps and @academind_real on Twitter • Join our Facebook community on https://www.facebook.com/academindchannel/ See you in the videos! ---------- Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!

detail
{'title': 'ReactJS Tutorial for Beginners - Getting Started with React', 'heatmap': [{'end': 3085.02, 'start': 2993.542, 'weight': 0.838}, {'end': 3586.754, 'start': 3498.716, 'weight': 0.714}, {'end': 7084.077, 'start': 6911.572, 'weight': 0.944}, {'end': 7584.403, 'start': 7415.31, 'weight': 0.74}], 'summary': 'A comprehensive react course on udemy offers basics, core topics, and a discount. the tutorial introduces react, jsx syntax, app development benefits, modern javascript workflow, project analysis, component fundamentals, props, children, state management, event handling, and css styling.', 'chapters': [{'end': 625.981, 'segs': [{'end': 37.899, 'src': 'embed', 'start': 1.417, 'weight': 1, 'content': [{'end': 3.54, 'text': 'Welcome to this video, great to have you here.', 'start': 1.417, 'duration': 2.123}, {'end': 10.888, 'text': 'This video here is a collection of my extremely comprehensive React course I offer on Udemy.', 'start': 4.441, 'duration': 6.447}, {'end': 15.793, 'text': 'A link to the course of course can be found in the video description with a nice discount.', 'start': 11.188, 'duration': 4.605}, {'end': 25.776, 'text': 'this course on udemy is an extremely deep diving react course, starting at the basics and then moving through all the core topics like react, router,', 'start': 16.554, 'duration': 9.222}, {'end': 28.597, 'text': 'redux, animations, authentication and much more.', 'start': 25.776, 'duration': 2.821}, {'end': 37.899, 'text': 'in this video here i give you a very extensive sneak peek into the course, covering the entire first and second module of my react course.', 'start': 28.597, 'duration': 9.302}], 'summary': 'Extremely comprehensive react course on udemy covering basics, core topics like react, router, redux, animations, and authentication.', 'duration': 36.482, 'max_score': 1.417, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU1417.jpg'}, {'end': 87.83, 'src': 'embed', 'start': 56.427, 'weight': 4, 'content': [{'end': 57.588, 'text': "It's great to have you on board.", 'start': 56.427, 'duration': 1.161}, {'end': 62.711, 'text': "My name is Maximilian Schwarzmüller and I'm a freelance web developer and React developer.", 'start': 58.448, 'duration': 4.263}, {'end': 72.719, 'text': "I worked with React a lot and I can tell you it's an amazing library for creating highly reactive and super fast JavaScript driven web applications.", 'start': 63.332, 'duration': 9.387}, {'end': 79.924, 'text': "the javascript driven part is especially important because, since react is a javascript library, it's, of course,", 'start': 73.419, 'duration': 6.505}, {'end': 87.83, 'text': 'about writing your web apps in javascript, and that in turn is amazing because, since javascript runs in the browser,', 'start': 79.924, 'duration': 7.906}], 'summary': 'Maximilian schwarzmüller, freelance web developer, praises react for creating fast, reactive web applications using javascript.', 'duration': 31.403, 'max_score': 56.427, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU56427.jpg'}, {'end': 133.26, 'src': 'embed', 'start': 104.182, 'weight': 0, 'content': [{'end': 111.246, 'text': 'you will learn all of its core features throughout this course and way more than that, you will learn what react is about,', 'start': 104.182, 'duration': 7.064}, {'end': 113.568, 'text': 'how it works and why you might want to use it.', 'start': 111.246, 'duration': 2.322}, {'end': 121.173, 'text': 'you will learn how to build components with react, how to use redux for better state management, how to use the react router,', 'start': 113.568, 'duration': 7.605}, {'end': 124.735, 'text': "and you'll not just learn this in simple projects or theory.", 'start': 121.173, 'duration': 3.562}, {'end': 133.26, 'text': 'no, We will build an entire React application throughout this course, the Burger Builder, which is an amazing application,', 'start': 124.735, 'duration': 8.525}], 'summary': 'Learn core features of react, build burger builder app, use redux, react router.', 'duration': 29.078, 'max_score': 104.182, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU104182.jpg'}, {'end': 505.107, 'src': 'embed', 'start': 469.652, 'weight': 3, 'content': [{'end': 479.555, 'text': "And Udemy also uses a JavaScript framework to achieve this and to have an easier time developing and and that's important maintaining and updating this page.", 'start': 469.652, 'duration': 9.903}, {'end': 485.262, 'text': 'So this is why components are awesome and why we as a developer probably want to use components.', 'start': 480.015, 'duration': 5.247}, {'end': 488.566, 'text': 'And that is why React is all about components.', 'start': 485.682, 'duration': 2.884}, {'end': 505.107, 'text': "now that we know what react actually is it's time to get our hands dirty, and for that i visit codepen.io.", 'start': 496.38, 'duration': 8.727}], 'summary': 'Udemy uses javascript framework for easier development and maintenance. react is about components.', 'duration': 35.455, 'max_score': 469.652, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU469652.jpg'}], 'start': 1.417, 'title': 'React course and introduction', 'summary': 'Covers a comprehensive react course on udemy, including basics, core topics, and discount offer. it also introduces react, emphasizing its role, core features, and the creation of an entire react application, the burger builder.', 'chapters': [{'end': 56.006, 'start': 1.417, 'title': 'Comprehensive react course on udemy', 'summary': 'Presents a comprehensive react course offered on udemy covering basics, core topics like react, router, redux, animations, and authentication, with a sneak peek into the first and second modules and a discount offer in the video description.', 'duration': 54.589, 'highlights': ['The course covers basics and core topics like React, Router, Redux, animations, and authentication.', 'A sneak peek into the first and second modules of the React course is provided in the video.', 'A discount offer for the Udemy course is available in the video description.']}, {'end': 625.981, 'start': 56.427, 'title': 'Introduction to react', 'summary': 'Introduces react, emphasizing its role as a powerful javascript library for building user interfaces, its core features, and the creation of an entire react application, the burger builder, to provide a solid understanding of react concepts and applications.', 'duration': 569.554, 'highlights': ["React is a powerful JavaScript library for building user interfaces and creating highly reactive and super fast JavaScript-driven web applications, offering an advantage of instant user browser interaction. Maximilian Schwarzmüller, a freelance web developer, emphasizes React's capabilities in creating highly reactive and super fast JavaScript-driven web applications, running in the browser, and providing instant user interaction.", 'The course covers all core features of React, including building components, using Redux for better state management, and employing the React Router, culminating in the development of an entire React application, the Burger Builder. The course encompasses all core features of React, such as building components, utilizing Redux for improved state management, and employing the React Router, culminating in the development of the Burger Builder application to solidify understanding.', "React's focus on components enables the creation of reusable, maintainable, and manageable pieces of code, offering the advantage of easy code reusability and facilitating teamwork in web development projects. React's emphasis on components allows the creation of reusable, maintainable, and manageable pieces of code, promoting code reusability and simplifying teamwork in web development projects.", 'The use of components in popular websites like reactjs.org and Udemy demonstrates the effectiveness of React in creating reusable building blocks, streamlining development, and maintenance efforts. Maximilian Schwarzmüller showcases the use of components in popular websites like reactjs.org and Udemy, illustrating the effectiveness of React in creating reusable building blocks and streamlining development and maintenance efforts.', 'The chapter introduces React through hands-on demonstrations in a web editor, showcasing the process of writing a simple application with normal HTML, JavaScript, and adding React for easier application creation. The chapter provides hands-on demonstrations in a web editor, illustrating the process of writing a simple application with normal HTML, JavaScript, and incorporating React for enhanced application development.']}], 'duration': 624.564, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU1417.jpg', 'highlights': ['The course covers basics and core topics like React, Router, Redux, animations, and authentication.', 'A discount offer for the Udemy course is available in the video description.', 'The course encompasses all core features of React, such as building components, utilizing Redux for improved state management, and employing the React Router, culminating in the development of the Burger Builder application to solidify understanding.', "React's emphasis on components allows the creation of reusable, maintainable, and manageable pieces of code, promoting code reusability and simplifying teamwork in web development projects.", 'Maximilian Schwarzmüller showcases the use of components in popular websites like reactjs.org and Udemy, illustrating the effectiveness of React in creating reusable building blocks and streamlining development and maintenance efforts.']}, {'end': 1193.729, 'segs': [{'end': 739.069, 'src': 'embed', 'start': 703.898, 'weight': 0, 'content': [{'end': 707.96, 'text': 'But still, we can already use React to create reusable components here.', 'start': 703.898, 'duration': 4.062}, {'end': 710.16, 'text': "For that, let's add React.", 'start': 708.66, 'duration': 1.5}, {'end': 713.122, 'text': "I'm going to shrink this CSS part a tiny bit.", 'start': 710.401, 'duration': 2.721}, {'end': 717.764, 'text': 'And in the JavaScript area, I first of all have to import React.', 'start': 713.582, 'duration': 4.182}, {'end': 726.294, 'text': 'You can click on that gear icon next to JavaScript, and then you can download or import some external JavaScript libraries.', 'start': 718.424, 'duration': 7.87}, {'end': 729.258, 'text': 'And React is such an external library.', 'start': 726.855, 'duration': 2.403}, {'end': 739.069, 'text': "Actually, it's so popular that on CodePen, you can go to the quick ads dropdown and simply scroll to React and this will add it.", 'start': 730.059, 'duration': 9.01}], 'summary': 'Using react for reusable components, import react in javascript and add it to codepen for easy access.', 'duration': 35.171, 'max_score': 703.898, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU703898.jpg'}, {'end': 822.213, 'src': 'embed', 'start': 782.353, 'weight': 3, 'content': [{'end': 784.834, 'text': "With these two packages added, we're almost there.", 'start': 782.353, 'duration': 2.481}, {'end': 790.917, 'text': 'But React uses a special JavaScript syntax and a lot of next generation JavaScript features.', 'start': 785.174, 'duration': 5.743}, {'end': 793.438, 'text': "I'll come back to this later in the course.", 'start': 791.397, 'duration': 2.041}, {'end': 798.821, 'text': "I'll have a whole module where I introduce you to the most important next gen features React uses.", 'start': 793.718, 'duration': 5.103}, {'end': 808.982, 'text': 'So to unlock the usage of these features and the special syntax in the JavaScript preprocessor dropdown, you have to choose Babel.', 'start': 799.935, 'duration': 9.047}, {'end': 813.426, 'text': 'That simply is a tool which compiles the next generation JavaScript code.', 'start': 809.402, 'duration': 4.024}, {'end': 822.213, 'text': "you're writing here to code that runs fine in the browser, so that we write code with all features we want, but chip code that works in the browser.", 'start': 813.426, 'duration': 8.787}], 'summary': 'React uses next gen javascript features, babel compiles it for browser usage.', 'duration': 39.86, 'max_score': 782.353, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU782353.jpg'}, {'end': 924.988, 'src': 'embed', 'start': 898.693, 'weight': 1, 'content': [{'end': 907.158, 'text': "Babel, if configured correctly, which it automatically is here, allows us to use this special syntax, which looks like HTML, but which isn't.", 'start': 898.693, 'duration': 8.465}, {'end': 911.38, 'text': 'And I will dive deeper into that syntax in the next course modules.', 'start': 907.578, 'duration': 3.802}, {'end': 915.262, 'text': "It's called JSX and it's just syntactical sugar.", 'start': 911.84, 'duration': 3.422}, {'end': 919.685, 'text': 'Behind the scenes, this gets compiled to normal JavaScript code.', 'start': 915.682, 'duration': 4.003}, {'end': 924.988, 'text': 'We can use it here, though, to have an easier time writing what we actually want to render.', 'start': 920.245, 'duration': 4.743}], 'summary': 'Babel allows using jsx, a syntax like html, compiled to javascript.', 'duration': 26.295, 'max_score': 898.693, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU898693.jpg'}, {'end': 992.511, 'src': 'embed', 'start': 970.237, 'weight': 5, 'content': [{'end': 978.304, 'text': 'This actually exposes an object, React DOM, written like that, with DOM all being capital characters, which has a render method.', 'start': 970.237, 'duration': 8.067}, {'end': 990.55, 'text': 'This method allows us to render a JavaScript function as a component to the real DOM, and that, treated as a component part,', 'start': 979.105, 'duration': 11.445}, {'end': 992.511, 'text': 'is exactly what React takes care about.', 'start': 990.55, 'duration': 1.961}], 'summary': 'React dom exposes an object with a render method for rendering javascript functions as components to the real dom.', 'duration': 22.274, 'max_score': 970.237, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU970237.jpg'}, {'end': 1172.054, 'src': 'embed', 'start': 1145.977, 'weight': 2, 'content': [{'end': 1155.742, 'text': "and prop simply contains all the attributes i add to my own component, so i could add name, max and age let's say 28, like this.", 'start': 1145.977, 'duration': 9.765}, {'end': 1162.205, 'text': 'If I do this now, we can output this in our person component.', 'start': 1158.041, 'duration': 4.164}, {'end': 1167.33, 'text': 'We just need to dynamically access this props element, this props argument.', 'start': 1162.966, 'duration': 4.364}, {'end': 1172.054, 'text': 'We output dynamic content in React with curly braces, opening and closing.', 'start': 1168.131, 'duration': 3.923}], 'summary': 'Using props to dynamically access and output content in react components.', 'duration': 26.077, 'max_score': 1145.977, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU1145977.jpg'}], 'start': 625.981, 'title': 'React components and jsx syntax', 'summary': 'Introduces react components, demonstrates jsx syntax for rendering custom components, and explains dynamic configuration through props, showcasing the transformation of jsx to javascript code for rendering components on the screen.', 'chapters': [{'end': 874.011, 'start': 625.981, 'title': 'Introduction to react components', 'summary': 'Introduces the concept of react components, highlighting the creation of reusable components using react and jsx, along with the addition of necessary packages such as react and react dom to the codepen environment.', 'duration': 248.03, 'highlights': ['The chapter introduces the concept of React components and the creation of reusable components using React and JSX. The discussion focuses on creating a reusable custom HTML element using React components, which are essentially functions that return the code to be rendered to the DOM, utilizing special syntax called JSX.', 'The addition of necessary packages such as React and React DOM to the CodePen environment is explained. The speaker demonstrates the process of importing external JavaScript libraries like React and React DOM into the CodePen environment, where React is added from the quick ads dropdown and version 15.6.1 is used for the demo.', 'The use of Babel as a tool to compile next generation JavaScript code is mentioned. The chapter mentions the importance of choosing Babel in the JavaScript preprocessor dropdown to unlock the usage of next generation JavaScript features and special syntax used by React, ensuring that the code written in CodePen runs fine in the browser.']}, {'end': 1193.729, 'start': 874.031, 'title': 'React component and jsx syntax', 'summary': 'Explains the use of jsx syntax in react, demonstrating how it allows for easier rendering of custom components, leveraging dynamic configuration through props, and highlighting the transformation of jsx to javascript code, ultimately leading to the rendering of components on the screen.', 'duration': 319.698, 'highlights': ['JSX syntax allows for easier rendering of custom components by transforming the code to normal JavaScript, enhancing the development process. JSX syntax, although resembling HTML, gets compiled to normal JavaScript code, allowing for easier rendering of custom components.', 'Props in React enable dynamic configuration of components, allowing for the passing of attributes and properties to customize the rendered output. Props in React enable dynamic configuration of components, allowing for the passing of attributes and properties to customize the rendered output, such as name and age.', 'The transformation of JSX to JavaScript code is exemplified, showcasing how React takes care of rendering functions as components to the real DOM. The transformation of JSX to JavaScript code is exemplified, showcasing how React takes care of rendering functions as components to the real DOM, using the render method of React DOM.']}], 'duration': 567.748, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU625981.jpg', 'highlights': ['The chapter introduces the concept of React components and the creation of reusable components using React and JSX.', 'JSX syntax allows for easier rendering of custom components by transforming the code to normal JavaScript, enhancing the development process.', 'Props in React enable dynamic configuration of components, allowing for the passing of attributes and properties to customize the rendered output.', 'The addition of necessary packages such as React and React DOM to the CodePen environment is explained.', 'The use of Babel as a tool to compile next generation JavaScript code is mentioned.', 'The transformation of JSX to JavaScript code is exemplified, showcasing how React takes care of rendering functions as components to the real DOM.']}, {'end': 2443.68, 'segs': [{'end': 1261.965, 'src': 'embed', 'start': 1215.227, 'weight': 0, 'content': [{'end': 1222.676, 'text': "They use the same function, which is turned into a component by React, but we're really taking advantage of the component concept,", 'start': 1215.227, 'duration': 7.449}, {'end': 1229.4, 'text': 'because we only wrote the HTML code once and now we can reuse it over and over again.', 'start': 1223.257, 'duration': 6.143}, {'end': 1231.781, 'text': 'And I bet you can see the potential of this.', 'start': 1229.42, 'duration': 2.361}, {'end': 1236.924, 'text': 'In very big applications, you can compose the entire application of reusable pieces.', 'start': 1232.362, 'duration': 4.562}, {'end': 1240.606, 'text': "And this component isn't even using any logic.", 'start': 1237.524, 'duration': 3.082}, {'end': 1243.587, 'text': "It doesn't listen to clicks or stuff like that.", 'start': 1240.986, 'duration': 2.601}, {'end': 1248.029, 'text': 'In apps such as the app we built in this course, we will of course do that.', 'start': 1243.947, 'duration': 4.082}, {'end': 1250.891, 'text': 'We will append our own logic to our components.', 'start': 1248.33, 'duration': 2.561}, {'end': 1259.201, 'text': 'And then we have small, reusable, maintainable and easy to manage pieces with their own logic contained in them,', 'start': 1251.351, 'duration': 7.85}, {'end': 1261.965, 'text': 'which we can use anywhere to build amazing applications.', 'start': 1259.201, 'duration': 2.764}], 'summary': 'Using react components allows for reusable, maintainable, and logic-contained pieces in applications.', 'duration': 46.738, 'max_score': 1215.227, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU1215227.jpg'}, {'end': 1516.645, 'src': 'embed', 'start': 1470.868, 'weight': 5, 'content': [{'end': 1474.333, 'text': "If you write this with normal JavaScript code, it's going to be a nightmare.", 'start': 1470.868, 'duration': 3.465}, {'end': 1480.38, 'text': 'So React helps us by making this whole UI state management a non-issue.', 'start': 1474.833, 'duration': 5.547}, {'end': 1485.864, 'text': 'It allows us to focus on our business logic instead of keeping our application from exploding.', 'start': 1481.121, 'duration': 4.743}, {'end': 1490.547, 'text': 'And additionally, React is maintained by a big community.', 'start': 1486.325, 'duration': 4.222}, {'end': 1495.971, 'text': 'So chances are the React code is written better than we could have ever written it.', 'start': 1491.108, 'duration': 4.863}, {'end': 1498.773, 'text': "So therefore it's highly efficient and fast.", 'start': 1496.431, 'duration': 2.342}, {'end': 1502.575, 'text': 'And the bigger your application gets, the more this matters too.', 'start': 1499.273, 'duration': 3.302}, {'end': 1511.302, 'text': "And finally, React features a huge ecosystem and an extremely active community, which means that there's a great chance that,", 'start': 1503.516, 'duration': 7.786}, {'end': 1516.645, 'text': "for a given problem you face, you'll find a solution or an extra package you can add to fix it.", 'start': 1511.302, 'duration': 5.343}], 'summary': 'React simplifies ui state management, with efficient code and a large community support, leading to faster and scalable applications.', 'duration': 45.777, 'max_score': 1470.868, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU1470868.jpg'}, {'end': 1677.249, 'src': 'embed', 'start': 1652.133, 'weight': 7, 'content': [{'end': 1660.684, 'text': 'On the other hand, in a multi-page application we get back multiple HTML pages where each page has the content for a given route,', 'start': 1652.133, 'duration': 8.551}, {'end': 1662.666, 'text': 'a given URL we visited.', 'start': 1660.684, 'duration': 1.982}, {'end': 1668.654, 'text': 'For example.com and example.com slash users, we get back two different pages.', 'start': 1663.007, 'duration': 5.647}, {'end': 1669.394, 'text': "That's important.", 'start': 1668.694, 'duration': 0.7}, {'end': 1677.249, 'text': 'Now, on multi-page applications, we might also use React, but only to create little widgets, so to say.', 'start': 1670.447, 'duration': 6.802}], 'summary': 'In multi-page applications, each route on example.com yields a different page, with react used for creating widgets.', 'duration': 25.116, 'max_score': 1652.133, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU1652133.jpg'}, {'end': 1793.288, 'src': 'embed', 'start': 1770.17, 'weight': 4, 'content': [{'end': 1777.952, 'text': 'Now, we only need one because we have one root app component there, which is mounted to the DOM, which hosts all other React components.', 'start': 1770.17, 'duration': 7.782}, {'end': 1786.561, 'text': 'in the multi-page application we would typically call react on render more often to render our different components in different places of the app.', 'start': 1778.752, 'duration': 7.809}, {'end': 1793.288, 'text': 'you saw that react on render allows you to pick a place in your html code where you want to render your app,', 'start': 1786.561, 'duration': 6.727}], 'summary': 'In a single-page app, only one root app component is needed, mounted to the dom, hosting all react components.', 'duration': 23.118, 'max_score': 1770.17, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU1770170.jpg'}, {'end': 1911.589, 'src': 'embed', 'start': 1888.863, 'weight': 8, 'content': [{'end': 1897.656, 'text': "Otherwise, you got a nice module where I'll ensure that we're all on the same page and that you got solid fundamentals about all these features we're about to use.", 'start': 1888.863, 'duration': 8.793}, {'end': 1903.706, 'text': 'And you can always go back to that module if you later in the course encounter something that looks strange or new to you.', 'start': 1897.817, 'duration': 5.889}, {'end': 1911.589, 'text': 'After this optional module, the real second module is the module where we dive into the React basics.', 'start': 1904.907, 'duration': 6.682}], 'summary': 'An optional module ensures solid fundamentals for all course participants before diving into react basics.', 'duration': 22.726, 'max_score': 1888.863, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU1888863.jpg'}, {'end': 2244.248, 'src': 'embed', 'start': 2217.521, 'weight': 9, 'content': [{'end': 2224.568, 'text': 'But I want to introduce you to how you test React applications, which tools you use and how to think about testing React apps.', 'start': 2217.521, 'duration': 7.047}, {'end': 2231.939, 'text': "After testing, we'll of course also learn how to deploy a React application, so how to really ship it to a real server.", 'start': 2225.555, 'duration': 6.384}, {'end': 2235.522, 'text': 'And thereafter, I got loads of bonus content.', 'start': 2232.7, 'duration': 2.822}, {'end': 2239.985, 'text': 'For example, a whole module about animating React applications.', 'start': 2235.982, 'duration': 4.003}, {'end': 2244.248, 'text': 'Possible next steps where you could dive into after finishing this module.', 'start': 2240.425, 'duration': 3.823}], 'summary': 'Learn about testing and deploying react apps, with bonus content on animation and next steps.', 'duration': 26.727, 'max_score': 2217.521, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU2217521.jpg'}, {'end': 2427.005, 'src': 'embed', 'start': 2404.349, 'weight': 10, 'content': [{'end': 2412.875, 'text': 'Additionally, and that is super important, we want to use these next generation JavaScript features I taught you about in the last optional module.', 'start': 2404.349, 'duration': 8.526}, {'end': 2417.999, 'text': 'Now we want to use that because it makes our life as a developer much easier.', 'start': 2413.556, 'duration': 4.443}, {'end': 2427.005, 'text': "And it's the de facto standard for React apps to use all these next gen features, because the code is leaner, easier to read, faster,", 'start': 2418.579, 'duration': 8.426}], 'summary': 'Using next-gen javascript features for react apps improves developer efficiency and code performance.', 'duration': 22.656, 'max_score': 2404.349, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU2404349.jpg'}], 'start': 1194.51, 'title': 'React app development and benefits', 'summary': 'Covers react dom rendering, component reusability, app creation, benefits, reasons to choose react, efficient ui state management, community support, single vs multi-page applications, and modules covered in a react course. it also discusses testing, deploying react apps, code optimization, and using next generation javascript features for improved performance and best practices.', 'chapters': [{'end': 1261.965, 'start': 1194.51, 'title': 'React dom render and component reusability', 'summary': 'Discusses the concept of reusing components in react by demonstrating how multiple components can use the same base, which allows for the creation of reusable and maintainable pieces for building large applications.', 'duration': 67.455, 'highlights': ['By using the same base function turned into a component, we can pass different props to different components, enabling reusability and efficiency.', 'In large applications, the ability to compose the entire application with reusable pieces offers significant potential for creating maintainable and easy to manage pieces.', 'Components in React can be composed of small, reusable pieces with their own contained logic, providing the opportunity to build amazing applications.', 'In apps like the one built in the course, logic can be appended to components, resulting in small, reusable, maintainable, and easy to manage pieces.']}, {'end': 1470.268, 'start': 1262.485, 'title': 'React app creation and benefits', 'summary': 'Explains the process of creating a react app with a single root element, emphasizing the benefits of using react, particularly in managing ui state and dynamically adding/removing elements, thereby simplifying dom traversal and element targeting in javascript applications.', 'duration': 207.783, 'highlights': ['The chapter explains the process of creating React apps with a single root element, emphasizing the benefits of using React to manage UI state and dynamically add/remove elements, simplifying DOM traversal and element targeting in JavaScript applications.', 'Using React helps with managing UI state in bigger JavaScript applications, reducing the need to manually target elements in the DOM and simplifying the process of dynamically adding and removing elements, as demonstrated in the course project of building a highly dynamic app for creating burgers.', 'Highlighting the challenges faced in traditional JavaScript applications, such as difficulties in managing UI state and the need for manual targeting of elements in the DOM, with the potential need for adjustments if the structure of the HTML code changes.', 'Explaining the limitations of traversing the DOM and the potential complexity of dynamically adding and removing elements in more complex web applications, emphasizing the benefits of using React to simplify these processes and reduce the associated challenges.']}, {'end': 2216.941, 'start': 1470.868, 'title': 'Why choose react for your next project', 'summary': 'Highlights the benefits of using react for web development, emphasizing its efficient ui state management, maintained by a big community, highly efficient and fast, and its huge ecosystem with an extremely active community. additionally, it explains the difference between single page and multi-page applications and dives into the modules covered in a react course, including react basics, debugging, styling, components, http requests, routing, forms and validation, redux, authentication, and testing.', 'duration': 746.073, 'highlights': ['React facilitates efficient UI state management, maintained by a big community, highly efficient and fast, and has a huge ecosystem with an extremely active community. React helps in efficient UI state management, maintained by a big community, and is highly efficient and fast, which becomes more significant as the application grows. The huge ecosystem and an extremely active community ensure finding solutions or extra packages for various problems.', 'Explains the difference between single page and multi-page applications, emphasizing the advantages of single-page applications in providing an amazing user experience and the popular approach for creating web apps. The single-page application approach is favored as it ensures an amazing user experience by managing the entire page with JavaScript, avoiding the need to go back to the server and reload the page. It also explains the approach to multi-page applications, where React may be used to create individual widgets.', 'Dives into the modules covered in a React course, including React basics, debugging, styling, components, HTTP requests, routing, forms and validation, Redux, authentication, and testing. The course covers a range of modules including React basics, debugging, styling, components, HTTP requests, routing, forms and validation, Redux, authentication, and testing, providing a comprehensive understanding of React development.']}, {'end': 2443.68, 'start': 2217.521, 'title': 'Testing and deploying react apps', 'summary': 'Covers testing and deploying react apps, including tools and strategies, as well as the importance of optimizing code and using next generation javascript features for improved performance and best practices.', 'duration': 226.159, 'highlights': ["We'll learn how to test and deploy React applications, including tools and strategies for testing, deployment to a real server, and bonus content on animating React applications.", 'A module about Next.js, a library building up on React and making server-side rendered applications easier, is included as a possible next step after finishing the module.', 'The importance of optimizing code for performance is emphasized, with a recommendation to use next generation JavaScript features for leaner, faster, and less error-prone code.', 'Setting up a local React project is discussed, highlighting the need for a more elaborate workflow for real projects and the benefits of using an IDE or editor on the local machine.', 'The benefits of using next generation JavaScript features for React apps are outlined, including improved developer experience, leaner code, easier readability, and reduced errors.']}], 'duration': 1249.17, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU1194510.jpg', 'highlights': ['Components in React can be composed of small, reusable pieces with their own contained logic, providing the opportunity to build amazing applications.', 'By using the same base function turned into a component, we can pass different props to different components, enabling reusability and efficiency.', 'In large applications, the ability to compose the entire application with reusable pieces offers significant potential for creating maintainable and easy to manage pieces.', 'In apps like the one built in the course, logic can be appended to components, resulting in small, reusable, maintainable, and easy to manage pieces.', 'The chapter explains the process of creating React apps with a single root element, emphasizing the benefits of using React to manage UI state and dynamically add/remove elements, simplifying DOM traversal and element targeting in JavaScript applications.', 'Using React helps with managing UI state in bigger JavaScript applications, reducing the need to manually target elements in the DOM and simplifying the process of dynamically adding and removing elements, as demonstrated in the course project of building a highly dynamic app for creating burgers.', 'React facilitates efficient UI state management, maintained by a big community, highly efficient and fast, and has a huge ecosystem with an extremely active community.', 'Explains the difference between single page and multi-page applications, emphasizing the advantages of single-page applications in providing an amazing user experience and the popular approach for creating web apps.', 'Dives into the modules covered in a React course, including React basics, debugging, styling, components, HTTP requests, routing, forms and validation, Redux, authentication, and testing.', "We'll learn how to test and deploy React applications, including tools and strategies for testing, deployment to a real server, and bonus content on animating React applications.", 'The importance of optimizing code for performance is emphasized, with a recommendation to use next generation JavaScript features for leaner, faster, and less error-prone code.', 'The benefits of using next generation JavaScript features for React apps are outlined, including improved developer experience, leaner code, easier readability, and reduced errors.']}, {'end': 3172.349, 'segs': [{'end': 2520.545, 'src': 'embed', 'start': 2490.598, 'weight': 0, 'content': [{'end': 2494.48, 'text': 'That is why we need a build workflow that actually compiles these features.', 'start': 2490.598, 'duration': 3.882}, {'end': 2497.858, 'text': 'Finally, in the end, we want to be more productive.', 'start': 2495.697, 'duration': 2.161}, {'end': 2504.099, 'text': 'This includes next-generation JavaScript features, which often allow us to write more condensed code,', 'start': 2498.118, 'duration': 5.981}, {'end': 2507.48, 'text': 'but it also includes things like CSS auto-prefixing.', 'start': 2504.099, 'duration': 3.381}, {'end': 2515.342, 'text': 'You might know that CSS prefixes are a thing to achieve the broadest possible browser support for CSS features.', 'start': 2507.84, 'duration': 7.502}, {'end': 2520.545, 'text': 'Now manually adding these prefixes is quite annoying, so automatically adding them is nice.', 'start': 2515.982, 'duration': 4.563}], 'summary': 'Implementing a build workflow for more productivity, including next-gen javascript features and css auto-prefixing.', 'duration': 29.947, 'max_score': 2490.598, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU2490598.jpg'}, {'end': 2629.88, 'src': 'embed', 'start': 2601.935, 'weight': 2, 'content': [{'end': 2607.779, 'text': 'yarn would be another tool you could use, but we will use npm nodes package manager,', 'start': 2601.935, 'duration': 5.844}, {'end': 2617.987, 'text': 'a tool which just allows us to manage packages and which is the de facto standard for managing dependencies, also on front-end projects.', 'start': 2607.779, 'duration': 10.208}, {'end': 2621.689, 'text': 'besides that dependency management tool, we need a bundler,', 'start': 2617.987, 'duration': 3.702}, {'end': 2629.88, 'text': 'because we want to write modular code and split it up over multiple files so that each file has a clear task,', 'start': 2621.689, 'duration': 8.191}], 'summary': 'Using npm as the de facto standard for managing dependencies in front-end projects, with a requirement for a bundler to write modular code and split it over multiple files.', 'duration': 27.945, 'max_score': 2601.935, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU2601935.jpg'}, {'end': 2705.888, 'src': 'embed', 'start': 2678.309, 'weight': 3, 'content': [{'end': 2682.553, 'text': 'We need a compiler that does this JavaScript compilation,', 'start': 2678.309, 'duration': 4.244}, {'end': 2689.199, 'text': 'which means translation from modern features to workarounds that also work on older browsers.', 'start': 2682.553, 'duration': 6.646}, {'end': 2692.402, 'text': 'And we will use Babel plus presets,', 'start': 2689.359, 'duration': 3.043}, {'end': 2699.268, 'text': 'which can be hooked into the Webpack configuration so that they are part of this bundling and optimization process.', 'start': 2692.402, 'duration': 6.866}, {'end': 2705.888, 'text': 'And finally, in the end, we want to use a development server to test our app locally on our machine.', 'start': 2700.083, 'duration': 5.805}], 'summary': 'Develop a javascript compiler using babel and webpack for optimization and testing with a local server.', 'duration': 27.579, 'max_score': 2678.309, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU2678309.jpg'}, {'end': 2765.51, 'src': 'embed', 'start': 2742.713, 'weight': 4, 'content': [{'end': 2750.878, 'text': 'I will present you a tool that will create a project supporting all these things out of the box with zero configuration.', 'start': 2742.713, 'duration': 8.165}, {'end': 2755.561, 'text': 'in the next lectures we will install this tool together,', 'start': 2751.718, 'duration': 3.843}, {'end': 2763.028, 'text': 'and it is a tool created by the react team and community and the officially recommended way of creating new react apps.', 'start': 2755.561, 'duration': 7.467}, {'end': 2765.51, 'text': "because that's the general theme of this course.", 'start': 2763.028, 'duration': 2.482}], 'summary': 'Tool creates projects with zero config, recommended by react team.', 'duration': 22.797, 'max_score': 2742.713, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU2742713.jpg'}, {'end': 2847.106, 'src': 'embed', 'start': 2820.437, 'weight': 5, 'content': [{'end': 2827.202, 'text': "It's called Create React App, and you can simply Google for it to find a link to its official GitHub repository.", 'start': 2820.437, 'duration': 6.765}, {'end': 2833.063, 'text': "As I said, it's maintained by basically Facebook or a community around Facebook.", 'start': 2827.882, 'duration': 5.181}, {'end': 2838.044, 'text': "So it's the officially recommended tool for creating React projects.", 'start': 2833.543, 'duration': 4.501}, {'end': 2847.106, 'text': 'On that GitHub page, you will find installation instructions and a detailed explanation about what it does and how it works.', 'start': 2839.084, 'duration': 8.022}], 'summary': 'Create react app is the officially recommended tool for react projects, maintained by facebook, with detailed installation instructions on its github repository.', 'duration': 26.669, 'max_score': 2820.437, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU2820437.jpg'}, {'end': 3085.02, 'src': 'heatmap', 'start': 2993.542, 'weight': 0.838, 'content': [{'end': 2999.904, 'text': "The command can also be found on this GitHub page I showed you earlier here, but we'll of course run it together.", 'start': 2993.542, 'duration': 6.362}, {'end': 3007.126, 'text': 'You simply run create React app, so the package name in the end, and then the name of the app.', 'start': 3000.564, 'duration': 6.562}, {'end': 3014.087, 'text': 'This will be the name of the folder which gets created where the default configuration and a lot of starting files will be placed in.', 'start': 3007.426, 'duration': 6.661}, {'end': 3019.749, 'text': 'I will name it React Complete Guide, but you can name it whatever you want.', 'start': 3014.928, 'duration': 4.821}, {'end': 3027.596, 'text': 'hit enter and this will automatically create the folder and install all the dependencies it needs.', 'start': 3020.709, 'duration': 6.887}, {'end': 3035.163, 'text': 'as you can see here already, that is react itself, react dom to access the dom and react scripts,', 'start': 3027.596, 'duration': 7.567}, {'end': 3041.59, 'text': 'which is a package bundling all these different tools i was referring to on the slide in the last lecture.', 'start': 3035.163, 'duration': 6.427}, {'end': 3050.704, 'text': 'once this setup finished, you can navigate into this newly created folder with cd and then the name of the project you chose.', 'start': 3042.899, 'duration': 7.805}, {'end': 3056.227, 'text': 'in my case, react, complete guide and in there simply run npm start.', 'start': 3050.704, 'duration': 5.523}, {'end': 3063.592, 'text': "now for me it's showing yarn start and all these yarn commands, because i have yarn installed an alternative to npm.", 'start': 3056.227, 'duration': 7.365}, {'end': 3064.492, 'text': "but you don't need that.", 'start': 3063.592, 'duration': 0.9}, {'end': 3072.256, 'text': 'you can just run npm start and this will now spin up a development server and and open a new page.', 'start': 3064.492, 'duration': 7.764}, {'end': 3075.357, 'text': 'already this page here.', 'start': 3072.256, 'duration': 3.101}, {'end': 3078.338, 'text': 'this is the starting page this project gives you.', 'start': 3075.357, 'duration': 2.981}, {'end': 3079.839, 'text': 'it is basically a starting point.', 'start': 3078.338, 'duration': 1.501}, {'end': 3085.02, 'text': 'we will start editing it later on and you should always keep this process.', 'start': 3079.839, 'duration': 5.181}], 'summary': 'Using create react app, folder gets created with default config and dependencies. run npm start to spin up development server.', 'duration': 91.478, 'max_score': 2993.542, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU2993542.jpg'}], 'start': 2444.461, 'title': 'Modern javascript build workflow and setting up local development server', 'summary': 'Discusses the need for a build workflow to support next-generation javascript features with emphasis on tools like webpack and babel, and also explains the importance of setting up a local development server for testing react apps using create react app and npm with practical demonstrations.', 'chapters': [{'end': 2699.268, 'start': 2444.461, 'title': 'Modern javascript build workflow', 'summary': 'Discusses the need for a build workflow to support next-generation javascript features, emphasizing the use of a dependency management tool, a bundler like webpack, and a compiler like babel to optimize code for broader browser support and improve productivity.', 'duration': 254.807, 'highlights': ['The need for a build workflow to support next-generation JavaScript features and ship code that runs on as many browsers as possible. Emphasizes the need for a build workflow to compile next-gen features for broader browser support and productivity improvement.', 'The importance of using modern JavaScript features to write condensed code and the benefits of automatic CSS prefixing and linting for productivity. Highlights the advantages of using modern JavaScript features, automatic CSS prefixing, and linting to enhance productivity.', 'The necessity of a dependency management tool like npm and a bundler like Webpack to manage third-party libraries and bundle code for shipping. Stresses the need for a dependency management tool and a bundler to manage libraries and bundle code for shipping.', 'The significance of using Babel as a compiler to translate modern JavaScript features for older browser compatibility and its integration with Webpack. Underlines the importance of using Babel as a compiler and its integration with Webpack for older browser compatibility.']}, {'end': 3172.349, 'start': 2700.083, 'title': 'Setting up local development server', 'summary': 'Explains the importance of setting up a local development server for testing react apps, introducing the create react app tool for easy project setup, and guiding through the installation process using npm and commands with practical demonstrations.', 'duration': 472.266, 'highlights': ['The importance of setting up a local development server for testing React apps is emphasized, and the Create React App tool is introduced for easy project setup with zero configuration. The chapter stresses the significance of having a local development server for testing React apps and introduces Create React App as a tool that can create projects with all the necessary features out of the box with zero configuration.', 'Guidance on installing Create React App using NPM is provided, with specific instructions and practical demonstrations for both Windows and Mac/Linux systems. The chapter provides clear instructions and practical demonstrations for installing Create React App using NPM, including specific guidance for Windows and Mac/Linux systems.', 'The process of creating a new React project using Create React App is demonstrated, including the command to create the project, installation of dependencies, and starting the development server. The chapter demonstrates the process of creating a new React project using Create React App, including the command to create the project, installation of dependencies, and starting the development server.']}], 'duration': 727.888, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU2444461.jpg', 'highlights': ['The need for a build workflow to support next-generation JavaScript features and ship code for broader browser support and productivity improvement.', 'The importance of using modern JavaScript features, automatic CSS prefixing, and linting to enhance productivity.', 'The necessity of a dependency management tool like npm and a bundler like Webpack to manage libraries and bundle code for shipping.', 'The significance of using Babel as a compiler and its integration with Webpack for older browser compatibility.', 'The importance of setting up a local development server for testing React apps and introducing Create React App for easy project setup with zero configuration.', 'Guidance on installing Create React App using NPM with specific instructions and practical demonstrations for both Windows and Mac/Linux systems.', 'The process of creating a new React project using Create React App, including the command to create the project, installation of dependencies, and starting the development server.']}, {'end': 4226.702, 'segs': [{'end': 3236.674, 'src': 'embed', 'start': 3193.16, 'weight': 0, 'content': [{'end': 3196.063, 'text': "They're just locking in the versions of the dependencies we're using.", 'start': 3193.16, 'duration': 2.903}, {'end': 3201.407, 'text': 'The general dependencies our project has are defined in the package.json file.', 'start': 3196.523, 'duration': 4.884}, {'end': 3208.694, 'text': 'and there you can see we have three dependencies in this project and this was all created by create react app.', 'start': 3202.068, 'duration': 6.626}, {'end': 3211.617, 'text': 'as you can see, we obviously import react.', 'start': 3208.694, 'duration': 2.923}, {'end': 3214.78, 'text': "here i'm using a release candidate version of react 16.", 'start': 3211.617, 'duration': 3.163}, {'end': 3217.622, 'text': "at the point of time you're viewing this, this should be released.", 'start': 3214.78, 'duration': 2.842}, {'end': 3220.064, 'text': "react-dom. it's the same.", 'start': 3218.343, 'duration': 1.721}, {'end': 3226.308, 'text': 'and react scripts, as i mentioned, is a package offering all this build workflow, this development server,', 'start': 3220.064, 'duration': 6.244}, {'end': 3233.152, 'text': "the next generation javascript feature support and all these things we're using in this project.", 'start': 3226.308, 'duration': 6.844}, {'end': 3236.674, 'text': 'in the package.json file there are also a couple of scripts defined.', 'start': 3233.152, 'duration': 3.522}], 'summary': 'Project has 3 dependencies defined in package.json, including react 16 release candidate version.', 'duration': 43.514, 'max_score': 3193.16, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU3193160.jpg'}, {'end': 3299.984, 'src': 'embed', 'start': 3259.142, 'weight': 2, 'content': [{'end': 3264.343, 'text': 'watch all our code, compile our code, optimize the code and do all these things.', 'start': 3259.142, 'duration': 5.201}, {'end': 3271.708, 'text': "Once you're ready for deploying your app, you would run npm run build to optimize it even more not launch a development server,", 'start': 3265.083, 'duration': 6.625}, {'end': 3276.471, 'text': 'but instead get your optimized code stored in a folder.', 'start': 3271.708, 'duration': 4.763}, {'end': 3279.813, 'text': "Because right now, you won't see your compiled code anywhere here.", 'start': 3276.531, 'duration': 3.282}, {'end': 3281.514, 'text': 'Everything happens in memory.', 'start': 3280.253, 'duration': 1.261}, {'end': 3284.836, 'text': "But I'll come back to deploying the application later in the course.", 'start': 3281.894, 'duration': 2.942}, {'end': 3287.618, 'text': "So let's close this package.json file for now.", 'start': 3285.317, 'duration': 2.301}, {'end': 3294.483, 'text': 'The node modules folder holds all the dependencies and sub-dependencies of our project.', 'start': 3288.459, 'duration': 6.024}, {'end': 3296.903, 'text': 'this is why we have that many.', 'start': 3295.023, 'duration': 1.88}, {'end': 3299.984, 'text': 'we only had react, react dom and react scripts.', 'start': 3296.903, 'duration': 3.081}], 'summary': 'Optimize code using npm run build for deployment.', 'duration': 40.842, 'max_score': 3259.142, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU3259142.jpg'}, {'end': 3483.277, 'src': 'embed', 'start': 3426.738, 'weight': 3, 'content': [{'end': 3435.843, 'text': 'most important for us right now the index.js file gets access to this root element in our dom in our html file.', 'start': 3426.738, 'duration': 9.105}, {'end': 3440.005, 'text': 'so the element with the id root, which of course is this div.', 'start': 3435.843, 'duration': 4.162}, {'end': 3450.979, 'text': 'we saw in the index.html file, this one, and there, as you can see, it renders our react application with the render method.', 'start': 3440.005, 'duration': 10.974}, {'end': 3459.083, 'text': 'now here it references some app object or element which we import from an app file.', 'start': 3450.979, 'duration': 8.104}, {'end': 3468.888, 'text': "the extension.js is left out because it's automatically added by our build workflow and if we have a look at this app.js file, therefore,", 'start': 3459.083, 'duration': 9.805}, {'end': 3476.393, 'text': 'This is where we see our first and only React component we have in this starting project right now.', 'start': 3469.588, 'duration': 6.805}, {'end': 3483.277, 'text': "Here we see some JSX and then we'll dive deeply into what we see here exactly in the next lectures.", 'start': 3477.193, 'duration': 6.084}], 'summary': 'Index.js accesses root element in html to render react application with app.js component.', 'duration': 56.539, 'max_score': 3426.738, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU3426738.jpg'}, {'end': 3602.24, 'src': 'heatmap', 'start': 3498.716, 'weight': 7, 'content': [{'end': 3502.119, 'text': "let's close it, of course also, and then let's save it.", 'start': 3498.716, 'duration': 3.403}, {'end': 3503.139, 'text': "that's always important.", 'start': 3502.119, 'duration': 1.02}, {'end': 3508.624, 'text': "don't forget to save your files now, since you have npm start running,", 'start': 3503.139, 'duration': 5.485}, {'end': 3516.151, 'text': 'this will automatically trigger a recompilation and it should automatically reload your page too, which is why you should now see hi,', 'start': 3508.624, 'duration': 7.527}, {'end': 3518.513, 'text': "i'm a react app instead of the old content.", 'start': 3516.151, 'duration': 2.362}, {'end': 3528.976, 'text': 'with that we can also remove this logo.svg file, because we no longer use it in our project, and now we got a bit of a leaner source folder.', 'start': 3519.173, 'duration': 9.803}, {'end': 3530.877, 'text': 'now, what else did create react app?', 'start': 3528.976, 'duration': 1.901}, {'end': 3532.198, 'text': 'create for us?', 'start': 3530.877, 'duration': 1.321}, {'end': 3539.46, 'text': 'it gave us this app.css file, which basically defines some stylings we use in this app.js file,', 'start': 3532.198, 'duration': 7.262}, {'end': 3542.761, 'text': 'though i will say that these are not scoped to this file.', 'start': 3539.46, 'duration': 3.301}, {'end': 3552.226, 'text': 'these are still global stylings And I will actually remove everything but this first app class definition in that file and save it thereafter.', 'start': 3542.761, 'duration': 9.465}, {'end': 3560.931, 'text': 'We also get an index.css file which also applies styles globally and which should be used for some general setup,', 'start': 3553.167, 'duration': 7.764}, {'end': 3563.413, 'text': 'as here for the body of our application.', 'start': 3560.931, 'duration': 2.482}, {'end': 3572.065, 'text': 'The registerServiceWorker.js file is, as the name implies, important for registering a service worker, which is generated automatically.', 'start': 3564.54, 'duration': 7.525}, {'end': 3576.248, 'text': "That's related to this progressive web app we get out of the box.", 'start': 3572.425, 'duration': 3.823}, {'end': 3580.17, 'text': 'It will basically pre-cache our script files.', 'start': 3576.768, 'duration': 3.402}, {'end': 3581.872, 'text': "We don't need to configure anything there.", 'start': 3580.331, 'duration': 1.541}, {'end': 3586.754, 'text': "And the test file, well we'll dive into testing later in the course.", 'start': 3582.852, 'duration': 3.902}, {'end': 3593.676, 'text': 'It basically allows us to create unit tests for the different units, for example components, in our application.', 'start': 3587.034, 'duration': 6.642}, {'end': 3602.24, 'text': "This is the general setup and for the majority of this course we'll work in app.js or other new components we create.", 'start': 3594.497, 'duration': 7.743}], 'summary': 'Using create react app automatically triggers recompilation and reloads the page, providing a leaner source folder with global stylings and pre-caching for scripts.', 'duration': 70.042, 'max_score': 3498.716, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU3498716.jpg'}, {'end': 3650.028, 'src': 'embed', 'start': 3627.023, 'weight': 10, 'content': [{'end': 3634.985, 'text': 'In the last lecture, I walked you through the folder structure which was created by Create React App and we edited our app.js file.', 'start': 3627.023, 'duration': 7.962}, {'end': 3637.705, 'text': "Let's now dive deeper into what we see here.", 'start': 3635.445, 'duration': 2.26}, {'end': 3639.966, 'text': 'We see a React component.', 'start': 3638.285, 'duration': 1.681}, {'end': 3647.407, 'text': 'As I explained, React is all about creating components, basically custom HTML elements you could say,', 'start': 3640.626, 'duration': 6.781}, {'end': 3650.028, 'text': 'which you can then use to construct your application.', 'start': 3647.407, 'duration': 2.621}], 'summary': 'Overview of react component creation and usage.', 'duration': 23.005, 'max_score': 3627.023, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU3627023.jpg'}, {'end': 3778.642, 'src': 'embed', 'start': 3743.76, 'weight': 11, 'content': [{'end': 3748.283, 'text': 'We have this app component, which is defined in the app.js file.', 'start': 3743.76, 'duration': 4.523}, {'end': 3753.367, 'text': 'Here we see one way, one of two ways of defining a React component.', 'start': 3749.044, 'duration': 4.323}, {'end': 3764.695, 'text': 'We create a JavaScript class with the class keyword and then we use the extends keyword to inherit from this component, object or class to be precise,', 'start': 3753.827, 'duration': 10.868}, {'end': 3769.039, 'text': 'which is imported up here from the React library.', 'start': 3764.695, 'duration': 4.344}, {'end': 3778.642, 'text': 'actually we import two things react, which is the responsible or required for rendering anything, anything to the dom.', 'start': 3769.799, 'duration': 8.843}], 'summary': 'Introduction to defining a react component using a javascript class and inheritance from the react library.', 'duration': 34.882, 'max_score': 3743.76, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU3743760.jpg'}, {'end': 4009.429, 'src': 'embed', 'start': 3983.011, 'weight': 12, 'content': [{'end': 3993.437, 'text': "CreateElement. This, by the way, is also the reason why we have to import React, because this code here is, in the end, compiled to what we're writing here,", 'start': 3983.011, 'duration': 10.426}, {'end': 3994.558, 'text': "even though we don't see that.", 'start': 3993.437, 'duration': 1.121}, {'end': 3998.721, 'text': 'CreateElement is a method and it takes three arguments.', 'start': 3995.679, 'duration': 3.042}, {'end': 4002.704, 'text': 'Actually, it takes an infinite amount of arguments, but at least three.', 'start': 3999.121, 'duration': 3.583}, {'end': 4008.308, 'text': 'The first one is the element we want to render to the DOM.', 'start': 4003.604, 'duration': 4.704}, {'end': 4009.429, 'text': 'This could be a div.', 'start': 4008.448, 'duration': 0.981}], 'summary': 'We use createelement method in react to render elements to the dom, taking at least three arguments.', 'duration': 26.418, 'max_score': 3983.011, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU3983011.jpg'}, {'end': 4200.22, 'src': 'embed', 'start': 4169.6, 'weight': 13, 'content': [{'end': 4178.908, 'text': "now what we don't see is the css styling getting applied because we don't see the class being added.", 'start': 4169.6, 'duration': 9.308}, {'end': 4186.194, 'text': 'in our jsx code we added a css class with class name, not with class by the name.', 'start': 4178.908, 'duration': 7.286}, {'end': 4189.698, 'text': "by the way, i'll come back to why we use class name in the next lecture.", 'start': 4186.194, 'duration': 3.504}, {'end': 4192.096, 'text': 'So we add class name.', 'start': 4190.796, 'duration': 1.3}, {'end': 4200.22, 'text': 'In our create element call, we will simply not pass null as configuration, but a JavaScript object.', 'start': 4193.277, 'duration': 6.943}], 'summary': 'Css styling not applied due to class name usage in jsx code.', 'duration': 30.62, 'max_score': 4169.6, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU4169600.jpg'}], 'start': 3172.349, 'title': 'React project and component analysis', 'summary': 'Analyzes the project structure, dependencies, and react project file structure, emphasizing key elements such as package.json dependencies, react project files, and component creation using jsx and es6 class syntax.', 'chapters': [{'end': 3320.871, 'start': 3172.349, 'title': 'Analyzing project structure and dependencies', 'summary': 'Examines the project structure and dependencies, including the presence of three dependencies in the package.json file, the purpose of react scripts package, and the automatic generation of the node modules folder upon running npm install.', 'duration': 148.522, 'highlights': ['The package.json file contains three dependencies in this project, created by create react app.', 'The react scripts package offers build workflow, development server, and next generation JavaScript feature support.', 'The node modules folder holds all the dependencies and sub-dependencies of our project, automatically generated by create react scripts upon running npm install.']}, {'end': 3532.198, 'start': 3321.312, 'title': 'Understanding react project structure', 'summary': "Explains the basic structure of a react project, emphasizing the importance of the index.html file, the source folder, and the app.js file, while also highlighting the use of the root element for mounting the react application and the automatic recompilation triggered by 'npm start'.", 'duration': 210.886, 'highlights': ["The index.html file is the single page in the project and serves as the entry point for the web server, with the 'div' element having the id 'root' playing a crucial role in mounting the React application.", "The source folder contains the essential files for the React application, with the index.js file accessing the 'div' element with the id 'root' and rendering the React application using the 'render' method.", 'The app.js file contains the first and only React component in the starting project, involving JSX and further exploration in subsequent lectures.', "The automatic recompilation and page reload triggered by 'npm start' allow for immediate reflection of changes made in the project, ensuring efficient development and testing processes."]}, {'end': 3743.38, 'start': 3532.198, 'title': 'React app file structure', 'summary': 'Explains the file structure of a react app generated by create react app, including the purpose of app.css, index.css, registerserviceworker.js, and the test file, as well as the concept of creating react components and their usage in app.js and index.js.', 'duration': 211.182, 'highlights': ['The purpose of app.css and index.css files The app.css and index.css files define global styles used in the app.js file and for general setup, and are not scoped to specific files.', 'The purpose of registerServiceWorker.js file The registerServiceWorker.js file is important for registering a service worker, which is generated automatically and pre-caches script files for the progressive web app.', 'The purpose of the test file The test file allows for creating unit tests for different units, such as components, in the application, which will be delved into later in the course.', 'Explanation of creating React components React is all about creating components, which are custom HTML elements used to construct the application, with one root component, in this case the app component, nesting all other components needed.']}, {'end': 4226.702, 'start': 3743.76, 'title': 'React component creation', 'summary': 'Explains the creation of a react component using es6 class syntax and jsx, which is a syntactic sugar for writing html in javascript, and demonstrates the use of the createelement method for rendering elements and applying css classes.', 'duration': 482.942, 'highlights': ['The chapter explains the creation of a React component using ES6 class syntax and JSX It describes the process of defining a React component using class syntax and the significance of importing the React library for rendering, along with the explanation of JSX as a syntactic sugar for writing HTML in JavaScript.', 'Demonstrates the use of the createElement method for rendering elements It illustrates the use of the createElement method, including the arguments required for rendering elements to the DOM and the nesting of elements using this method.', 'Applying CSS classes using JSX It explains the process of applying CSS classes using JSX by using the `className` attribute and demonstrates how to define and assign CSS classes using a JavaScript object.']}], 'duration': 1054.353, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU3172349.jpg', 'highlights': ['The package.json file contains three dependencies in this project, created by create react app.', 'The react scripts package offers build workflow, development server, and next generation JavaScript feature support.', 'The node modules folder holds all the dependencies and sub-dependencies of our project, automatically generated by create react scripts upon running npm install.', "The index.html file is the single page in the project and serves as the entry point for the web server, with the 'div' element having the id 'root' playing a crucial role in mounting the React application.", "The source folder contains the essential files for the React application, with the index.js file accessing the 'div' element with the id 'root' and rendering the React application using the 'render' method.", 'The app.js file contains the first and only React component in the starting project, involving JSX and further exploration in subsequent lectures.', "The automatic recompilation and page reload triggered by 'npm start' allow for immediate reflection of changes made in the project, ensuring efficient development and testing processes.", 'The app.css and index.css files define global styles used in the app.js file and for general setup, and are not scoped to specific files.', 'The registerServiceWorker.js file is important for registering a service worker, which is generated automatically and pre-caches script files for the progressive web app.', 'The test file allows for creating unit tests for different units, such as components, in the application, which will be delved into later in the course.', 'React is all about creating components, which are custom HTML elements used to construct the application, with one root component, in this case the app component, nesting all other components needed.', 'The chapter explains the creation of a React component using ES6 class syntax and JSX It describes the process of defining a React component using class syntax and the significance of importing the React library for rendering, along with the explanation of JSX as a syntactic sugar for writing HTML in JavaScript.', 'It illustrates the use of the createElement method, including the arguments required for rendering elements to the DOM and the nesting of elements using this method.', 'It explains the process of applying CSS classes using JSX by using the `className` attribute and demonstrates how to define and assign CSS classes using a JavaScript object.']}, {'end': 5597.811, 'segs': [{'end': 4429.146, 'src': 'embed', 'start': 4408.001, 'weight': 0, 'content': [{'end': 4417.963, 'text': 'now, with react 16, this is kind of loosened and we will see in this course that we can actually return adjacent elements.', 'start': 4408.001, 'duration': 9.962}, {'end': 4429.146, 'text': 'in the end, it is a typical thing and a typical best practice to wrap everything into one root element per component, though this also makes sense,', 'start': 4417.963, 'duration': 11.183}], 'summary': 'React 16 allows returning adjacent elements, best practice to wrap into one root element per component.', 'duration': 21.145, 'max_score': 4408.001, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU4408001.jpg'}, {'end': 5039.337, 'src': 'embed', 'start': 4996.038, 'weight': 1, 'content': [{'end': 5006.749, 'text': 'Components are awesome because we can focus our code in each file and hence make it much more maintainable, not put everything into the app.js file,', 'start': 4996.038, 'duration': 10.711}, {'end': 5008.932, 'text': 'which can really get crowded for bigger apps.', 'start': 5006.749, 'duration': 2.183}, {'end': 5015.248, 'text': 'and this component is also reusable and configurable.', 'start': 5009.967, 'duration': 5.281}, {'end': 5017.549, 'text': 'now come back to the configuring part.', 'start': 5015.248, 'duration': 2.301}, {'end': 5019.649, 'text': 'reusing it is quite simple.', 'start': 5017.549, 'duration': 2.1}, {'end': 5028.591, 'text': 'we can simply copy it and paste it as often as we want, maybe three times, and by simply doing this and saving that file,', 'start': 5019.649, 'duration': 8.942}, {'end': 5035.012, 'text': 'we get the output multiple times, and that is a super easy way of reusing it anywhere in our application.', 'start': 5028.591, 'duration': 6.421}, {'end': 5039.337, 'text': 'and if our application would contain more and more components,', 'start': 5035.752, 'duration': 3.585}], 'summary': 'Using components makes code more maintainable, reusable, and configurable, allowing for easy reusability multiple times in the application.', 'duration': 43.299, 'max_score': 4996.038, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU4996038.jpg'}, {'end': 5201.043, 'src': 'embed', 'start': 5170.651, 'weight': 3, 'content': [{'end': 5181.2, 'text': 'if we have some dynamic content in our jsx part which we want to run as javascript code and not interpret as text,', 'start': 5170.651, 'duration': 10.549}, {'end': 5185.494, 'text': 'we have to wrap it in single curly braces.', 'start': 5182.452, 'duration': 3.042}, {'end': 5193.238, 'text': "So let's wrap this in single curly braces, one in front of moth floor and one after the closing parentheses.", 'start': 5186.054, 'duration': 7.184}, {'end': 5201.043, 'text': "Now if we save this, we let this reload, we see I'm zero, nine and 20 years old.", 'start': 5194.419, 'duration': 6.624}], 'summary': 'Jsx dynamic content wrapped in single curly braces yields 0, 9, and 20 years old', 'duration': 30.392, 'max_score': 5170.651, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU5170651.jpg'}, {'end': 5290.207, 'src': 'embed', 'start': 5253.907, 'weight': 5, 'content': [{'end': 5261.637, 'text': 'so that we can leave outputting some generic content like person and a random number, and instead do something else?', 'start': 5253.907, 'duration': 7.73}, {'end': 5265.681, 'text': 'Pass some configuration from the app.js file.', 'start': 5262.197, 'duration': 3.484}, {'end': 5275.312, 'text': 'Maybe some HTML attributes we pass to Person to configure what we want to output for each usage of the Person component.', 'start': 5266.021, 'duration': 9.291}, {'end': 5290.207, 'text': "Now that we know how to output dynamic content, let's make our component configurable, flexible, and dynamic.", 'start': 5282.785, 'duration': 7.422}], 'summary': 'Make the component configurable and dynamic.', 'duration': 36.3, 'max_score': 5253.907, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU5253907.jpg'}, {'end': 5540.497, 'src': 'embed', 'start': 5506.346, 'weight': 4, 'content': [{'end': 5511.229, 'text': "And it's one important step towards rebuilding great and flexible components.", 'start': 5506.346, 'duration': 4.883}, {'end': 5514.602, 'text': 'what about the hobbies?', 'start': 5512.66, 'duration': 1.942}, {'end': 5521.788, 'text': "here, though, let's have a look at how we can use content which is passed not as an attribute,", 'start': 5514.602, 'duration': 7.186}, {'end': 5525.792, 'text': 'but between the opening and closing tags in the next lecture.', 'start': 5521.788, 'duration': 4.004}, {'end': 5540.497, 'text': 'In the last lecture, we learned how to use props, how to receive them as an argument and output them dynamically in our code.', 'start': 5533.331, 'duration': 7.166}], 'summary': 'Learning to use props for dynamic code output in the next lecture.', 'duration': 34.151, 'max_score': 5506.346, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU5506346.jpg'}], 'start': 4227.322, 'title': 'React component fundamentals', 'summary': "Covers jsx restrictions and internals, creating and using react components, outputting dynamic content in react, and using props in react components, emphasizing modularity, reusability, and configurability, with examples and react 16's new features.", 'chapters': [{'end': 4503.555, 'start': 4227.322, 'title': 'Jsx restrictions and internals', 'summary': "Explains the equivalent of react createelement with jsx, highlighting restrictions such as reserved javascript words, the need for one root element, and the use of parentheses, with a mention of react 16's ability to return adjacent elements.", 'duration': 276.233, 'highlights': ["JSX clearly looks like HTML, but some words like class can't be used, requiring the use of className instead, due to being reserved words in JavaScript.", 'Returning multiple elements in a JSX expression is restricted to one root element, but React 16 allows returning adjacent elements, emphasizing the best practice of wrapping everything into one root element per component.', 'The use of parentheses in JSX allows for the structured return of HTML code across multiple lines without errors, highlighting that JSX, while similar to HTML, is ultimately JavaScript.']}, {'end': 5039.337, 'start': 4504.355, 'title': 'Creating and using react components', 'summary': "Discusses creating a new react component, 'person', and importing it into the main app component, stressing the benefits of modularity, reusability, and configurability, which can lead to more maintainable code and ease of reuse.", 'duration': 534.982, 'highlights': ["The 'person' component is created following the convention of starting with a capital letter and is then imported into the main app component, 'app.js', showcasing the process of creating and using React components.", 'Components in React allow for more maintainable code and can prevent overcrowding of the main app file, making it easier to manage for larger applications.', "The 'person' component is reusable and configurable, as demonstrated by copying and pasting it multiple times to achieve repeated outputs, showcasing the ease of reuse in any part of the application."]}, {'end': 5353.365, 'start': 5039.337, 'title': 'Outputting dynamic content in react', 'summary': 'Explains how to output dynamic content in react, including using random numbers and configuring components to output specific content, illustrating with examples and discussing the importance of wrapping dynamic content in single curly braces.', 'duration': 314.028, 'highlights': ['The chapter emphasizes the importance of wrapping dynamic content in single curly braces to execute it as JavaScript code and not interpret it as text, showcasing examples of using random numbers and configuring components to output specific content.', 'It demonstrates the ability to output dynamic content as part of JSX content, allowing for execution of short, simple expressions like simple calculations or function calls, and discusses the potential to call functions for more complex operations.', 'The chapter discusses the need to make components configurable, flexible, and dynamic, illustrating the concept with examples of passing configuration from the app.js file and utilizing HTML attributes to configure the output of the Person component.']}, {'end': 5597.811, 'start': 5353.365, 'title': 'Using props in react components', 'summary': 'Demonstrates how to use props in react components to receive and output dynamic content, achieving reusable and flexible components, with examples of dynamic output and accessing content between opening and closing tags.', 'duration': 244.446, 'highlights': ['Demonstrates using props in React components to receive and output dynamic content The chapter explains how to use props in React components to receive and output dynamic content, achieving reusable and flexible components.', 'Examples of dynamic output using props The chapter provides examples of using props to output dynamic content, such as displaying names and ages in a reusable component.', 'Accessing content between opening and closing tags The chapter explains how to access content passed between the opening and closing tags of a custom component in React.']}], 'duration': 1370.489, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU4227322.jpg', 'highlights': ['React 16 allows returning adjacent elements in a JSX expression, emphasizing the best practice of wrapping everything into one root element per component.', 'Components in React allow for more maintainable code and can prevent overcrowding of the main app file, making it easier to manage for larger applications.', "The 'person' component is reusable and configurable, as demonstrated by copying and pasting it multiple times to achieve repeated outputs, showcasing the ease of reuse in any part of the application.", 'The chapter emphasizes the importance of wrapping dynamic content in single curly braces to execute it as JavaScript code and not interpret it as text, showcasing examples of using random numbers and configuring components to output specific content.', 'Demonstrates using props in React components to receive and output dynamic content, achieving reusable and flexible components.', 'The chapter discusses the need to make components configurable, flexible, and dynamic, illustrating the concept with examples of passing configuration from the app.js file and utilizing HTML attributes to configure the output of the Person component.']}, {'end': 6564.447, 'segs': [{'end': 5715.468, 'src': 'embed', 'start': 5683.115, 'weight': 0, 'content': [{'end': 5684.677, 'text': 'this is important to know.', 'start': 5683.115, 'duration': 1.562}, {'end': 5698.471, 'text': 'you can put your content into your component from outside, not only by passing props like this, but if you want to pass some structured html content,', 'start': 5684.677, 'duration': 13.794}, {'end': 5705.158, 'text': 'also by placing it between the opening and closing tag and accessing it with props children.', 'start': 5698.471, 'duration': 6.687}, {'end': 5715.468, 'text': 'In the last lectures we had a look at props.', 'start': 5712.845, 'duration': 2.623}], 'summary': 'You can insert structured html content into a component and access it with props children.', 'duration': 32.353, 'max_score': 5683.115, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU5683115.jpg'}, {'end': 5861.785, 'src': 'embed', 'start': 5830.885, 'weight': 1, 'content': [{'end': 5838.229, 'text': "still what we're about to do only works in components which are created by extending component.", 'start': 5830.885, 'duration': 7.344}, {'end': 5849.815, 'text': 'there we can define a special property named state, whereas props are set and passed from outside, like name and age, into the person component.', 'start': 5838.229, 'duration': 11.586}, {'end': 5861.785, 'text': 'State is managed from inside a component and state is only available in components which are used by extending component which is imported from React.', 'start': 5850.655, 'duration': 11.13}], 'summary': 'State is managed inside components created by extending component from react.', 'duration': 30.9, 'max_score': 5830.885, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU5830885.jpg'}, {'end': 5945.908, 'src': 'embed', 'start': 5919.729, 'weight': 2, 'content': [{'end': 5924.074, 'text': 'And you can set up any kind of data you want in this state object.', 'start': 5919.729, 'duration': 4.345}, {'end': 5927.918, 'text': 'You could set up a name property, which is some name.', 'start': 5924.414, 'duration': 3.504}, {'end': 5930.68, 'text': 'You can really manage whatever you want.', 'start': 5928.318, 'duration': 2.362}, {'end': 5933.644, 'text': 'Here I want to manage an array of persons, though.', 'start': 5931.021, 'duration': 2.623}, {'end': 5945.908, 'text': "now this person's array again is an array of javascript objects where each object has a name, maybe max, and the age maybe 28.", 'start': 5934.804, 'duration': 11.104}], 'summary': 'State object can manage any data, including an array of persons with names and ages.', 'duration': 26.179, 'max_score': 5919.729, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU5919729.jpg'}, {'end': 6458.838, 'src': 'embed', 'start': 6435.406, 'weight': 3, 'content': [{'end': 6446.411, 'text': 'but remember that we extend component and this is made available by the react library and the component object happens to have a set state method.', 'start': 6435.406, 'duration': 11.005}, {'end': 6458.838, 'text': 'this is a method which allows us to update this special state property here and and it will then ensure that React gets to know about this update and updates the DOM.', 'start': 6446.411, 'duration': 12.427}], 'summary': 'Using react component to update state and update the dom.', 'duration': 23.432, 'max_score': 6435.406, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU6435406.jpg'}], 'start': 5597.811, 'title': 'Using props, children, class properties, state management, and state updates', 'summary': 'Covers using props and children in react components, class properties in javascript, managing state in javascript objects, and updating state in react, emphasizing the importance and techniques for passing structured html content, defining properties within a class, handling state changes, and using the setstate method for updating state.', 'chapters': [{'end': 5775.537, 'start': 5597.811, 'title': 'Using props and children in react components', 'summary': 'Explains how to use props to pass structured html content to react components and defines the importance of children in rendering dynamic content in jsx code, with emphasis on accessing props and the reserved word children, while also discussing the use of props to access component attributes.', 'duration': 177.726, 'highlights': ['The chapter explains how to use props to pass structured HTML content to React components, with emphasis on accessing props and the reserved word children.', 'It defines the importance of children in rendering dynamic content in JSX code, including plain text, complex HTML code, unordered lists, and other React components.', 'The chapter discusses the use of props to access component attributes, explaining how props provide access to all the attributes passed to own components.']}, {'end': 5887.143, 'start': 5776.537, 'title': 'Class properties in javascript', 'summary': "Explains the concept of class properties in javascript, highlighting the difference between defining properties in normal javascript code and within a class, the special property 'state' in components extending component, and the caution to use state with care in app development.", 'duration': 110.606, 'highlights': ["The special property 'state' can be defined in any component which extends component, and it is managed from inside the component, unlike props which are set and passed from outside.", 'State is only available in components created by extending component and is not available in function components, emphasizing the need to use state with caution in app development.', "Explains the difference between defining a property in normal JavaScript code and within a class, highlighting the use of 'var' in JavaScript code and direct assignment in a class."]}, {'end': 6405.107, 'start': 5887.583, 'title': 'Managing state in javascript objects', 'summary': 'Explains how to manage and access data in a javascript object called state, including creating an array of persons with names and ages, accessing state properties for rendering, and handling state changes through event listeners and methods.', 'duration': 517.524, 'highlights': ['Creating and accessing a JavaScript object called state to manage and access data The chapter demonstrates initializing a JavaScript object called state to manage and access data, including creating a persons property as an array to store names and ages of individuals.', 'Accessing state properties for rendering in JSX code The chapter explains how to access state properties, such as the persons array, to dynamically render data in JSX code using the this keyword.', 'Handling state changes through event listeners and methods The chapter discusses handling state changes by using event listeners with the onClick attribute in JSX, assigning a method as an event handler, and updating the state property upon a click event.']}, {'end': 6564.447, 'start': 6405.668, 'title': 'Updating state in react', 'summary': 'Explains the importance of using the setstate method in react to update state, as it allows react to recognize the changes and update the dom, merging the defined object with the existing state and not discarding the untouched state.', 'duration': 158.779, 'highlights': ['The setState method in React is important for updating state, as it allows React to recognize the changes and update the DOM, preventing direct mutation of the state (relevance score: 5)', 'Using setState with an object argument allows for merging the defined object with the existing state, ensuring that React gets to know about the update and updates the DOM accordingly (relevance score: 4)', 'When using setState to update a specific part of the state, only the specified part gets overridden, leaving the rest of the state untouched, which is beneficial for making targeted updates without affecting the entire state (relevance score: 3)']}], 'duration': 966.636, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU5597811.jpg', 'highlights': ['The chapter explains how to use props to pass structured HTML content to React components, with emphasis on accessing props and the reserved word children.', "The special property 'state' can be defined in any component which extends component, and it is managed from inside the component, unlike props which are set and passed from outside.", 'Creating and accessing a JavaScript object called state to manage and access data The chapter demonstrates initializing a JavaScript object called state to manage and access data, including creating a persons property as an array to store names and ages of individuals.', 'The setState method in React is important for updating state, as it allows React to recognize the changes and update the DOM, preventing direct mutation of the state (relevance score: 5)']}, {'end': 7224.216, 'segs': [{'end': 6678.669, 'src': 'embed', 'start': 6622.286, 'weight': 0, 'content': [{'end': 6623.266, 'text': 'react watches out.', 'start': 6622.286, 'duration': 0.98}, {'end': 6627.988, 'text': 'for if state changes or props changes,', 'start': 6623.266, 'duration': 4.722}, {'end': 6636.533, 'text': 'it basically analyzes the code it already rendered to the dom and the code it would now render if it were to re-render everything,', 'start': 6627.988, 'duration': 8.545}, {'end': 6644.437, 'text': 'and then it updates the existing dom in all the places where it needs to update it to reflect your new state and props.', 'start': 6636.533, 'duration': 7.904}, {'end': 6646.638, 'text': 'new state in app.js.', 'start': 6644.437, 'duration': 2.201}, {'end': 6648.659, 'text': 'new props in person.js.', 'start': 6646.638, 'duration': 2.021}, {'end': 6659.418, 'text': 'In the last lectures we learned a lot about state and props.', 'start': 6656.59, 'duration': 2.828}, {'end': 6665.213, 'text': 'We learned that these are the only two things which lead React to update your DOM if something changed.', 'start': 6659.718, 'duration': 5.495}, {'end': 6674.947, 'text': "now. i also mentioned that when creating a component as a function, as we do for a person, we can't use state in there,", 'start': 6666.283, 'duration': 8.664}, {'end': 6678.669, 'text': "because it's just a function where we return some jsx code.", 'start': 6674.947, 'duration': 3.722}], 'summary': 'React updates dom based on state and props changes, only factors for dom update, state and props are learned in previous lectures.', 'duration': 56.383, 'max_score': 6622.286, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU6622286.jpg'}, {'end': 6734.109, 'src': 'embed', 'start': 6701.663, 'weight': 1, 'content': [{'end': 6708.648, 'text': 'And still I mentioned that you should use this function form of components as often as possible.', 'start': 6701.663, 'duration': 6.985}, {'end': 6711.59, 'text': 'And I will emphasize it here one more time.', 'start': 6709.329, 'duration': 2.261}, {'end': 6724.161, 'text': 'Why is this so important? Because these simple components, which are just functions receiving props, are very clear about what they do.', 'start': 6712.551, 'duration': 11.61}, {'end': 6734.109, 'text': 'They only render something to the DOM, they are dynamic because of props, and you can add some additional logic prior to calling return.', 'start': 6724.181, 'duration': 9.928}], 'summary': 'Use function form of components for clarity, dynamic rendering, and additional logic.', 'duration': 32.446, 'max_score': 6701.663, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU6701663.jpg'}, {'end': 6804.484, 'src': 'embed', 'start': 6775.643, 'weight': 3, 'content': [{'end': 6782.286, 'text': 'It is a component, but we refer to it as container because it contains some part of our application state.', 'start': 6775.643, 'duration': 6.643}, {'end': 6786.308, 'text': 'In our demo application, actually all of the application state.', 'start': 6782.826, 'duration': 3.482}, {'end': 6790.051, 'text': "Here, we can't change something about our app.", 'start': 6787.168, 'duration': 2.883}, {'end': 6796.157, 'text': "And then we pass these changes down to, for example, the person component, but that's it.", 'start': 6790.551, 'duration': 5.606}, {'end': 6798.599, 'text': 'The change happens in app.js.', 'start': 6796.497, 'duration': 2.102}, {'end': 6804.484, 'text': 'And once we start building the course project, you will see me use this pattern.', 'start': 6799.58, 'duration': 4.904}], 'summary': 'The container in the demo app holds all application state and passes changes to the person component in app.js.', 'duration': 28.841, 'max_score': 6775.643, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU6775643.jpg'}, {'end': 7084.077, 'src': 'heatmap', 'start': 6911.572, 'weight': 0.944, 'content': [{'end': 6920.839, 'text': 'well, we can actually pass a reference to this handler as a property to our component, and this is no fancy hack.', 'start': 6911.572, 'duration': 9.267}, {'end': 6923.041, 'text': 'this is actually a very common pattern.', 'start': 6920.839, 'duration': 2.202}, {'end': 6932.997, 'text': "I will first of all restructure this over multiple lines for all these components so that we have an easier time seeing which properties we're passing.", 'start': 6924.309, 'duration': 8.688}, {'end': 6939.723, 'text': "And then let's say I don't even want to pass this for all the components, but only for this usage of it.", 'start': 6933.918, 'duration': 5.805}, {'end': 6946.209, 'text': "So here I will add a new property, which I'll name click.", 'start': 6940.624, 'duration': 5.585}, {'end': 6947.791, 'text': 'And the name is totally up to you.', 'start': 6946.71, 'duration': 1.081}, {'end': 6954.001, 'text': 'here i will pass a reference to this switch name handler.', 'start': 6949.079, 'duration': 4.922}, {'end': 6960.064, 'text': 'so basically what i also did here, this switch name handler on the click on the button.', 'start': 6954.001, 'duration': 6.063}, {'end': 6970.568, 'text': "here i'm passing it as a reference to this click property and now we can use this click property in person js.", 'start': 6960.064, 'duration': 10.504}, {'end': 6978.371, 'text': 'there i now can simply call props click, because click is the name of the property I defined here.', 'start': 6970.568, 'duration': 7.803}, {'end': 6982.433, 'text': 'And this will execute this function, which I pass as a reference.', 'start': 6979.172, 'duration': 3.261}, {'end': 6987.475, 'text': 'So if we save all the files app.js and person.js,', 'start': 6983.333, 'duration': 4.142}, {'end': 6995.578, 'text': 'we should see that in our application we can of course still click this button to change the name of Maximilian and the age of Stephanie.', 'start': 6987.475, 'duration': 8.103}, {'end': 7000.32, 'text': 'But if I reload again, we can also click this paragraph with menu here.', 'start': 6996.118, 'duration': 4.202}, {'end': 7003.841, 'text': 'You also see it changed the name and the years.', 'start': 7000.86, 'duration': 2.981}, {'end': 7009.253, 'text': 'This is something important to understand, an important pattern.', 'start': 7005.509, 'duration': 3.744}, {'end': 7015.26, 'text': 'You can pass methods also as props,', 'start': 7009.894, 'duration': 5.366}, {'end': 7025.07, 'text': "so that you can call a method which might change the state in another component which doesn't have direct access to the state and which shouldn't have direct access to the state.", 'start': 7015.26, 'duration': 9.81}, {'end': 7028.612, 'text': "It's a common pattern and it's important to know.", 'start': 7025.751, 'duration': 2.861}, {'end': 7038.137, 'text': 'you can pass down click handlers which allow you to change data in the parent component in the app component, in this case for the person component.', 'start': 7028.612, 'duration': 9.525}, {'end': 7045.608, 'text': 'maybe we also want to pass a value to our function.', 'start': 7039.022, 'duration': 6.586}, {'end': 7053.234, 'text': 'maybe here switch name handler should receive the new name, so that here, where i hardcoded maximilian as the new name,', 'start': 7045.608, 'duration': 7.626}, {'end': 7057.277, 'text': 'i actually set name equal to new name.', 'start': 7053.234, 'duration': 4.043}, {'end': 7059.92, 'text': 'now, how do we pass that data?', 'start': 7057.277, 'duration': 2.643}, {'end': 7062.457, 'text': 'There are two ways of doing that.', 'start': 7060.916, 'duration': 1.541}, {'end': 7066.081, 'text': 'The first is that you call bind.', 'start': 7063.158, 'duration': 2.923}, {'end': 7069.324, 'text': 'Here, you may simply bind this.', 'start': 7066.801, 'duration': 2.523}, {'end': 7079.613, 'text': "This controls what this inside the function will refer to, and by binding it to this here outside of the function, we're binding it to the class.", 'start': 7070.385, 'duration': 9.228}, {'end': 7084.077, 'text': "Might look strange, but it's a typical way of handling the this issue in JavaScript.", 'start': 7080.054, 'duration': 4.023}], 'summary': 'Passing methods as props to change state in another component. common pattern in javascript.', 'duration': 172.505, 'max_score': 6911.572, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU6911572.jpg'}, {'end': 7038.137, 'src': 'embed', 'start': 7005.509, 'weight': 4, 'content': [{'end': 7009.253, 'text': 'This is something important to understand, an important pattern.', 'start': 7005.509, 'duration': 3.744}, {'end': 7015.26, 'text': 'You can pass methods also as props,', 'start': 7009.894, 'duration': 5.366}, {'end': 7025.07, 'text': "so that you can call a method which might change the state in another component which doesn't have direct access to the state and which shouldn't have direct access to the state.", 'start': 7015.26, 'duration': 9.81}, {'end': 7028.612, 'text': "It's a common pattern and it's important to know.", 'start': 7025.751, 'duration': 2.861}, {'end': 7038.137, 'text': 'you can pass down click handlers which allow you to change data in the parent component in the app component, in this case for the person component.', 'start': 7028.612, 'duration': 9.525}], 'summary': 'Pass methods as props to change state in components, a common pattern.', 'duration': 32.628, 'max_score': 7005.509, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU7005509.jpg'}], 'start': 6565.468, 'title': 'React state and props', 'summary': "Explains how react updates the dom based on changes in state and props, highlighting the triggers for dom update and the limitations of using state within function components. it also emphasizes the importance of using function components and containers for state handling, and demonstrates passing methods as props to change the parent component's data.", 'chapters': [{'end': 6700.783, 'start': 6565.468, 'title': 'React state and props', 'summary': 'Explains how react updates the dom based on changes in state and props, highlighting the two key factors that trigger the dom update, with emphasis on the limitations of using state within function components.', 'duration': 135.315, 'highlights': ['React updates the DOM based on changes in state and props, with state and props being the only two things that lead React to update the DOM if something changed.', "The limitations of using state within function components are highlighted, as it's explained that state cannot be used in function components due to the absence of a class extending component and the setState method.", 'The process of how React updates the DOM is explained, with emphasis on analyzing the code already rendered and the code it would render if it were to re-render everything, in order to update the existing DOM to reflect the new state and props.']}, {'end': 7224.216, 'start': 6701.663, 'title': 'Component functions and state manipulation', 'summary': "Emphasizes the importance of using function form of components, highlights the significance of containers for handling application state, and demonstrates passing methods as props to change the parent component's data.", 'duration': 522.553, 'highlights': ['The chapter emphasizes the importance of using function form of components Function form of components are clear, dynamic, and do not manipulate application state, promoting clarity and reusability.', 'Highlights the significance of containers for handling application state Containers like App.js are responsible for handling application state, demonstrating the separation of concerns and maintainability.', "Demonstrates passing methods as props to change the parent component's data Passing methods as props allows changing data in the parent component, showcasing a common pattern for data manipulation and promoting reusability."]}], 'duration': 658.748, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU6565468.jpg', 'highlights': ['React updates the DOM based on changes in state and props, with state and props being the only two things that lead React to update the DOM if something changed.', 'The chapter emphasizes the importance of using function form of components Function form of components are clear, dynamic, and do not manipulate application state, promoting clarity and reusability.', "The limitations of using state within function components are highlighted, as it's explained that state cannot be used in function components due to the absence of a class extending component and the setState method.", 'Highlights the significance of containers for handling application state Containers like App.js are responsible for handling application state, demonstrating the separation of concerns and maintainability.', "Demonstrates passing methods as props to change the parent component's data Passing methods as props allows changing data in the parent component, showcasing a common pattern for data manipulation and promoting reusability.", 'The process of how React updates the DOM is explained, with emphasis on analyzing the code already rendered and the code it would render if it were to re-render everything, in order to update the existing DOM to reflect the new state and props.']}, {'end': 8329.277, 'segs': [{'end': 7309.098, 'src': 'embed', 'start': 7224.976, 'weight': 4, 'content': [{'end': 7230.298, 'text': "Now, in an earlier lecture, I said that you shouldn't call this, and that was true.", 'start': 7224.976, 'duration': 5.322}, {'end': 7233.519, 'text': 'But here, this is not getting executed immediately.', 'start': 7231.058, 'duration': 2.461}, {'end': 7244.262, 'text': 'Instead, what we pass here is an anonymous function which will be executed on a click and which then returns the result of this function getting executed,', 'start': 7234.139, 'duration': 10.123}, {'end': 7247.043, 'text': 'which, of course, simply leads to this function getting executed.', 'start': 7244.262, 'duration': 2.781}, {'end': 7253.948, 'text': 'This is useful because now here we can easily pass our data.', 'start': 7248.462, 'duration': 5.486}, {'end': 7257.071, 'text': 'Maximilian with two exclamation marks maybe.', 'start': 7254.649, 'duration': 2.422}, {'end': 7264.359, 'text': 'If I now save this and I click switch name, we see Maximilian with two exclamation marks.', 'start': 7257.812, 'duration': 6.547}, {'end': 7269.687, 'text': 'Now, this is a very convenient syntax, but it can be inefficient.', 'start': 7265.543, 'duration': 4.144}, {'end': 7273.75, 'text': 'React can rerender certain things in your app too often.', 'start': 7270.127, 'duration': 3.623}, {'end': 7278.074, 'text': "So I don't necessarily recommend using this if you don't have to.", 'start': 7274.371, 'duration': 3.703}, {'end': 7281.377, 'text': 'Use the bind syntax instead if you can.', 'start': 7278.854, 'duration': 2.523}, {'end': 7283.058, 'text': "Still, I'll leave it here.", 'start': 7281.757, 'duration': 1.301}, {'end': 7289.824, 'text': 'You may use it and depending on the size of your application, you also might not feel that big of a performance hit.', 'start': 7283.278, 'duration': 6.546}, {'end': 7293.427, 'text': 'But be aware that this can be inefficient.', 'start': 7290.364, 'duration': 3.063}, {'end': 7309.098, 'text': 'We covered a lot and we changed a lot of names here, but what if we actually want to change the name on our own?', 'start': 7300.95, 'duration': 8.148}], 'summary': 'Using anonymous functions for efficient data passing in react, while being wary of potential inefficiencies and considering alternative syntax.', 'duration': 84.122, 'max_score': 7224.976, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU7224976.jpg'}, {'end': 7600.947, 'src': 'heatmap', 'start': 7415.31, 'weight': 0, 'content': [{'end': 7420.712, 'text': 'And as you might know, for JavaScript events, this event probably has a target.', 'start': 7415.31, 'duration': 5.402}, {'end': 7429.594, 'text': "The target doesn't make for a good name value, though, but the target should be the input into which we typed.", 'start': 7421.312, 'duration': 8.282}, {'end': 7435.056, 'text': 'So it should actually also have a value property, which is the value the user entered.', 'start': 7430.195, 'duration': 4.861}, {'end': 7440.618, 'text': 'And therefore this now makes for a good updated value for name.', 'start': 7435.536, 'duration': 5.082}, {'end': 7447.897, 'text': 'So event target value is what I want to assign as a new name for manual, again for the time being,', 'start': 7442.014, 'duration': 5.883}, {'end': 7451.018, 'text': 'no matter into which input of which component I typed.', 'start': 7447.897, 'duration': 3.121}, {'end': 7454.68, 'text': 'Name changed handler is my handler.', 'start': 7452.559, 'duration': 2.121}, {'end': 7460.882, 'text': 'Now I need to pass this to a component to be able to access it from there.', 'start': 7455.34, 'duration': 5.542}, {'end': 7468.706, 'text': 'And since I only can change menu, I will only pass it to the menu person, though we could pass it to any other, of course.', 'start': 7461.843, 'duration': 6.863}, {'end': 7481.533, 'text': 'Here I will simply name this changed and pass this name changed handler following the same logic as for the click event.', 'start': 7469.687, 'duration': 11.846}, {'end': 7484.209, 'text': 'inside the person.', 'start': 7482.589, 'duration': 1.62}, {'end': 7491.871, 'text': 'i can now access this changed property and simply call props changed here or not.', 'start': 7484.209, 'duration': 7.662}, {'end': 7497.252, 'text': "call it, don't add parentheses, but simply pass the reference to it.", 'start': 7491.871, 'duration': 5.381}, {'end': 7502.793, 'text': 'and keep in mind this refers to the method we declared in app.js.', 'start': 7497.252, 'duration': 5.541}, {'end': 7512.718, 'text': 'this name changed handler, the event object will actually be passed to it automatically by react like a normal javascript where you also,', 'start': 7502.793, 'duration': 9.925}, {'end': 7515.839, 'text': 'by default get access to the event object.', 'start': 7512.718, 'duration': 3.121}, {'end': 7518.801, 'text': "with that, let's save this and let's see what happens.", 'start': 7515.839, 'duration': 2.962}, {'end': 7522.723, 'text': 'we got inputs below all components, but for most of them nothing happens.', 'start': 7518.801, 'duration': 3.922}, {'end': 7530.927, 'text': 'if i type in them for a menu, though, you see with every keystroke the name updates manual, whatever i want to type there.', 'start': 7522.723, 'duration': 8.204}, {'end': 7540.136, 'text': 'This is because we bound onChange to this prop changed, which holds a reference to the name changed handler.', 'start': 7531.927, 'duration': 8.209}, {'end': 7547.905, 'text': 'And we then use this default event object to extract the target, which is the input element, and then the value of the target,', 'start': 7540.657, 'duration': 7.248}, {'end': 7549.126, 'text': 'which is what we entered.', 'start': 7547.905, 'duration': 1.221}, {'end': 7551.108, 'text': 'This shows us actually two things.', 'start': 7549.647, 'duration': 1.461}, {'end': 7557.016, 'text': 'how we can dynamically update something, dynamically call an event and use the things we learned before,', 'start': 7551.809, 'duration': 5.207}, {'end': 7560.86, 'text': 'like passing down event references or method references.', 'start': 7557.016, 'duration': 3.844}, {'end': 7561.341, 'text': 'I should say', 'start': 7560.86, 'duration': 0.481}, {'end': 7565.086, 'text': 'But it also shows us how we can handle inputs.', 'start': 7562.082, 'duration': 3.004}, {'end': 7575.059, 'text': 'Now, it would also be nice if we would see the current value of the name in the input right from the start.', 'start': 7566.235, 'duration': 8.824}, {'end': 7578.3, 'text': 'So we basically want to set up two-way binding.', 'start': 7575.839, 'duration': 2.461}, {'end': 7584.403, 'text': 'When we change it, we want to propagate that change so that we can update the state.', 'start': 7578.721, 'duration': 5.682}, {'end': 7587.785, 'text': 'But we also want to see the current state right from the start.', 'start': 7585.104, 'duration': 2.681}, {'end': 7595.802, 'text': 'To do this, I can set value equal to props name.', 'start': 7589.065, 'duration': 6.737}, {'end': 7600.947, 'text': 'this is the name after all and now we have our own two-way binding setup.', 'start': 7595.802, 'duration': 5.145}], 'summary': 'Using event target value for dynamic input updates and two-way binding.', 'duration': 51.3, 'max_score': 7415.31, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU7415310.jpg'}, {'end': 7933.137, 'src': 'embed', 'start': 7875.657, 'weight': 5, 'content': [{'end': 7879.758, 'text': 'You always have to import files to add them to the game.', 'start': 7875.657, 'duration': 4.101}, {'end': 7888.181, 'text': 'So we import the person component in our app.js file, and we also import the app CSS file here.', 'start': 7880.458, 'duration': 7.723}, {'end': 7896.146, 'text': 'Now it might look strange to import a CSS file into a JavaScript file like this, but thanks to Webpack,', 'start': 7888.941, 'duration': 7.205}, {'end': 7902.451, 'text': "which is the build tool which is in the end used by this React scripts package we're using implicitly here,", 'start': 7896.146, 'duration': 6.305}, {'end': 7911.834, 'text': 'Thanks to Webpack we can actually import CSS into JavaScript, though it will not really merge the two files or anything like that.', 'start': 7903.231, 'duration': 8.603}, {'end': 7916.695, 'text': 'It is just made aware of that CSS file and will handle that differently.', 'start': 7912.314, 'duration': 4.381}, {'end': 7920.637, 'text': "We'll basically import it into our HTML file.", 'start': 7917.016, 'duration': 3.621}, {'end': 7927.808, 'text': 'So in PersonJS, I will also add an import to .slash PersonCSS.', 'start': 7921.457, 'duration': 6.351}, {'end': 7930.493, 'text': 'And here you need the file extension.', 'start': 7928.269, 'duration': 2.224}, {'end': 7933.137, 'text': 'You can only omit it for JavaScript files.', 'start': 7930.673, 'duration': 2.464}], 'summary': 'Import person component and app css into javascript file using webpack.', 'duration': 57.48, 'max_score': 7875.657, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU7875657.jpg'}, {'end': 8278.37, 'src': 'embed', 'start': 8248.191, 'weight': 7, 'content': [{'end': 8249.832, 'text': 'So this might not be what you want.', 'start': 8248.191, 'duration': 1.641}, {'end': 8253.855, 'text': 'But on the other hand, you can use the normal CSS syntax.', 'start': 8250.833, 'duration': 3.022}, {'end': 8257.918, 'text': 'or you use inline styles, as you do here.', 'start': 8254.956, 'duration': 2.962}, {'end': 8263.602, 'text': 'then the styling is scoped to the component or to the element you actually add it to,', 'start': 8257.918, 'duration': 5.684}, {'end': 8268.404, 'text': 'but you have some restrictions of not being able to leverage the full power of CSS.', 'start': 8263.602, 'duration': 4.802}, {'end': 8271.646, 'text': "As I mentioned, I'll have a full module about this,", 'start': 8269.184, 'duration': 2.462}, {'end': 8278.37, 'text': 'because there is a golden way in the middle where you can scope styles and still use all the CSS features.', 'start': 8271.646, 'duration': 6.724}], 'summary': 'Css syntax can be used normally, or with inline styles, offering scoped styling but with some restrictions. a module will cover the golden middle way.', 'duration': 30.179, 'max_score': 8248.191, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU8248191.jpg'}], 'start': 7224.976, 'title': 'React event handling and styling with css', 'summary': 'Covers event handling and two-way binding in react, and also explores integrating css files into a react project and styling components using inline styles, highlighting their benefits and limitations.', 'chapters': [{'end': 7843.991, 'start': 7224.976, 'title': 'React event handling and two-way binding', 'summary': 'Covers event handling and two-way binding in react, explaining the use of anonymous functions for event execution, the potential inefficiency of certain syntax, the implementation of event handling for input changes, and the setup of two-way binding to dynamically update state and props.', 'duration': 619.015, 'highlights': ['The chapter covers event handling and two-way binding in React The lecture discusses the implementation of event handling and two-way binding in React, providing practical examples and explanations.', 'Explaining the use of anonymous functions for event execution The lecture emphasizes the use of anonymous functions for event execution, demonstrating its utility and execution flow in the context of React event handling.', 'The potential inefficiency of certain syntax The instructor cautions about potential inefficiency in using certain syntax, advising against its use unless necessary due to the possibility of React rerendering certain elements too frequently.', "The implementation of event handling for input changes The lecture delves into the implementation of event handling for input changes, explaining the use of special events like 'on change' and the execution of methods to update state based on user input.", 'The setup of two-way binding to dynamically update state and props The chapter demonstrates the setup of two-way binding to dynamically update the state and props, allowing for the propagation of changes in the input to update the state and reflect the changes in the user interface.']}, {'end': 8329.277, 'start': 7844.011, 'title': 'Styling react components with css and inline styles', 'summary': 'Explains how to integrate css files into a react project using webpack and import them into javascript files, as well as how to style components using inline styles in react, emphasizing the benefits and limitations of each approach.', 'duration': 485.266, 'highlights': ["CSS files need to be imported into the React project using Webpack to be included in the build workflow. By default, no file is included in the project's code, requiring the use of Webpack to import CSS files into the JavaScript files.", 'Webpack allows for the import of CSS into JavaScript, enabling the addition of CSS styles to the HTML file dynamically. Webpack facilitates the import of CSS into JavaScript, dynamically adding the styles to the HTML file and managing the imports.', 'Using inline styles in React allows for scoped styling, but it comes with limitations, such as the inability to leverage the full power of CSS. Inline styles in React enable scoped styling but have limitations, such as not being able to leverage the full power of CSS.']}], 'duration': 1104.301, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pgAvVxowaYU/pics/pgAvVxowaYU7224976.jpg', 'highlights': ['The chapter covers event handling and two-way binding in React.', 'The lecture discusses the implementation of event handling and two-way binding in React, providing practical examples and explanations.', 'The setup of two-way binding to dynamically update state and props.', 'The implementation of event handling for input changes.', 'Explaining the use of anonymous functions for event execution.', 'CSS files need to be imported into the React project using Webpack to be included in the build workflow.', 'Webpack allows for the import of CSS into JavaScript, enabling the addition of CSS styles to the HTML file dynamically.', 'Using inline styles in React allows for scoped styling, but it comes with limitations, such as the inability to leverage the full power of CSS.', 'The potential inefficiency of certain syntax.', 'The instructor cautions about potential inefficiency in using certain syntax, advising against its use unless necessary due to the possibility of React rerendering certain elements too frequently.']}], 'highlights': ['The course encompasses all core features of React, such as building components, utilizing Redux for improved state management, and employing the React Router, culminating in the development of the Burger Builder application to solidify understanding.', "React's emphasis on components allows the creation of reusable, maintainable, and manageable pieces of code, promoting code reusability and simplifying teamwork in web development projects.", 'The chapter introduces the concept of React components and the creation of reusable components using React and JSX.', 'JSX syntax allows for easier rendering of custom components by transforming the code to normal JavaScript, enhancing the development process.', 'Props in React enable dynamic configuration of components, allowing for the passing of attributes and properties to customize the rendered output.', 'Components in React can be composed of small, reusable pieces with their own contained logic, providing the opportunity to build amazing applications.', 'In large applications, the ability to compose the entire application with reusable pieces offers significant potential for creating maintainable and easy to manage pieces.', 'Using React helps with managing UI state in bigger JavaScript applications, reducing the need to manually target elements in the DOM and simplifying the process of dynamically adding and removing elements, as demonstrated in the course project of building a highly dynamic app for creating burgers.', 'The importance of optimizing code for performance is emphasized, with a recommendation to use next generation JavaScript features for leaner, faster, and less error-prone code.', 'The need for a build workflow to support next-generation JavaScript features and ship code for broader browser support and productivity improvement.', 'The package.json file contains three dependencies in this project, created by create react app.', 'The react scripts package offers build workflow, development server, and next generation JavaScript feature support.', 'The node modules folder holds all the dependencies and sub-dependencies of our project, automatically generated by create react scripts upon running npm install.', "The index.html file is the single page in the project and serves as the entry point for the web server, with the 'div' element having the id 'root' playing a crucial role in mounting the React application.", "The source folder contains the essential files for the React application, with the index.js file accessing the 'div' element with the id 'root' and rendering the React application using the 'render' method.", 'The app.js file contains the first and only React component in the starting project, involving JSX and further exploration in subsequent lectures.', 'React 16 allows returning adjacent elements in a JSX expression, emphasizing the best practice of wrapping everything into one root element per component.', 'Components in React allow for more maintainable code and can prevent overcrowding of the main app file, making it easier to manage for larger applications.', 'The chapter explains how to use props to pass structured HTML content to React components, with emphasis on accessing props and the reserved word children.', "The special property 'state' can be defined in any component which extends component, and it is managed from inside the component, unlike props which are set and passed from outside.", 'React updates the DOM based on changes in state and props, with state and props being the only two things that lead React to update the DOM if something changed.', "The limitations of using state within function components are highlighted, as it's explained that state cannot be used in function components due to the absence of a class extending component and the setState method.", 'The chapter covers event handling and two-way binding in React.', 'The lecture discusses the implementation of event handling and two-way binding in React, providing practical examples and explanations.', 'The setup of two-way binding to dynamically update state and props.', 'The implementation of event handling for input changes.', 'Explaining the use of anonymous functions for event execution.', 'Webpack allows for the import of CSS into JavaScript, enabling the addition of CSS styles to the HTML file dynamically.']}