title
React Fundamentals - Full Course for Beginners

description
This is an introductory React course / tutorial which will teach you the magic of React.js. React is a JavaScript library, which lets you build user interfaces using separate components. ⭐️Course Contents ⭐️ ⌨️1. (0:58) Setting React Environment ⌨️2. (2:45) React Elements ⌨️3. (6:40) JSX ⌨️4. (9:37) Components ⌨️5. (14:09) Props ⌨️6. (17:38) State ⌨️7. (20:17) Lifecycle (componentDidMount) ⌨️8. (22:30) Asynchronous Calls ⌨️9. (26:26) Containers ⌨️10. (29:42) Lists and Keys ⌨️11. (34:47) Refactoring List Component ⌨️12. (36:30) Forms (Input) ⌨️13. (40:03) Conditional Rendering ⌨️14. (45:34) Images (Loader Component) ⌨️15. (49:15) Setting Up React Router ⌨️16. (54:02) Setting Routes ⌨️17. (56:53) Using Route Params Course developed by Edvinas Daugirdas. -- Learn to code for free and get a developer job: https://www.freecodecamp.com Read hundreds of articles on programming: https://medium.freecodecamp.com

detail
{'title': 'React Fundamentals - Full Course for Beginners', 'heatmap': [{'end': 426.299, 'start': 379.602, 'weight': 0.843}, {'end': 1078.444, 'start': 1019.736, 'weight': 0.858}, {'end': 1227.407, 'start': 1145.256, 'weight': 0.73}, {'end': 1383.227, 'start': 1294.25, 'weight': 0.791}, {'end': 1493.97, 'start': 1451.657, 'weight': 0.702}, {'end': 1610.593, 'start': 1556.153, 'weight': 0.831}, {'end': 1762.529, 'start': 1671.411, 'weight': 1}, {'end': 1954.095, 'start': 1834.879, 'weight': 0.996}, {'end': 2415.112, 'start': 2365.302, 'weight': 0.817}, {'end': 2916.087, 'start': 2869.275, 'weight': 0.772}, {'end': 2995.267, 'start': 2946.172, 'weight': 0.713}, {'end': 3111.985, 'start': 3024.244, 'weight': 0.805}, {'end': 3271.243, 'start': 3164.357, 'weight': 0.92}, {'end': 3371.063, 'start': 3327.133, 'weight': 0.976}], 'summary': 'This full react fundamentals course for beginners covers creating a single page application to search popular tv series, setting up react environment, rendering functional components, managing app state, and implementing dynamic series fetching and routing, emphasizing important syntax and best practices.', 'chapters': [{'end': 44.607, 'segs': [{'end': 44.607, 'src': 'embed', 'start': 0.249, 'weight': 0, 'content': [{'end': 4.951, 'text': "Hi, my name is Ed and I will be your instructor for this React's fundamentals course.", 'start': 0.249, 'duration': 4.702}, {'end': 7.573, 'text': 'In this series, we will be creating a simple,', 'start': 5.772, 'duration': 1.801}, {'end': 13.055, 'text': 'React Power single page application which will allow us to search and investigate through popular TV series.', 'start': 7.573, 'duration': 5.482}, {'end': 22.44, 'text': 'We will cover such topics as GSX, components and containers, state, props, conditional rendering, React Router and much much more.', 'start': 13.836, 'duration': 8.604}, {'end': 26.925, 'text': "What you'll need is some knowledge of JavaScript, HTML and CSS.", 'start': 23.32, 'duration': 3.605}, {'end': 33.914, 'text': "The course will contain some ES6 and ES7 syntax, but don't worry, I'll explain everything along the way.", 'start': 27.626, 'duration': 6.288}, {'end': 40.423, 'text': 'I will not be assuming that you know anything about React, so each and every line of code will be explained with great detail.', 'start': 34.856, 'duration': 5.567}, {'end': 44.607, 'text': 'In this course, you will not only learn how to write React code,', 'start': 41.164, 'duration': 3.443}], 'summary': 'React fundamentals course covering gsx, components, state, props, etc. no prior react knowledge assumed.', 'duration': 44.358, 'max_score': 0.249, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ied4aZxUzc/pics/6Ied4aZxUzc249.jpg'}], 'start': 0.249, 'title': 'React fundamentals course', 'summary': 'Will cover react fundamentals, including creating a single page application to search and investigate popular tv series. it will require knowledge of javascript, html and css, with explanations of es6 and es7 syntax provided.', 'chapters': [{'end': 44.607, 'start': 0.249, 'title': 'React fundamentals course', 'summary': 'Will cover react fundamentals, including creating a single page application to search and investigate popular tv series, and will require knowledge of javascript, html and css, with explanations of es6 and es7 syntax provided.', 'duration': 44.358, 'highlights': ['The chapter will cover creating a single page application using React to search and investigate popular TV series.', 'The course will require some knowledge of JavaScript, HTML, and CSS.', 'Explanations of ES6 and ES7 syntax will be provided throughout the course.']}], 'duration': 44.358, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ied4aZxUzc/pics/6Ied4aZxUzc249.jpg', 'highlights': ['The chapter will cover creating a single page application using React to search and investigate popular TV series.', 'Explanations of ES6 and ES7 syntax will be provided throughout the course.', 'The course will require some knowledge of JavaScript, HTML, and CSS.']}, {'end': 251.076, 'segs': [{'end': 251.076, 'src': 'embed', 'start': 44.607, 'weight': 0, 'content': [{'end': 50.451, 'text': "but you'll also find out how to maintain and organize your code base to keep your code as clean and readable as possible.", 'start': 44.607, 'duration': 5.844}, {'end': 56.236, 'text': 'So pick up your IDE and try to code this app from scratch along with me in this React Fundamentals course.', 'start': 50.992, 'duration': 5.244}, {'end': 64.063, 'text': "We will be using an official React boilerplate created by Facebook's team.", 'start': 60.862, 'duration': 3.201}, {'end': 68.507, 'text': 'You also need to install Node.js on your local machine.', 'start': 64.724, 'duration': 3.783}, {'end': 74.671, 'text': "I already have it, so I'll skip the installation part, but you can download it on nodejs.org.", 'start': 69.087, 'duration': 5.584}, {'end': 76.872, 'text': "Let's go back to the GitHub page.", 'start': 75.652, 'duration': 1.22}, {'end': 84.117, 'text': 'And first of all, what you need to do is you need to npm install create-react-app with the global flag.', 'start': 77.153, 'duration': 6.964}, {'end': 86.939, 'text': 'And this will take a few seconds.', 'start': 85.418, 'duration': 1.521}, {'end': 97.399, 'text': 'Now that we have it installed, you can go back to your Create React App GitHub page, scroll down a little bit and here you can see the quick overview.', 'start': 89.335, 'duration': 8.064}, {'end': 108.965, 'text': "I don't need to use this NPX, so I'll just copy Create React App, paste it in, and the first argument is the folder name.", 'start': 98.8, 'duration': 10.165}, {'end': 114.148, 'text': 'I can actually show you if I remove the folder name, if I press Enter.', 'start': 109.085, 'duration': 5.063}, {'end': 118.832, 'text': 'it will say that I need to specify the project directory.', 'start': 115.99, 'duration': 2.842}, {'end': 121.654, 'text': 'For example, Create React App, My React App.', 'start': 119.532, 'duration': 2.122}, {'end': 128.499, 'text': "And I'll do just that and I'll name my app tv-series-app.", 'start': 122.474, 'duration': 6.025}, {'end': 133.522, 'text': 'So this will probably take a while, a minute or two.', 'start': 130.68, 'duration': 2.842}, {'end': 150.685, 'text': "Now that our app has successfully been created, I'll change directories to the TV Series app and I'll type in npm start, press enter,", 'start': 133.542, 'duration': 17.143}, {'end': 153.908, 'text': 'and this should spin up the development server.', 'start': 150.685, 'duration': 3.223}, {'end': 162.798, 'text': "If you're spinning it up for the first time it will probably take a while and congratulations on setting up your React environment.", 'start': 155.23, 'duration': 7.568}, {'end': 172.522, 'text': "What you're seeing right now is the boilerplate that Create React App provides us.", 'start': 168.919, 'duration': 3.603}, {'end': 175.704, 'text': "Let's open up the code editor and see what's inside.", 'start': 173.082, 'duration': 2.622}, {'end': 180.968, 'text': "I'll be using Atom, but any other IDE will work just fine.", 'start': 177.405, 'duration': 3.563}, {'end': 186.592, 'text': 'The code for your app lives inside the src folder, so we will be spending the majority of our time here.', 'start': 180.988, 'duration': 5.604}, {'end': 190.215, 'text': "The main file is syntax.js, so let's open that up.", 'start': 187.973, 'duration': 2.242}, {'end': 194.037, 'text': 'And here we can find five imports.', 'start': 191.855, 'duration': 2.182}, {'end': 196.139, 'text': "Let's talk about each and every one of them.", 'start': 194.798, 'duration': 1.341}, {'end': 199.502, 'text': 'The first one is the React library itself.', 'start': 197.02, 'duration': 2.482}, {'end': 202.084, 'text': "Without it, we wouldn't be able to create React elements.", 'start': 199.982, 'duration': 2.102}, {'end': 210.691, 'text': 'The second import is React DOM, which initially was part of React library, but was split into its own eventually.', 'start': 203.245, 'duration': 7.446}, {'end': 215.255, 'text': 'It works as glue between React elements and the DOM.', 'start': 210.711, 'duration': 4.544}, {'end': 219.399, 'text': "And usually you will just use it to render your app as we're doing here.", 'start': 215.796, 'duration': 3.603}, {'end': 224.265, 'text': 'The third import is an index.css file.', 'start': 220.942, 'duration': 3.323}, {'end': 228.049, 'text': 'So nothing too interesting going on here, just a simple CSS file.', 'start': 225.166, 'duration': 2.883}, {'end': 233.234, 'text': "Fourth import is the app component, which we're currently rendering.", 'start': 229.05, 'duration': 4.184}, {'end': 234.596, 'text': 'You can open that up.', 'start': 233.935, 'duration': 0.661}, {'end': 238.62, 'text': "Don't worry if you don't understand what's going on here.", 'start': 235.156, 'duration': 3.464}, {'end': 242.564, 'text': 'Eventually you will after a couple of lessons.', 'start': 239.421, 'duration': 3.143}, {'end': 251.076, 'text': 'And the last import is a service worker, which will let the app load faster on subsequent visits in production.', 'start': 244.229, 'duration': 6.847}], 'summary': 'Learn to set up a react app using create-react-app, react boilerplate, and node.js, and explore the main files and imports within the app.', 'duration': 206.469, 'max_score': 44.607, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ied4aZxUzc/pics/6Ied4aZxUzc44607.jpg'}], 'start': 44.607, 'title': 'React environment setup and code overview', 'summary': "Covers setting up and installing create react app, creating a react environment for a tv series app, and provides an overview of the react app code including main file syntax.js and five imports. it also details the process of using an official react boilerplate, installing node.js, running 'npm install' command, spinning up the development server with npm start, and exploring create react app boilerplate.", 'chapters': [{'end': 114.148, 'start': 44.607, 'title': 'React fundamentals: setting up and installing create react app', 'summary': "Outlines the process of setting up and installing create react app, including using an official react boilerplate, installing node.js, and running the 'npm install' command to set up the environment.", 'duration': 69.541, 'highlights': ['The chapter provides a step-by-step guide on installing Create React App and using an official React boilerplate.', 'It emphasizes the importance of maintaining and organizing code to keep it clean and readable.', "The process involves installing Node.js on the local machine and running 'npm install create-react-app' with the global flag.", "The chapter highlights the quick overview of Create React App and demonstrates the use of the 'create-react-app' command with the folder name as an argument."]}, {'end': 180.968, 'start': 115.99, 'title': 'Setting up react environment for tv series app', 'summary': 'Details setting up a react environment for a tv series app, including creating the project directory, spinning up the development server with npm start, and exploring the provided create react app boilerplate.', 'duration': 64.978, 'highlights': ["The chapter demonstrates creating a project directory named 'tv-series-app' using Create React App.", "Spinning up the development server with 'npm start' is highlighted as a crucial step in setting up the React environment.", 'Exploring the provided boilerplate in the code editor, particularly using Atom, is mentioned as an essential part of the process.']}, {'end': 251.076, 'start': 180.988, 'title': 'React app code overview', 'summary': 'Covers the overview of the react app code, including the main file syntax.js, five imports - react, react dom, index.css, app component, and service worker.', 'duration': 70.088, 'highlights': ['The main file is syntax.js, containing five imports.', 'The first import is the React library itself, essential for creating React elements.', 'The second import is React DOM, serving as glue between React elements and the DOM.', 'The last import is a service worker, improving app loading speed on subsequent visits in production.']}], 'duration': 206.469, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ied4aZxUzc/pics/6Ied4aZxUzc44607.jpg', 'highlights': ['The chapter provides a step-by-step guide on installing Create React App and using an official React boilerplate.', "Spinning up the development server with 'npm start' is highlighted as a crucial step in setting up the React environment.", "The process involves installing Node.js on the local machine and running 'npm install create-react-app' with the global flag.", 'The main file is syntax.js, containing five imports.', 'Exploring the provided boilerplate in the code editor, particularly using Atom, is mentioned as an essential part of the process.', 'It emphasizes the importance of maintaining and organizing code to keep it clean and readable.', "The chapter highlights the quick overview of Create React App and demonstrates the use of the 'create-react-app' command with the folder name as an argument.", 'The first import is the React library itself, essential for creating React elements.', 'The second import is React DOM, serving as glue between React elements and the DOM.', 'The last import is a service worker, improving app loading speed on subsequent visits in production.', "The chapter demonstrates creating a project directory named 'tv-series-app' using Create React App."]}, {'end': 932.685, 'segs': [{'end': 277.444, 'src': 'embed', 'start': 251.997, 'weight': 0, 'content': [{'end': 259.526, 'text': "We won't be looking into it as it's out of the scope of this course, but I will provide a link below and you can read about it if you like.", 'start': 251.997, 'duration': 7.529}, {'end': 263.548, 'text': "So let's talk about React DOM render method.", 'start': 260.885, 'duration': 2.663}, {'end': 265.811, 'text': 'It can take up to three arguments.', 'start': 263.908, 'duration': 1.903}, {'end': 269.435, 'text': 'The first one is the React element that we want to render.', 'start': 266.291, 'duration': 3.144}, {'end': 274.18, 'text': 'The second one is the DOM container in which we want to render our React element.', 'start': 270.196, 'duration': 3.984}, {'end': 277.444, 'text': 'And the third one is an optional argument.', 'start': 275.041, 'duration': 2.403}], 'summary': 'The react dom render method can take up to three arguments: the react element, the dom container, and an optional argument.', 'duration': 25.447, 'max_score': 251.997, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ied4aZxUzc/pics/6Ied4aZxUzc251997.jpg'}, {'end': 483.575, 'src': 'heatmap', 'start': 379.602, 'weight': 1, 'content': [{'end': 387.007, 'text': 'take the greeting variable, pass it into the render method,', 'start': 379.602, 'duration': 7.405}, {'end': 404.819, 'text': "save index.js and now we're seeing our newly created React element with hello world greeting attached inside app.js.", 'start': 387.007, 'duration': 17.812}, {'end': 406.3, 'text': "we're seeing a different kind of syntax.", 'start': 404.819, 'duration': 1.481}, {'end': 415.174, 'text': "This bit of code also creates a React element, but it's using a syntax extension to JavaScript, which is called JSX.", 'start': 407.571, 'duration': 7.603}, {'end': 419.756, 'text': 'As you can probably tell, this looks a lot cleaner and readable.', 'start': 415.975, 'duration': 3.781}, {'end': 426.299, 'text': "So let's refactor our newly created React element to use JSX.", 'start': 420.156, 'duration': 6.143}, {'end': 431.281, 'text': "Syntax wise, it's really similar to plain JavaScript.", 'start': 428, 'duration': 3.281}, {'end': 436.183, 'text': 'So just open up h1 tags and type in hello world.', 'start': 431.401, 'duration': 4.782}, {'end': 444.418, 'text': "Save it and the result on our page hasn't changed one bit.", 'start': 437.87, 'duration': 6.548}, {'end': 457.371, 'text': 'Under the hood, Create React App is transpiling JSX elements to React elements with the help of transpiler called Babel.', 'start': 446.727, 'duration': 10.644}, {'end': 467.714, 'text': "If you're interested how the transpiling works, I will provide a link below and you can read more about it if you like.", 'start': 458.091, 'duration': 9.623}, {'end': 475.417, 'text': 'JSX also fully supports JavaScript, so you can embed expressions inside of it.', 'start': 469.275, 'duration': 6.142}, {'end': 483.575, 'text': "Let's create a simple function which will just return the current date.", 'start': 476.451, 'duration': 7.124}], 'summary': 'Introduction to using jsx in react, its syntax and transpilation process.', 'duration': 67.6, 'max_score': 379.602, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ied4aZxUzc/pics/6Ied4aZxUzc379602.jpg'}, {'end': 871.794, 'src': 'embed', 'start': 805.999, 'weight': 3, 'content': [{'end': 815.17, 'text': 'Functional components are called functional because they are literally just JavaScript functions which return a React element.', 'start': 805.999, 'duration': 9.171}, {'end': 819.936, 'text': "In our case, we're just returning a simple GSX.", 'start': 815.51, 'duration': 4.426}, {'end': 830.551, 'text': "It's really important to have your own custom component capitalized since that's the syntax convention that JSX uses.", 'start': 821.323, 'duration': 9.228}, {'end': 835.095, 'text': 'Lowercase names will refer to built-in components.', 'start': 831.692, 'duration': 3.403}, {'end': 846.105, 'text': 'So it will be just considered as simple HTML tags and capitalized names will refer to your custom components.', 'start': 835.515, 'duration': 10.59}, {'end': 860.432, 'text': 'Now that we have written our own React component, we can make app.js a bit cleaner and create a separate file for the intro component.', 'start': 852.23, 'duration': 8.202}, {'end': 865.753, 'text': 'Under the src folder, create a folder with the name of components.', 'start': 861.292, 'duration': 4.461}, {'end': 871.794, 'text': 'Inside the components folder, create a folder with the name of intro.', 'start': 868.494, 'duration': 3.3}], 'summary': 'Functional components in react are javascript functions, returning a react element. custom components should be capitalized for jsx syntax convention.', 'duration': 65.795, 'max_score': 805.999, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ied4aZxUzc/pics/6Ied4aZxUzc805999.jpg'}, {'end': 932.685, 'src': 'embed', 'start': 908.118, 'weight': 6, 'content': [{'end': 916.9, 'text': "by the way, if you're wondering why, we're using a sort of different syntax here, this is just known as a shorthand syntax for arrow functions.", 'start': 908.118, 'duration': 8.782}, {'end': 922.922, 'text': 'so what goes after the parentheses is returned from this arrow function?', 'start': 916.9, 'duration': 6.022}, {'end': 932.685, 'text': "and also one good thing to know is that if you're passing only one argument into your arrow function, you can delete the additional parentheses here.", 'start': 922.922, 'duration': 9.763}], 'summary': 'Shorthand syntax for arrow functions simplifies code and allows removal of extra parentheses.', 'duration': 24.567, 'max_score': 908.118, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ied4aZxUzc/pics/6Ied4aZxUzc908118.jpg'}], 'start': 251.997, 'title': 'React dom render method and creating functional component', 'summary': 'Covers react dom render method, jsx syntax, and rendering a fully functional react component with examples. it also discusses creating a functional component in react, emphasizing the use of arrow functions and the importance of capitalizing custom components.', 'chapters': [{'end': 725.625, 'start': 251.997, 'title': 'React dom render method', 'summary': 'Covers the react dom render method, jsx syntax, and rendering a fully functional react component in an app, with examples such as creating and rendering react elements, using jsx, and modifying components.', 'duration': 473.628, 'highlights': ['The React DOM render method can take up to three arguments: the React element to render, the DOM container, and an optional callback function.', 'JSX syntax extension to JavaScript allows cleaner and readable code, and Create React App transpiles JSX to React elements using Babel.', 'Rendering a fully functional React component involves using a different syntax similar to HTML, and making necessary changes to fit the requirements.']}, {'end': 932.685, 'start': 727.182, 'title': 'Creating our first functional component', 'summary': 'Discusses creating a functional component in react, emphasizing the use of arrow functions and the importance of capitalizing custom components. it also covers organizing components into separate files and folders. it introduces the concept of functional components as javascript functions returning a react element.', 'duration': 205.503, 'highlights': ['Functional components are called functional because they are literally just JavaScript functions which return a React element.', 'Importance of capitalizing custom components.', 'Organizing components into separate files and folders.', 'Use of arrow functions for creating a variable and shorthand syntax.']}], 'duration': 680.688, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ied4aZxUzc/pics/6Ied4aZxUzc251997.jpg', 'highlights': ['The React DOM render method can take up to three arguments: the React element to render, the DOM container, and an optional callback function.', 'JSX syntax extension to JavaScript allows cleaner and readable code, and Create React App transpiles JSX to React elements using Babel.', 'Rendering a fully functional React component involves using a different syntax similar to HTML, and making necessary changes to fit the requirements.', 'Functional components are called functional because they are literally just JavaScript functions which return a React element.', 'Importance of capitalizing custom components.', 'Organizing components into separate files and folders.', 'Use of arrow functions for creating a variable and shorthand syntax.']}, {'end': 1538.602, 'segs': [{'end': 1006.199, 'src': 'embed', 'start': 972.28, 'weight': 3, 'content': [{'end': 977.525, 'text': 'So inside index.js, we have one argument passing in into the intro component.', 'start': 972.28, 'duration': 5.245}, {'end': 986.51, 'text': 'and here we can use those custom properties with the help of the props object.', 'start': 978.786, 'duration': 7.724}, {'end': 994.894, 'text': 'so props is just a simple javascript object with all of your custom properties combined inside that app.js.', 'start': 986.51, 'duration': 8.384}, {'end': 1006.199, 'text': "let's create a custom property to our intro component with the name of message, and here we will add a string which will say here you can find,", 'start': 994.894, 'duration': 11.305}], 'summary': 'Index.js passes one argument into intro component using props.', 'duration': 33.919, 'max_score': 972.28, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ied4aZxUzc/pics/6Ied4aZxUzc972280.jpg'}, {'end': 1098.946, 'src': 'heatmap', 'start': 1019.736, 'weight': 4, 'content': [{'end': 1034.405, 'text': "and inside the intro component let's delete this string and just access the message property inside our props object, save.", 'start': 1019.736, 'duration': 14.669}, {'end': 1043.045, 'text': 'And as you can see, we are rendering our intro component with custom property.', 'start': 1037.637, 'duration': 5.408}, {'end': 1048.592, 'text': "By the way, you can pass anything you'd like.", 'start': 1046.269, 'duration': 2.323}, {'end': 1055.161, 'text': 'So not only a string works, you can pass in a boolean, a number, array or even functions.', 'start': 1048.632, 'duration': 6.529}, {'end': 1064.4, 'text': "It's time to start adding additional functionality to our app component.", 'start': 1060.819, 'duration': 3.581}, {'end': 1070.642, 'text': 'Components that extend React component class have additional features and one of them is state.', 'start': 1065.12, 'duration': 5.522}, {'end': 1078.444, 'text': 'But what is state? Think of it just as plain JavaScript object to which your component reacts and renders whatever is needed.', 'start': 1071.422, 'duration': 7.022}, {'end': 1086.847, 'text': "Let's create our state object and add a property to it with the name of series.", 'start': 1079.505, 'duration': 7.342}, {'end': 1090.428, 'text': 'And for now, this will only be just an empty right.', 'start': 1087.207, 'duration': 3.221}, {'end': 1098.946, 'text': 'We can access the series array inside the render function by simply getting it from our state object.', 'start': 1092.042, 'duration': 6.904}], 'summary': 'React component can access custom properties, state, and render based on it.', 'duration': 27.524, 'max_score': 1019.736, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ied4aZxUzc/pics/6Ied4aZxUzc1019736.jpg'}, {'end': 1227.407, 'src': 'heatmap', 'start': 1136.094, 'weight': 5, 'content': [{'end': 1145.176, 'text': "So let's add another folder to it with the name of app and move everything that is connected to the app component to this folder.", 'start': 1136.094, 'duration': 9.082}, {'end': 1148.557, 'text': 'So app.css, app.js and app.test.js.', 'start': 1145.256, 'duration': 3.301}, {'end': 1159.382, 'text': 'Since we moved it to a different folder we need to change the directory for our app component.', 'start': 1152.8, 'duration': 6.582}, {'end': 1161.703, 'text': 'So just like that.', 'start': 1160.002, 'duration': 1.701}, {'end': 1170.886, 'text': 'Also we need to change the name of our app component since we already have a folder name for it.', 'start': 1163.403, 'duration': 7.483}, {'end': 1174.127, 'text': "So just to make it easier I'll just rename it to index.js.", 'start': 1171.326, 'duration': 2.801}, {'end': 1187.229, 'text': "That way we can import it just like our intro component and we don't need to specify the additional JavaScript file.", 'start': 1175.886, 'duration': 11.343}, {'end': 1192.851, 'text': 'Okay, so everything is done inside our app folder.', 'start': 1189.83, 'duration': 3.021}, {'end': 1199.433, 'text': "So what's left is just to change the import inside index.js.", 'start': 1192.991, 'duration': 6.442}, {'end': 1213.616, 'text': "So since we moved this to components folder, Let's add components, save index.js, and we have the same page rendering once again.", 'start': 1200.793, 'duration': 12.823}, {'end': 1227.407, 'text': 'React class components have access to so-called lifecycle hooks, in which you can wind your code when a particular component mounts unmounts,', 'start': 1213.636, 'duration': 13.771}], 'summary': 'Reorganized app components, updated imports, and utilized react lifecycle hooks.', 'duration': 34.792, 'max_score': 1136.094, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ied4aZxUzc/pics/6Ied4aZxUzc1136094.jpg'}, {'end': 1238.282, 'src': 'embed', 'start': 1200.793, 'weight': 6, 'content': [{'end': 1213.616, 'text': "So since we moved this to components folder, Let's add components, save index.js, and we have the same page rendering once again.", 'start': 1200.793, 'duration': 12.823}, {'end': 1227.407, 'text': 'React class components have access to so-called lifecycle hooks, in which you can wind your code when a particular component mounts unmounts,', 'start': 1213.636, 'duration': 13.771}, {'end': 1229.829, 'text': 'receive new props and many other situations.', 'start': 1227.407, 'duration': 2.422}, {'end': 1238.282, 'text': "Let's take a look into a method called component didMount.", 'start': 1230.589, 'duration': 7.693}], 'summary': 'Moving to components folder led to successful page rendering with react class components accessing lifecycle hooks like componentdidmount.', 'duration': 37.489, 'max_score': 1200.793, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ied4aZxUzc/pics/6Ied4aZxUzc1200793.jpg'}, {'end': 1428.194, 'src': 'heatmap', 'start': 1294.25, 'weight': 0, 'content': [{'end': 1303.777, 'text': "So let's take the series property of our state object and assign to it our newly created series right.", 'start': 1294.25, 'duration': 9.527}, {'end': 1313.284, 'text': 'Save index.js, go back to your page and the length of the series changed after two seconds.', 'start': 1305.558, 'duration': 7.726}, {'end': 1319.711, 'text': "Let's go back to index.js and I wanna show you a trick.", 'start': 1316.049, 'duration': 3.662}, {'end': 1328.637, 'text': "So inside your object, if you're using the same names of your property, you can actually delete this bit of code.", 'start': 1320.852, 'duration': 7.785}, {'end': 1338.443, 'text': 'And this will just take the series property and assign our newly created series array to it.', 'start': 1330.158, 'duration': 8.285}, {'end': 1341.565, 'text': 'So save index.js, go back to your page.', 'start': 1338.843, 'duration': 2.722}, {'end': 1348.018, 'text': 'Refresh it and the length of the series should be 2 after 2 seconds.', 'start': 1342.591, 'duration': 5.427}, {'end': 1358.953, 'text': 'In order to send a request to the server, first of all we need to install a library which will let us do it.', 'start': 1353.886, 'duration': 5.067}, {'end': 1361.27, 'text': 'There are a lot of options out there.', 'start': 1360.009, 'duration': 1.261}, {'end': 1363.191, 'text': 'Well, I personally love to use fetch.', 'start': 1361.49, 'duration': 1.701}, {'end': 1366.994, 'text': 'We can install fetch with node package manager.', 'start': 1363.972, 'duration': 3.022}, {'end': 1372.779, 'text': "I'll just copy this bit of code and pass it into the common line.", 'start': 1367.755, 'duration': 5.024}, {'end': 1374.6, 'text': 'Press Enter.', 'start': 1373.9, 'duration': 0.7}, {'end': 1383.227, 'text': "After installing fetch, let's open up our app again by typing in npm start.", 'start': 1377.442, 'duration': 5.785}, {'end': 1390.353, 'text': 'Okay, so we have our app running back again.', 'start': 1388.311, 'duration': 2.042}, {'end': 1396.738, 'text': "So let's go to the code editor and open up index.js file inside our app component.", 'start': 1390.413, 'duration': 6.325}, {'end': 1398.88, 'text': "And let's import fetch.", 'start': 1397.098, 'duration': 1.782}, {'end': 1406.546, 'text': "Let's just send out a request to the API whenever our app component renders.", 'start': 1402.823, 'duration': 3.723}, {'end': 1410.65, 'text': 'Obviously, we want to do that inside component did mod method.', 'start': 1407.387, 'duration': 3.263}, {'end': 1414.213, 'text': "Let's get rid of this bit of code and type in fetch.", 'start': 1411.09, 'duration': 3.123}, {'end': 1418.843, 'text': 'which will take a URL as its first argument.', 'start': 1415.359, 'duration': 3.484}, {'end': 1428.194, 'text': 'We will be using a service called TV Maze API which will let us obtain different kind of information for various TV series.', 'start': 1419.864, 'duration': 8.33}], 'summary': 'Using fetch to send a request to tv maze api for tv series information, updating state property to newly created series and achieving a length of 2 after 2 seconds.', 'duration': 64.222, 'max_score': 1294.25, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ied4aZxUzc/pics/6Ied4aZxUzc1294250.jpg'}, {'end': 1493.97, 'src': 'heatmap', 'start': 1451.657, 'weight': 0.702, 'content': [{'end': 1457.841, 'text': "So for now, let's just console log the response object.", 'start': 1451.657, 'duration': 6.184}, {'end': 1468.929, 'text': "and go back to our page, open the console and here we can see that we're getting back the response object.", 'start': 1460.203, 'duration': 8.726}, {'end': 1476.395, 'text': 'what we need to do right now is parse the results and get the json from this object.', 'start': 1468.929, 'duration': 7.466}, {'end': 1480.442, 'text': "it's really easy to do so.", 'start': 1478.621, 'duration': 1.821}, {'end': 1493.97, 'text': 'what we need to type in is response json, and this will just return the json from the response object, obviously.', 'start': 1480.442, 'duration': 13.528}], 'summary': 'Console log response object, parse results to get json data.', 'duration': 42.313, 'max_score': 1451.657, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ied4aZxUzc/pics/6Ied4aZxUzc1451657.jpg'}, {'end': 1493.97, 'src': 'embed', 'start': 1460.203, 'weight': 2, 'content': [{'end': 1468.929, 'text': "and go back to our page, open the console and here we can see that we're getting back the response object.", 'start': 1460.203, 'duration': 8.726}, {'end': 1476.395, 'text': 'what we need to do right now is parse the results and get the json from this object.', 'start': 1468.929, 'duration': 7.466}, {'end': 1480.442, 'text': "it's really easy to do so.", 'start': 1478.621, 'duration': 1.821}, {'end': 1493.97, 'text': 'what we need to type in is response json, and this will just return the json from the response object, obviously.', 'start': 1480.442, 'duration': 13.528}], 'summary': 'Parsing response object to retrieve json data is easy using response.json method.', 'duration': 33.767, 'max_score': 1460.203, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ied4aZxUzc/pics/6Ied4aZxUzc1460203.jpg'}], 'start': 932.685, 'title': 'React component properties and state', 'summary': "Discusses passing custom properties to react components, creating and accessing state objects, organizing components, and utilizing lifecycle hooks like 'componentdidmount' for updating state and triggering re-rendering. it also demonstrates using fetch to send requests to the tv maze api to obtain tv series information, including parsing the response object and using promises for asynchronous operations.", 'chapters': [{'end': 1293.349, 'start': 932.685, 'title': 'React component properties and state', 'summary': "Discusses passing custom properties to react components using the 'props' object, creating and accessing state objects, organizing components into folders, and utilizing lifecycle hooks such as 'componentdidmount' to update state and trigger re-rendering.", 'duration': 360.664, 'highlights': ["Passing custom properties to React components using the 'props' object", 'Creating and accessing state objects in React components', 'Organizing components into folders for better project organization', "Utilizing lifecycle hooks such as 'componentDidMount' to update state and trigger re-rendering"]}, {'end': 1538.602, 'start': 1294.25, 'title': 'Using fetch to send requests and obtain tv series information', 'summary': 'Demonstrates using fetch to send a request to the tv maze api to obtain information for tv series, including a demonstration of parsing the response object to extract json data and using promises to handle asynchronous operations.', 'duration': 244.352, 'highlights': ['Using fetch to send a request to the TV Maze API to obtain information for TV series, including parsing the response object to extract JSON data and using promises to handle asynchronous operations.', 'Demonstrating the process of installing fetch with node package manager and sending a request to the API to obtain information for TV series.', 'Showing how to access the response object, parse the results, and retrieve the JSON data using promises to handle asynchronous operations.']}], 'duration': 605.917, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ied4aZxUzc/pics/6Ied4aZxUzc932685.jpg', 'highlights': ['Using fetch to send a request to the TV Maze API to obtain information for TV series, including parsing the response object to extract JSON data and using promises to handle asynchronous operations.', 'Demonstrating the process of installing fetch with node package manager and sending a request to the API to obtain information for TV series.', 'Showing how to access the response object, parse the results, and retrieve the JSON data using promises to handle asynchronous operations.', "Passing custom properties to React components using the 'props' object", 'Creating and accessing state objects in React components', 'Organizing components into folders for better project organization', "Utilizing lifecycle hooks such as 'componentDidMount' to update state and trigger re-rendering"]}, {'end': 2083.853, 'segs': [{'end': 1625.878, 'src': 'heatmap', 'start': 1556.153, 'weight': 0, 'content': [{'end': 1570.054, 'text': "And let's add in our series to the series property of our state save index.js.", 'start': 1556.153, 'duration': 13.901}, {'end': 1575.356, 'text': "go back to the page and we're getting back the length of series already then.", 'start': 1570.054, 'duration': 5.302}, {'end': 1580.298, 'text': "okay, that's exactly what we wanted and just to be sure, let's refresh it one more time.", 'start': 1575.356, 'duration': 4.942}, {'end': 1584.5, 'text': "and yes, we're getting back the response from the api.", 'start': 1580.298, 'duration': 4.202}, {'end': 1594.361, 'text': 'Right now we launch an API request every time our app component renders.', 'start': 1590.518, 'duration': 3.843}, {'end': 1601.587, 'text': 'But if you think about it, does the app component really need to know about the TVSeries array, or when and how the call will be launched??', 'start': 1594.741, 'duration': 6.846}, {'end': 1603.588, 'text': 'The answer is definitely not.', 'start': 1602.187, 'duration': 1.401}, {'end': 1606.951, 'text': 'We want to keep our app as modular and as simple as possible.', 'start': 1603.968, 'duration': 2.983}, {'end': 1610.593, 'text': "That means creating separate components when it's logical to do so.", 'start': 1607.371, 'duration': 3.222}, {'end': 1615.915, 'text': 'In React there is a common pattern used, known as Presentational Components and Container Components.', 'start': 1611.354, 'duration': 4.561}, {'end': 1617.996, 'text': 'The idea is very simple.', 'start': 1616.536, 'duration': 1.46}, {'end': 1622.357, 'text': 'Inside your Presentational Components you would be concentrated on how things look.', 'start': 1618.396, 'duration': 3.961}, {'end': 1625.878, 'text': "You wouldn't specify how the data is loaded or manipulated.", 'start': 1622.857, 'duration': 3.021}], 'summary': 'Discussing the separation of concerns in react components and the use of presentational and container components.', 'duration': 84.375, 'max_score': 1556.153, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ied4aZxUzc/pics/6Ied4aZxUzc1556153.jpg'}, {'end': 1762.529, 'src': 'heatmap', 'start': 1671.411, 'weight': 1, 'content': [{'end': 1685.619, 'text': "create a class with the name of series which extends component and let's render for now only a div.", 'start': 1671.411, 'duration': 14.208}, {'end': 1690.081, 'text': "let's type in series container.", 'start': 1685.619, 'duration': 4.462}, {'end': 1693.943, 'text': 'export default series.', 'start': 1690.081, 'duration': 3.862}, {'end': 1715.3, 'text': "okay, inside our app component let's import series from container series and let's render it under our the length of array message.", 'start': 1693.943, 'duration': 21.357}, {'end': 1720.844, 'text': "save index.js, go back to the page and we're rendering the series container.", 'start': 1715.3, 'duration': 5.544}, {'end': 1735.744, 'text': "okay, so what we need to do right now is we actually need to copy this code And let's paste it into the series component.", 'start': 1720.844, 'duration': 14.9}, {'end': 1742.369, 'text': 'And we also need to get this message.', 'start': 1737.746, 'duration': 4.623}, {'end': 1750.215, 'text': "Let's also paste that inside our dev here.", 'start': 1743.99, 'duration': 6.225}, {'end': 1762.529, 'text': "Let's save the series file, then the component file and let's go back to our page once again, and nothing has changed.", 'start': 1751.896, 'duration': 10.633}], 'summary': "Created 'series' component, rendered div, imported and pasted code, no change", 'duration': 91.118, 'max_score': 1671.411, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ied4aZxUzc/pics/6Ied4aZxUzc1671411.jpg'}, {'end': 1954.095, 'src': 'heatmap', 'start': 1834.879, 'weight': 0.996, 'content': [{'end': 1840.784, 'text': 'And that way we can import it inside our series container.', 'start': 1834.879, 'duration': 5.905}, {'end': 1854.488, 'text': "Okay, now that we have that, let's render it under the message of our series story length.", 'start': 1847.307, 'duration': 7.181}, {'end': 1866.151, 'text': "And I'll add in the list property to the component, we'll get this list property inside our props.", 'start': 1855.289, 'duration': 10.862}, {'end': 1872.412, 'text': "So I'll just pass in this state series here.", 'start': 1867.251, 'duration': 5.161}, {'end': 1880.539, 'text': 'save index.js, go back to the page, see if everything is rendering accordingly, and it is.', 'start': 1873.553, 'duration': 6.986}, {'end': 1887.004, 'text': "So let's go back to the series list component, and we can delete this message.", 'start': 1880.839, 'duration': 6.165}, {'end': 1892.469, 'text': "Let's add an unordered list.", 'start': 1888.285, 'duration': 4.184}, {'end': 1895.251, 'text': 'Inside that list.', 'start': 1894.331, 'duration': 0.92}, {'end': 1907.207, 'text': "now that we have our list property, let's type in props list and we'll use a map function.", 'start': 1895.251, 'duration': 11.956}, {'end': 1926.672, 'text': "inside that function, let's get the series and let's return a list item and inside that list item what we want to do is show the name, our series.", 'start': 1907.207, 'duration': 19.465}, {'end': 1929.554, 'text': 'So save that go back to your page.', 'start': 1927.352, 'duration': 2.202}, {'end': 1935.879, 'text': "And we're getting every single show name from our series.", 'start': 1930.395, 'duration': 5.484}, {'end': 1937.261, 'text': 'All right, good.', 'start': 1936.24, 'duration': 1.021}, {'end': 1941.704, 'text': 'So we want of course, to look a little bit better.', 'start': 1938.642, 'duration': 3.062}, {'end': 1944.287, 'text': "We don't want these dots around flowing out here.", 'start': 1941.724, 'duration': 2.563}, {'end': 1949.391, 'text': 'So what we can do is add class name.', 'start': 1944.967, 'duration': 4.424}, {'end': 1954.095, 'text': "And let's type in series list.", 'start': 1950.312, 'duration': 3.783}], 'summary': 'Rendering list of series names using props and map function.', 'duration': 119.216, 'max_score': 1834.879, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ied4aZxUzc/pics/6Ied4aZxUzc1834879.jpg'}, {'end': 2014.448, 'src': 'embed', 'start': 1988.758, 'weight': 5, 'content': [{'end': 1994.486, 'text': "save that and we're not seeing the dots floating around on the left side.", 'start': 1988.758, 'duration': 5.728}, {'end': 1999.373, 'text': "also, i don't like the padding on the left, so i'll just remove that as well.", 'start': 1994.486, 'duration': 4.887}, {'end': 2001.237, 'text': 'Now this looks centered.', 'start': 2000.256, 'duration': 0.981}, {'end': 2009.444, 'text': "Awesome One thing that's left to talk about is we're actually getting this warning from React.", 'start': 2001.777, 'duration': 7.667}, {'end': 2014.448, 'text': 'So it says that each child in array or iterator should have a unique key prop.', 'start': 2009.464, 'duration': 4.984}], 'summary': 'Resolved alignment issues and addressed react warning about unique key prop.', 'duration': 25.69, 'max_score': 1988.758, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ied4aZxUzc/pics/6Ied4aZxUzc1988758.jpg'}], 'start': 1541.503, 'title': 'Managing app state and react components', 'summary': 'Delves into managing app state using setstate, optimizing api requests, emphasizing modularity and simplicity, and introduces presentational and container components in react while addressing the warning regarding unique key props.', 'chapters': [{'end': 1606.951, 'start': 1541.503, 'title': 'Managing app state and api requests', 'summary': 'Discusses using setstate to manage the app state, optimizing api requests by decoupling the app component from tvseries array, and emphasizing modularity and simplicity.', 'duration': 65.448, 'highlights': ['We can set the state of our app using setState, and add the series to the series property of our state, resulting in getting back the length of series.', 'Emphasizing the need to decouple the app component from the TVSeries array and optimize API requests for modularity and simplicity.', 'Launching an API request every time our app component renders, while not necessary, indicates the need to optimize the app for efficiency.']}, {'end': 2083.853, 'start': 1607.371, 'title': 'React components and containers', 'summary': 'Introduces the concept of presentational components and container components in react, highlighting the separation of functionality and appearance and demonstrating the creation and usage of these components, resulting in a warning from react regarding unique key props being added to list items.', 'duration': 476.482, 'highlights': ['The chapter introduces the concept of Presentational Components and Container Components in React', 'Demonstrates the creation and usage of Presentational Components and Container Components', 'Results in a warning from React regarding unique key props being added to list items']}], 'duration': 542.35, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ied4aZxUzc/pics/6Ied4aZxUzc1541503.jpg', 'highlights': ['We can set the state of our app using setState, and add the series to the series property of our state, resulting in getting back the length of series.', 'Emphasizing the need to decouple the app component from the TVSeries array and optimize API requests for modularity and simplicity.', 'Launching an API request every time our app component renders, while not necessary, indicates the need to optimize the app for efficiency.', 'The chapter introduces the concept of Presentational Components and Container Components in React', 'Demonstrates the creation and usage of Presentational Components and Container Components', 'Results in a warning from React regarding unique key props being added to list items']}, {'end': 2365.302, 'segs': [{'end': 2258.478, 'src': 'embed', 'start': 2091.516, 'weight': 0, 'content': [{'end': 2097.118, 'text': 'it is possible to create additional components inside the component, which will not be available outside of it.', 'start': 2091.516, 'duration': 5.602}, {'end': 2101.619, 'text': 'This makes your code a little bit more readable and a little bit more semantic.', 'start': 2097.698, 'duration': 3.921}, {'end': 2104.881, 'text': "And it's just a good practice to use.", 'start': 2102.2, 'duration': 2.681}, {'end': 2114.584, 'text': "So let's create a new variable with the name of series less item will of course pass props to it.", 'start': 2105.281, 'duration': 9.303}, {'end': 2126.197, 'text': "And let's return whatever we have inside our series list, unorder list item.", 'start': 2116.605, 'duration': 9.592}, {'end': 2133.642, 'text': 'And right here, we can return series list item.', 'start': 2128.439, 'duration': 5.203}, {'end': 2141.868, 'text': "Now let's pass series to it.", 'start': 2133.662, 'duration': 8.206}, {'end': 2152.633, 'text': 'By the way, we can also destructurize our props variable inside our series lists item.', 'start': 2145.411, 'duration': 7.222}, {'end': 2163.902, 'text': 'So we can just open up parentheses and type in series, this will just take all of the properties, whichever you want from your props object.', 'start': 2153.013, 'duration': 10.889}, {'end': 2168.025, 'text': "So I'll save index dot GS, go back to our page.", 'start': 2164.262, 'duration': 3.763}, {'end': 2171.977, 'text': 'And literally nothing has changed.', 'start': 2169.915, 'duration': 2.062}, {'end': 2179.405, 'text': "So for now, it may seem redundant that we're creating just a new component for a list item.", 'start': 2172.558, 'duration': 6.847}, {'end': 2184.269, 'text': 'But later on in upcoming lessons, we will be adding a little bit more information to it.', 'start': 2179.865, 'duration': 4.404}, {'end': 2188.554, 'text': "And then it'll be just a lot cleaner and simpler to understand.", 'start': 2184.79, 'duration': 3.764}, {'end': 2197.208, 'text': 'In the previous lesson, we were factoring series list component.', 'start': 2194.025, 'duration': 3.183}, {'end': 2202.031, 'text': 'What we forgot to do is add the key property to the newly created component.', 'start': 2197.508, 'duration': 4.523}, {'end': 2211.759, 'text': "Let's go back to our code editor and copy the key property from the list item and paste it into the series list item component.", 'start': 2202.432, 'duration': 9.327}, {'end': 2213.26, 'text': 'Save index.js.', 'start': 2212.8, 'duration': 0.46}, {'end': 2217.524, 'text': 'and the error is gone.', 'start': 2216.184, 'duration': 1.34}, {'end': 2227.886, 'text': "Let's open up containers-series-index.js, and right now we're only fetching series with the name of Vikings.", 'start': 2219.105, 'duration': 8.781}, {'end': 2231.787, 'text': 'but of course we want to make this process a little bit more dynamic.', 'start': 2227.886, 'duration': 3.901}, {'end': 2243.031, 'text': "Under the length of series or a message I'll open up a div and inside of it I'll create an input with the type of text.", 'start': 2232.607, 'duration': 10.424}, {'end': 2247.973, 'text': "And I'll also assign an on change handler to it.", 'start': 2244.492, 'duration': 3.481}, {'end': 2258.478, 'text': 'So what this handler does is that whenever our input value changes, it will fire an event to whatever method we assign to it.', 'start': 2248.933, 'duration': 9.545}], 'summary': 'Creating additional components for better readability and semantic, with plans for future enhancements.', 'duration': 166.962, 'max_score': 2091.516, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ied4aZxUzc/pics/6Ied4aZxUzc2091516.jpg'}], 'start': 2091.516, 'title': 'React component best practices', 'summary': 'Covers creating readable and semantic components, emphasizing destructuring for efficient props passing, adding key property for component functionality and resolving errors, and dynamic input handling using string interpolation for dynamic input values and event firing.', 'chapters': [{'end': 2163.902, 'start': 2091.516, 'title': 'Creating readable and semantic components', 'summary': 'Discusses creating additional components inside a component for improved code readability and semantics, emphasizing the best practice of using destructuring to pass props efficiently and effectively.', 'duration': 72.386, 'highlights': ['By creating additional components inside a component, code becomes more readable and semantic.', 'Using destructuring to pass props allows for efficient selection of specific properties from the props object.', 'Creating additional components inside a component is a good practice for code readability and semantics.']}, {'end': 2227.886, 'start': 2164.262, 'title': 'React component key addition', 'summary': 'Covers the addition of a key property to a newly created component, ensuring that the error is resolved and the code functions properly, while also hinting at future enhancements to the component in upcoming lessons.', 'duration': 63.624, 'highlights': ['The addition of a key property to the newly created component ensures the resolution of errors and proper functioning of the code.', 'Future lessons will involve adding more information to the component, making it cleaner and simpler to understand.', 'The chapter emphasizes the significance of factoring the series list component, laying the groundwork for upcoming enhancements.']}, {'end': 2365.302, 'start': 2227.886, 'title': 'Dynamic input handling with string interpolation', 'summary': 'Demonstrates the process of making input handling dynamic by utilizing an on change handler and string interpolation in javascript, allowing for the dynamic updating of input values and firing events.', 'duration': 137.416, 'highlights': ['The chapter demonstrates the process of making input handling dynamic by utilizing an on change handler and string interpolation in JavaScript, allowing for the dynamic updating of input values and firing events.', 'The on change handler triggers an event whenever the input value changes, enabling the firing of events to the assigned method.', 'The use of string interpolation in JavaScript, denoted by the Grave Accent symbol (${}), facilitates dynamic URL wrapping and dynamic content updating.']}], 'duration': 273.786, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ied4aZxUzc/pics/6Ied4aZxUzc2091516.jpg', 'highlights': ['The chapter demonstrates dynamic input handling using on change handler and string interpolation in JavaScript.', 'Adding key property to components ensures error resolution and proper functionality.', 'Creating additional components inside a component improves code readability and semantics.', 'Destructuring props allows efficient selection of specific properties from the props object.', 'Emphasizing factoring the series list component lays the groundwork for upcoming enhancements.']}, {'end': 2753.101, 'segs': [{'end': 2471.973, 'src': 'heatmap', 'start': 2365.302, 'weight': 0, 'content': [{'end': 2380.836, 'text': "open up curly braces and let's copy the value of our input and paste it to the fetch url saveindex.js.", 'start': 2365.302, 'duration': 15.534}, {'end': 2388.861, 'text': "we're not getting anything from our series array and that is because we removed the component in mount method.", 'start': 2380.836, 'duration': 8.025}, {'end': 2396.127, 'text': "so if I type anything into the input, let's say I'll type in the same vikings.", 'start': 2388.861, 'duration': 7.266}, {'end': 2401.811, 'text': "we're getting the same length of our array and we're getting the series dynamically.", 'start': 2396.127, 'duration': 5.684}, {'end': 2409.37, 'text': "It's time to add some conditional rendering to the page.", 'start': 2406.769, 'duration': 2.601}, {'end': 2415.112, 'text': 'Mainly we want a layer spinning up under the input whenever I type in something.', 'start': 2409.91, 'duration': 5.202}, {'end': 2426.096, 'text': 'And we also want a friendly message which will say that no TV series have been found if the API does not give back any results with the given value of the input.', 'start': 2415.852, 'duration': 10.244}, {'end': 2434.062, 'text': "Let's open up series container and we need to add two more properties to the state.", 'start': 2427.918, 'duration': 6.144}, {'end': 2436.663, 'text': 'The first one will be series name.', 'start': 2434.882, 'duration': 1.781}, {'end': 2446.889, 'text': "I'll just assign an empty string to it and it will just help keep track of whatever we have inside the input because currently we're not doing that.", 'start': 2438.304, 'duration': 8.585}, {'end': 2462.366, 'text': "And I'll also add an isFetching property and I'll set it false, and this will help us know whenever we're fetching something from the API.", 'start': 2447.77, 'duration': 14.596}, {'end': 2471.973, 'text': "let's get all of these properties inside the render method.", 'start': 2462.366, 'duration': 9.607}], 'summary': 'Adding conditional rendering for input, series fetching, and friendly message.', 'duration': 65.204, 'max_score': 2365.302, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ied4aZxUzc/pics/6Ied4aZxUzc2365302.jpg'}, {'end': 2728.549, 'src': 'embed', 'start': 2689.141, 'weight': 2, 'content': [{'end': 2692.884, 'text': "So let's open up the curly braces again and I'll type in.", 'start': 2689.141, 'duration': 3.743}, {'end': 2695.646, 'text': 'if is fetching is true.', 'start': 2692.884, 'duration': 2.762}, {'end': 2711.859, 'text': "Then for now let's just show a loading message and if fetching is false I'll just show the series list.", 'start': 2695.666, 'duration': 16.193}, {'end': 2725.486, 'text': 'again save index.js, go back to the page and we should get the loading message whenever we type something into it.', 'start': 2715.658, 'duration': 9.828}, {'end': 2728.549, 'text': "and yeah, we're actually getting it.", 'start': 2725.486, 'duration': 3.063}], 'summary': 'Code displays loading message when fetching is true.', 'duration': 39.408, 'max_score': 2689.141, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ied4aZxUzc/pics/6Ied4aZxUzc2689141.jpg'}], 'start': 2365.302, 'title': 'Dynamic series fetching and state management', 'summary': 'Demonstrates dynamically fetching tv series data, implementing conditional rendering, and managing state properties. it focuses on setting input value, conditional message display, and tracking api fetching status, along with handling scenarios like no series returned, empty input, and fetching data.', 'chapters': [{'end': 2539.385, 'start': 2365.302, 'title': 'Dynamic series fetching and conditional rendering', 'summary': 'Demonstrates the process of dynamically fetching tv series data, implementing conditional rendering for input validation, and managing state properties, with particular focus on setting the input value, conditional message display, and tracking api fetching status.', 'duration': 174.083, 'highlights': ['The chapter focuses on dynamically fetching TV series data, implementing conditional rendering for input validation, and managing state properties, particularly setting the input value, conditional message display, and tracking API fetching status.', "The state properties 'series name' and 'isFetching' are added, with 'series name' initialized as an empty string and 'isFetching' set to false, to keep track of input values and API fetching status.", 'The process of setting the input value and conditional message display is emphasized, ensuring that the input only shows the results and displaying a friendly message if no series are found when fetching from the API.']}, {'end': 2753.101, 'start': 2541.394, 'title': 'State management and conditional rendering', 'summary': 'Focuses on implementing state management and conditional rendering in the render method to handle different scenarios, such as no series returned from the api, empty input, and fetching data, with examples of messages displayed and checking the fetching state.', 'duration': 211.707, 'highlights': ['Implementing conditional rendering to handle scenarios when no series are returned from the API and when the input is empty, displaying appropriate messages to the user, ensuring a seamless user experience.', 'Checking the fetching state to display a loading message when waiting for a response from the API, enhancing the user experience by providing feedback during data retrieval.', 'Verifying the functionality by ensuring that the messages are displayed or hidden based on the user input and API response, confirming the correct behavior of the state management and conditional rendering implementation.']}], 'duration': 387.799, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ied4aZxUzc/pics/6Ied4aZxUzc2365302.jpg', 'highlights': ['The chapter focuses on dynamically fetching TV series data, implementing conditional rendering for input validation, and managing state properties, particularly setting the input value, conditional message display, and tracking API fetching status.', 'Implementing conditional rendering to handle scenarios when no series are returned from the API and when the input is empty, displaying appropriate messages to the user, ensuring a seamless user experience.', 'Checking the fetching state to display a loading message when waiting for a response from the API, enhancing the user experience by providing feedback during data retrieval.', "The state properties 'series name' and 'isFetching' are added, with 'series name' initialized as an empty string and 'isFetching' set to false, to keep track of input values and API fetching status."]}, {'end': 3823.637, 'segs': [{'end': 2840.416, 'src': 'embed', 'start': 2790.101, 'weight': 4, 'content': [{'end': 2798.924, 'text': "Inside of it, I'll just add index.js, import React, create the Loader component.", 'start': 2790.101, 'duration': 8.823}, {'end': 2814.795, 'text': 'export it and i already have a loader gif inside my assets folder.', 'start': 2805.186, 'duration': 9.609}, {'end': 2817.677, 'text': "you can use whatever loader icon you'd like.", 'start': 2814.795, 'duration': 2.882}, {'end': 2818.618, 'text': "it doesn't really matter.", 'start': 2817.677, 'duration': 0.941}, {'end': 2836.493, 'text': "so what you need to do is you need to get the source of the loader and i'll just name it loader src from assets lower gif.", 'start': 2818.618, 'duration': 17.875}, {'end': 2840.416, 'text': "So essentially, you're just importing the source.", 'start': 2837.253, 'duration': 3.163}], 'summary': 'Create loader component in index.js using loader gif from assets folder.', 'duration': 50.315, 'max_score': 2790.101, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ied4aZxUzc/pics/6Ied4aZxUzc2790101.jpg'}, {'end': 2921.589, 'src': 'heatmap', 'start': 2869.275, 'weight': 0, 'content': [{'end': 2871.096, 'text': 'Save your newly created component.', 'start': 2869.275, 'duration': 1.821}, {'end': 2874.039, 'text': 'Go back to the series container.', 'start': 2872.517, 'duration': 1.522}, {'end': 2881.364, 'text': "Let's import it from loader.", 'start': 2874.819, 'duration': 6.545}, {'end': 2895.923, 'text': "Whenever we're loading, we're not showing that old message anymore, we want to show the loader component.", 'start': 2885.45, 'duration': 10.473}, {'end': 2908.425, 'text': "Save index.js, go back to the page and we're actually seeing the loader popping up inside our page.", 'start': 2896.684, 'duration': 11.741}, {'end': 2916.087, 'text': "I also want to make it a little bit smaller, because right now it's really big,", 'start': 2909.205, 'duration': 6.882}, {'end': 2921.589, 'text': 'and I want to show you how you might want to do that on an element level.', 'start': 2916.087, 'duration': 5.502}], 'summary': 'Import and integrate new loader component, adjust size and placement on page.', 'duration': 36.139, 'max_score': 2869.275, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ied4aZxUzc/pics/6Ied4aZxUzc2869275.jpg'}, {'end': 2995.267, 'src': 'heatmap', 'start': 2946.172, 'weight': 0.713, 'content': [{'end': 2952.155, 'text': 'go back to my page and the loader icon is looking a lot better.', 'start': 2946.172, 'duration': 5.983}, {'end': 2962.512, 'text': 'React Router is the standard routing library for React.', 'start': 2959.67, 'duration': 2.842}, {'end': 2973.158, 'text': "I've opened up the npm page for React Router and here we have a short explanation how we need to install this library into our app.", 'start': 2963.772, 'duration': 9.386}, {'end': 2981.683, 'text': "So it's saying that if we're writing an application that will run in the browser, you should install instead React Router DOM.", 'start': 2973.779, 'duration': 7.904}, {'end': 2983.384, 'text': "So let's do that.", 'start': 2982.624, 'duration': 0.76}, {'end': 2995.267, 'text': "Open up your command line and let's type in npm install or if you want to save it, react-router-dom.", 'start': 2984.685, 'duration': 10.582}], 'summary': 'React router dom is installed for browser application, improving loader icon.', 'duration': 49.095, 'max_score': 2946.172, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ied4aZxUzc/pics/6Ied4aZxUzc2946172.jpg'}, {'end': 2995.267, 'src': 'embed', 'start': 2963.772, 'weight': 2, 'content': [{'end': 2973.158, 'text': "I've opened up the npm page for React Router and here we have a short explanation how we need to install this library into our app.", 'start': 2963.772, 'duration': 9.386}, {'end': 2981.683, 'text': "So it's saying that if we're writing an application that will run in the browser, you should install instead React Router DOM.", 'start': 2973.779, 'duration': 7.904}, {'end': 2983.384, 'text': "So let's do that.", 'start': 2982.624, 'duration': 0.76}, {'end': 2995.267, 'text': "Open up your command line and let's type in npm install or if you want to save it, react-router-dom.", 'start': 2984.685, 'duration': 10.582}], 'summary': 'React router dom is installed via npm for browser applications.', 'duration': 31.495, 'max_score': 2963.772, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ied4aZxUzc/pics/6Ied4aZxUzc2963772.jpg'}, {'end': 3111.985, 'src': 'heatmap', 'start': 3024.244, 'weight': 0.805, 'content': [{'end': 3053.935, 'text': "inside this component and this will keep track of your UI in sync with the URL saveindex.js and let's open our containers series index.", 'start': 3024.244, 'duration': 29.691}, {'end': 3061.561, 'text': 'and what I want to do next is copy the intro code.', 'start': 3053.935, 'duration': 7.626}, {'end': 3073.27, 'text': "I'll just delete it from our app component and paste it into the series component just above the input.", 'start': 3061.561, 'duration': 11.709}, {'end': 3085.453, 'text': "Of course, don't forget to import intro from intro.", 'start': 3073.951, 'duration': 11.502}, {'end': 3094.684, 'text': "save series container, close it and we don't need the intro anymore here as well.", 'start': 3085.453, 'duration': 9.231}, {'end': 3097.201, 'text': 'Save that.', 'start': 3096.621, 'duration': 0.58}, {'end': 3106.423, 'text': "we're seeing the same result, but we just made our app component a little bit cleaner and moved the intro component into the series container.", 'start': 3097.201, 'duration': 9.222}, {'end': 3111.985, 'text': 'okay?. The next step is to create an additional component.', 'start': 3106.423, 'duration': 5.562}], 'summary': 'Moving intro component from app to series container for cleaner code.', 'duration': 87.741, 'max_score': 3024.244, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ied4aZxUzc/pics/6Ied4aZxUzc3024244.jpg'}, {'end': 3271.243, 'src': 'heatmap', 'start': 3164.357, 'weight': 0.92, 'content': [{'end': 3180.119, 'text': "let's export the main component and of course I also need to import the series container from from series container.", 'start': 3164.357, 'duration': 15.762}, {'end': 3198.539, 'text': "okay, save index.js and inside our app component let's delete the series container, so we won't be actually rendering it inside the app component.", 'start': 3180.119, 'duration': 18.42}, {'end': 3206.885, 'text': "but we'll render the main component from main.", 'start': 3198.539, 'duration': 8.346}, {'end': 3218.535, 'text': "okay, and i'll copy and paste it here save the app component, go back to the page and nothing has changed.", 'start': 3206.885, 'duration': 11.65}, {'end': 3239.886, 'text': "but right now we're actually using react router dom to render our series container and in the next lesson we'll add an additional page and then you'll see how we can render different pages with React Router DOM.", 'start': 3218.535, 'duration': 21.351}, {'end': 3252.758, 'text': 'We want to show multiple pages on our application but right now we only have one container so I need to create another one.', 'start': 3239.906, 'duration': 12.852}, {'end': 3255.14, 'text': "I'll call it single series.", 'start': 3252.878, 'duration': 2.262}, {'end': 3271.243, 'text': "This container will show a series with a little bit more information than what we have on our series container and for that I'll need react and this will be a class component.", 'start': 3256.462, 'duration': 14.781}], 'summary': 'Removing series container, adding single series container for more information and multiple pages with react router dom.', 'duration': 106.886, 'max_score': 3164.357, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ied4aZxUzc/pics/6Ied4aZxUzc3164357.jpg'}, {'end': 3271.243, 'src': 'embed', 'start': 3239.906, 'weight': 3, 'content': [{'end': 3252.758, 'text': 'We want to show multiple pages on our application but right now we only have one container so I need to create another one.', 'start': 3239.906, 'duration': 12.852}, {'end': 3255.14, 'text': "I'll call it single series.", 'start': 3252.878, 'duration': 2.262}, {'end': 3271.243, 'text': "This container will show a series with a little bit more information than what we have on our series container and for that I'll need react and this will be a class component.", 'start': 3256.462, 'duration': 14.781}], 'summary': "Creating a new container 'single series' to display series with more information using react as a class component.", 'duration': 31.337, 'max_score': 3239.906, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ied4aZxUzc/pics/6Ied4aZxUzc3239906.jpg'}, {'end': 3371.063, 'src': 'heatmap', 'start': 3327.133, 'weight': 0.976, 'content': [{'end': 3331.495, 'text': 'I also need to add in the component to the route.', 'start': 3327.133, 'duration': 4.362}, {'end': 3333.296, 'text': 'It will be single series.', 'start': 3332.116, 'duration': 1.18}, {'end': 3341.975, 'text': "SaveIndex.js Let's try and go to our newly created container.", 'start': 3335.317, 'duration': 6.658}, {'end': 3344.958, 'text': "So I need to write series and let's say one, two, three.", 'start': 3342.275, 'duration': 2.683}, {'end': 3349.542, 'text': "And we're getting back the single series message that we just created.", 'start': 3345.819, 'duration': 3.723}, {'end': 3365.799, 'text': 'It would be nice, of course, to get this ID and we can try and look inside the props, save that,', 'start': 3350.684, 'duration': 15.115}, {'end': 3371.063, 'text': "open up the console and what I'm looking for is the match property.", 'start': 3365.799, 'duration': 5.264}], 'summary': 'Creating a single series component with ids and props.', 'duration': 43.93, 'max_score': 3327.133, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ied4aZxUzc/pics/6Ied4aZxUzc3327133.jpg'}, {'end': 3475.644, 'src': 'embed', 'start': 3434.685, 'weight': 1, 'content': [{'end': 3439.809, 'text': 'We need to import link from react-router-dom.', 'start': 3434.685, 'duration': 5.124}, {'end': 3447.18, 'text': 'And we need to add the link into the series list item.', 'start': 3442.436, 'duration': 4.744}, {'end': 3453.044, 'text': 'And as the name implies, this component works just as a simple link.', 'start': 3448.12, 'duration': 4.924}, {'end': 3460.85, 'text': 'And I want to link it to series show ID.', 'start': 3453.865, 'duration': 6.985}, {'end': 3475.644, 'text': "I'm just making the link dynamic and it will always show the correct ID and link to the correct show with the ID attached of the show.", 'start': 3463.72, 'duration': 11.924}], 'summary': 'Adding a dynamic link to series list item for correct show with id.', 'duration': 40.959, 'max_score': 3434.685, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ied4aZxUzc/pics/6Ied4aZxUzc3434685.jpg'}], 'start': 2754.242, 'title': 'React image, routing, and dynamic linking', 'summary': 'Covers adding images, creating a loader component, installing and using react router dom for routing, and dynamically linking components to fetch and display information including show name, premiere date, rating, episode count, and image, enhancing user experiences.', 'chapters': [{'end': 2921.589, 'start': 2754.242, 'title': 'Adding image with react', 'summary': 'Demonstrates how to add an image with react, including creating a loader component, importing and displaying a loader gif, and adjusting the size of the image.', 'duration': 167.347, 'highlights': ['The chapter demonstrates how to add an image with React, including creating a Loader component, importing and displaying a loader gif, and adjusting the size of the image.', 'The process involves creating a folder named Loader, adding index.js, importing React, creating the Loader component, and exporting it.', 'An image is imported from the assets folder, and its source is defined using the loader gif, with a specified alternative property to avoid React warnings.', 'The Loader component is then imported into the series container to replace the old message, resulting in the loader popping up inside the page.', 'Additionally, the demonstration includes resizing the loader image to make it smaller and provides insight into adjusting the size of images on an element level.']}, {'end': 3349.542, 'start': 2922.249, 'title': 'Using react router dom for routing', 'summary': 'Demonstrates installing and using react router dom for routing in a react application, including adding routes and creating additional components for different pages.', 'duration': 427.293, 'highlights': ['React Router DOM is the standard routing library for React, providing the ability to create multiple pages in a React application.', 'Installing React Router DOM involves using npm to install the library and making necessary imports in the application.', "Creating additional components, such as 'single series', to display more information on specific pages, enhances the functionality of the React application."]}, {'end': 3823.637, 'start': 3350.684, 'title': 'Dynamic linking and displaying information', 'summary': 'Demonstrates how to dynamically link components using react router, fetch data from an api based on the url parameters, and display the fetched information, including show name, premiere date, rating, episode count, and image, allowing for dynamic and interactive user experiences.', 'duration': 472.953, 'highlights': ['The chapter explains how to dynamically link components using React Router, ensuring that the correct ID is attached to the show link, enabling users to navigate to the correct show based on the URL parameter.', 'It demonstrates fetching data from the API based on the ID obtained from the URL, allowing for the display of specific show information, such as show name, premiere date, rating, episode count, and image, providing users with relevant and interactive content.', 'The chapter emphasizes the importance of creating a loader while fetching data from the API, ensuring a smooth and responsive user experience, improving the overall usability of the application.', 'It encourages users to consider creating additional components for the HTML structure, allowing for further customization and modularity, empowering users to extend and customize the application based on their preferences.']}], 'duration': 1069.395, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6Ied4aZxUzc/pics/6Ied4aZxUzc2754242.jpg', 'highlights': ['The chapter emphasizes the importance of creating a loader while fetching data from the API, ensuring a smooth and responsive user experience, improving the overall usability of the application.', 'The chapter explains how to dynamically link components using React Router, ensuring that the correct ID is attached to the show link, enabling users to navigate to the correct show based on the URL parameter.', 'Installing React Router DOM involves using npm to install the library and making necessary imports in the application.', "Creating additional components, such as 'single series', to display more information on specific pages, enhances the functionality of the React application.", 'The chapter demonstrates how to add an image with React, including creating a Loader component, importing and displaying a loader gif, and adjusting the size of the image.']}], 'highlights': ['The chapter focuses on dynamically fetching TV series data, implementing conditional rendering for input validation, and managing state properties, particularly setting the input value, conditional message display, and tracking API fetching status.', 'Using fetch to send a request to the TV Maze API to obtain information for TV series, including parsing the response object to extract JSON data and using promises to handle asynchronous operations.', 'The chapter emphasizes the importance of creating a loader while fetching data from the API, ensuring a smooth and responsive user experience, improving the overall usability of the application.', 'The chapter explains how to dynamically link components using React Router, ensuring that the correct ID is attached to the show link, enabling users to navigate to the correct show based on the URL parameter.', 'The chapter will cover creating a single page application using React to search and investigate popular TV series.']}