title
Simple Animations In React

description
In this video we will take a look at the React Spring library and create some simple animations and transitions. For more on React Spring visit https://react-spring.surge.sh/ Sponsor: DevMountain Bootcamp https://goo.gl/6q0dEa Code & Demo: https://codesandbox.io/s/q8vmryvzjw 💖 Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Website & Udemy Courses http://www.traversymedia.com Follow Traversy Media: https://www.facebook.com/traversymedia https://www.twitter.com/traversymedia https://www.instagram.com/traversymedia

detail
{'title': 'Simple Animations In React', 'heatmap': [{'end': 50.684, 'start': 36.813, 'weight': 0.717}, {'end': 389.767, 'start': 339.705, 'weight': 0.702}, {'end': 426.913, 'start': 410.57, 'weight': 0.89}, {'end': 736.548, 'start': 721.224, 'weight': 0.785}, {'end': 1214.899, 'start': 1197.731, 'weight': 1}], 'summary': 'Covers using react spring for animations, creating fade-in effects, adjusting delay and duration, integrating components with transitions, and utilizing react spring for transitioning components and creating fade-in effects with animated components in react.', 'chapters': [{'end': 235.258, 'segs': [{'end': 60.932, 'src': 'heatmap', 'start': 36.813, 'weight': 0, 'content': [{'end': 38.995, 'text': 'just to give you the foundation of how it works.', 'start': 36.813, 'duration': 2.182}, {'end': 41.317, 'text': "So this is what we'll be creating.", 'start': 39.575, 'duration': 1.742}, {'end': 42.998, 'text': 'basically, when I load the page,', 'start': 41.317, 'duration': 1.681}, {'end': 50.684, 'text': "component one will slide down and then component two will fade in and you can see we also have a counter here that's going to go from one to 10,", 'start': 42.998, 'duration': 7.686}, {'end': 60.132, 'text': 'because we can basically animate props or text and then down here we have a button to toggle component three, so we can fade that in and out.', 'start': 50.684, 'duration': 9.448}, {'end': 60.932, 'text': 'All right.', 'start': 60.672, 'duration': 0.26}], 'summary': 'Creating a web page with sliding, fading components, and a counter from 1 to 10.', 'duration': 37.15, 'max_score': 36.813, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/S8yn3-WpVV8/pics/S8yn3-WpVV836813.jpg'}, {'end': 103.864, 'src': 'embed', 'start': 77.878, 'weight': 1, 'content': [{'end': 88.401, 'text': 'One thing I want to note is that right here it says one of the strengths of spring is that it can apply animations without relying on a react to render updates frame by frame.', 'start': 77.878, 'duration': 10.523}, {'end': 90.584, 'text': 'like most animation libraries do.', 'start': 88.821, 'duration': 1.763}, {'end': 96.433, 'text': "So, with what we're doing, it's simple enough, where you're probably not going to see a difference between other libraries,", 'start': 90.704, 'duration': 5.729}, {'end': 103.864, 'text': "but if you're doing something really advanced and intricate, then you're going to get a better performance from React Spring.", 'start': 96.433, 'duration': 7.431}], 'summary': 'React spring provides better performance for advanced and intricate animations compared to other libraries.', 'duration': 25.986, 'max_score': 77.878, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/S8yn3-WpVV8/pics/S8yn3-WpVV877878.jpg'}, {'end': 235.258, 'src': 'embed', 'start': 122.44, 'weight': 4, 'content': [{'end': 125.562, 'text': "basically it's just an app js and we're rendering out an h1.", 'start': 122.44, 'duration': 3.122}, {'end': 135.866, 'text': 'One thing I did add is a couple lines of CSS in the app.css, just to reset Arial font and increase the font size on the heading.', 'start': 126.683, 'duration': 9.183}, {'end': 143.029, 'text': 'So if you want to follow along, just generate a new application, add that little bit of CSS, and you should be good to go.', 'start': 136.466, 'duration': 6.563}, {'end': 147.95, 'text': "So before we run the dev server, I'm going to install React Spring.", 'start': 143.489, 'duration': 4.461}, {'end': 151.131, 'text': 'So we want to do npm install react-spring.', 'start': 148.01, 'duration': 3.121}, {'end': 158.176, 'text': 'And that will install it for us.', 'start': 156.836, 'duration': 1.34}, {'end': 164.318, 'text': "And then what we'll do is create our component one, component two, and component three.", 'start': 159.597, 'duration': 4.721}, {'end': 168.84, 'text': "So let's run the dev server here with npm start.", 'start': 165.059, 'duration': 3.781}, {'end': 175.382, 'text': 'Whoops, I have, hold on, I have something running on that port.', 'start': 171.981, 'duration': 3.401}, {'end': 178.923, 'text': 'Let me just cancel that out and run that again.', 'start': 175.402, 'duration': 3.521}, {'end': 187.814, 'text': 'All right, so we just should see just welcome render out on the page here.', 'start': 184.053, 'duration': 3.761}, {'end': 200.478, 'text': "Now I'm going to create a new folder in the source folder called Components, and let's create a new file called Component one dot JS.", 'start': 188.294, 'duration': 12.184}, {'end': 204.1, 'text': 'OK, so this is going to be a functional component.', 'start': 200.498, 'duration': 3.602}, {'end': 208.901, 'text': 'And I have an extension for VSCode called ES7 React Redux Snippets.', 'start': 204.62, 'duration': 4.281}, {'end': 211.682, 'text': 'And using that, Oops.', 'start': 209.681, 'duration': 2.001}, {'end': 217.866, 'text': 'Using that, I can just do RFC tab or enter, and it will generate a functional component.', 'start': 212.082, 'duration': 5.784}, {'end': 223.33, 'text': "If you don't have that extension or you're using a different editor, just go ahead and create a functional component.", 'start': 217.926, 'duration': 5.404}, {'end': 224.09, 'text': 'Just copy this.', 'start': 223.37, 'duration': 0.72}, {'end': 230.014, 'text': "And then we're just going to put an H1 in here and say component 1.", 'start': 225.011, 'duration': 5.003}, {'end': 233.317, 'text': "And let's put a paragraph, and we'll just do lorem 30.", 'start': 230.014, 'duration': 3.303}, {'end': 235.258, 'text': "Okay, so we'll save that.", 'start': 233.317, 'duration': 1.941}], 'summary': 'Creating components and installing react spring for a new app.', 'duration': 112.818, 'max_score': 122.44, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/S8yn3-WpVV8/pics/S8yn3-WpVV8122440.jpg'}], 'start': 7.059, 'title': 'Using react spring for animation', 'summary': 'Covers the introduction of react spring, demonstrating a demo application with sliding, fading, and toggling components and animating text. it discusses the benefits of react spring for advanced tasks, installation, and setting up a basic react application with custom css. additionally, it includes creating a functional component in react using es7 react redux snippets extension and adding an h1 tag and a paragraph with lorem 30 text.', 'chapters': [{'end': 96.433, 'start': 7.059, 'title': 'React spring animation demo', 'summary': 'Introduces react spring, a library for creating animations in react, and demonstrates a simple demo application that includes sliding, fading, and toggling components, as well as animating text and props.', 'duration': 89.374, 'highlights': ['The chapter introduces React Spring, a library for creating animations in React, and demonstrates a simple demo application that includes sliding, fading, and toggling components, as well as animating text and props.', 'Devmountain is a 12-week design and development boot camp intended to get learners a full-time position in the industry.', 'React Spring is highlighted as a library for creating animations in React, with the demonstration of a simple demo application showing sliding, fading, and toggling components, as well as animating text and props.', 'The demonstration includes a counter that goes from one to 10, showcasing the ability to animate props or text.', 'React Spring is noted for its strength in applying animations without relying on React to render updates frame by frame, unlike most animation libraries.']}, {'end': 178.923, 'start': 96.433, 'title': 'Implementing react spring for better performance', 'summary': 'Discusses the benefits of using react spring for advanced and intricate tasks, installing react spring, and setting up a basic react application with custom css.', 'duration': 82.49, 'highlights': ['The chapter emphasizes the better performance of React Spring for advanced and intricate tasks, contrasting it with other options (e.g., basic animations).', 'The process of setting up a basic React application is detailed, including removing default markup, adding custom CSS, and installing React Spring.', 'The installation of React Spring is described, involving the use of npm to install the package and the subsequent creation of multiple components for the application.']}, {'end': 235.258, 'start': 184.053, 'title': 'Creating react component', 'summary': 'Covers creating a functional component in react, including using es7 react redux snippets extension to quickly generate the component, adding an h1 tag for component 1, and a paragraph with lorem 30 text.', 'duration': 51.205, 'highlights': ['Using ES7 React Redux Snippets extension to quickly generate a functional component', 'Adding an H1 tag for Component 1', 'Adding a paragraph with lorem 30 text']}], 'duration': 228.199, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/S8yn3-WpVV8/pics/S8yn3-WpVV87059.jpg', 'highlights': ['React Spring is a library for creating animations in React, showcasing sliding, fading, toggling components, and animating text and props.', 'React Spring excels in applying animations without relying on React to render updates frame by frame, unlike most animation libraries.', 'React Spring demonstrates the ability to animate props or text, such as a counter going from one to 10.', 'The chapter details the better performance of React Spring for advanced and intricate tasks compared to basic animations.', 'The process of setting up a basic React application is explained, including removing default markup, adding custom CSS, and installing React Spring.', 'The installation of React Spring involves using npm to install the package and creating multiple components for the application.', 'The use of ES7 React Redux Snippets extension to quickly generate a functional component is highlighted.', 'The addition of an H1 tag for Component 1 and a paragraph with lorem 30 text is mentioned.']}, {'end': 580.148, 'segs': [{'end': 322.817, 'src': 'embed', 'start': 293.163, 'weight': 2, 'content': [{'end': 297.424, 'text': "And let's set a background of steel blue.", 'start': 293.163, 'duration': 4.261}, {'end': 302.365, 'text': 'And a color of white.', 'start': 299.064, 'duration': 3.301}, {'end': 304.905, 'text': "And let's do padding.", 'start': 303.564, 'duration': 1.341}, {'end': 309.248, 'text': "We'll say one point five rem and save.", 'start': 304.925, 'duration': 4.323}, {'end': 309.908, 'text': 'And there we go.', 'start': 309.368, 'duration': 0.54}, {'end': 312.23, 'text': 'So now we have a little bit of styling to our component.', 'start': 309.928, 'duration': 2.302}, {'end': 314.511, 'text': "Now we're going to implement react spring.", 'start': 312.59, 'duration': 1.921}, {'end': 316.933, 'text': "So let's go ahead and import.", 'start': 315.072, 'duration': 1.861}, {'end': 322.817, 'text': 'We want to import spring from react spring.', 'start': 317.793, 'duration': 5.024}], 'summary': 'Styling with steel blue, white color, and 1.5 rem padding implemented; react spring import added.', 'duration': 29.654, 'max_score': 293.163, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/S8yn3-WpVV8/pics/S8yn3-WpVV8293163.jpg'}, {'end': 389.767, 'src': 'heatmap', 'start': 339.705, 'weight': 0.702, 'content': [{'end': 352.628, 'text': "So I want to animate the whole thing and inside here we want to open up some curly braces and it's going to give us some props and we want to set that to an arrow function and then some parentheses,", 'start': 339.705, 'duration': 12.923}, {'end': 355.349, 'text': 'and then we need to have a container element.', 'start': 352.628, 'duration': 2.721}, {'end': 360.911, 'text': 'that has a style, and we pass in props to the style.', 'start': 356.047, 'duration': 4.864}, {'end': 362.253, 'text': "So that's how this works.", 'start': 361.272, 'duration': 0.981}, {'end': 370.24, 'text': 'And then whatever we want to animate, we can put within this div, which is going to be our entire output here of our JSX.', 'start': 362.653, 'duration': 7.587}, {'end': 373.082, 'text': "So let's put that right in here.", 'start': 371.001, 'duration': 2.081}, {'end': 375.924, 'text': 'Just have that over.', 'start': 374.924, 'duration': 1}, {'end': 377.024, 'text': 'All right.', 'start': 375.944, 'duration': 1.08}, {'end': 386.346, 'text': "Now, if I save this, it's going to go blank because this spring component here, this, actually has to have a couple props passed into it,", 'start': 377.144, 'duration': 9.202}, {'end': 389.767, 'text': 'which is the from and to props.', 'start': 386.346, 'duration': 3.421}], 'summary': 'Animating jsx using a spring component with specified props.', 'duration': 50.062, 'max_score': 339.705, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/S8yn3-WpVV8/pics/S8yn3-WpVV8339705.jpg'}, {'end': 438.129, 'src': 'heatmap', 'start': 410.57, 'weight': 0.89, 'content': [{'end': 417.852, 'text': 'And it will animate from being opacity zero invisible all the way to being completely opaque, which would be one.', 'start': 410.57, 'duration': 7.282}, {'end': 419.172, 'text': "So let's save.", 'start': 418.432, 'duration': 0.74}, {'end': 420.552, 'text': 'And there we go.', 'start': 420.052, 'duration': 0.5}, {'end': 423.053, 'text': 'So you can see that when the page loads, it fades in.', 'start': 420.592, 'duration': 2.461}, {'end': 424.273, 'text': 'All right.', 'start': 424.013, 'duration': 0.26}, {'end': 426.913, 'text': 'Now, I also want it to come down from the top.', 'start': 424.313, 'duration': 2.6}, {'end': 430.694, 'text': "So I'm going to add an additional property of margin top.", 'start': 427.033, 'duration': 3.661}, {'end': 438.129, 'text': 'And the starting point will be negative 500 because we want it to be out, you know, up above out of the screen.', 'start': 431.764, 'duration': 6.365}], 'summary': 'The element will fade in and come down from the top when the page loads.', 'duration': 27.559, 'max_score': 410.57, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/S8yn3-WpVV8/pics/S8yn3-WpVV8410570.jpg'}, {'end': 521.565, 'src': 'embed', 'start': 431.764, 'weight': 0, 'content': [{'end': 438.129, 'text': 'And the starting point will be negative 500 because we want it to be out, you know, up above out of the screen.', 'start': 431.764, 'duration': 6.365}, {'end': 443.933, 'text': 'And then we want to bring it to margin top zero, which is its natural position.', 'start': 438.629, 'duration': 5.304}, {'end': 445.514, 'text': "So we'll save and there we go.", 'start': 443.953, 'duration': 1.561}, {'end': 449.837, 'text': "So it's as easy as that to add to create simple animations.", 'start': 446.435, 'duration': 3.402}, {'end': 457.262, 'text': 'Now, component two, I want to fade in underneath after this comes down.', 'start': 450.478, 'duration': 6.784}, {'end': 463.639, 'text': "So let's create a new file in components called component2.js.", 'start': 457.443, 'duration': 6.196}, {'end': 473.646, 'text': "And I'm actually going to do a class-based component here because this is going to have the button where we want to be able to toggle component3.", 'start': 465.381, 'duration': 8.265}, {'end': 476.108, 'text': 'So we need to pass props up.', 'start': 474.607, 'duration': 1.501}, {'end': 478.822, 'text': "And I'll talk about that in a little bit.", 'start': 476.861, 'duration': 1.961}, {'end': 481.864, 'text': "But let's generate a class based component.", 'start': 479.283, 'duration': 2.581}, {'end': 485.087, 'text': 'We can do RCE with with that extension I have installed.', 'start': 481.884, 'duration': 3.203}, {'end': 487.768, 'text': "If you don't have it, just go ahead and copy this.", 'start': 485.487, 'duration': 2.281}, {'end': 492.652, 'text': "And it's basically in the render we want.", 'start': 488.709, 'duration': 3.943}, {'end': 495.313, 'text': "Let's first bring in react spring.", 'start': 493.552, 'duration': 1.761}, {'end': 499.556, 'text': "So we'll say import spring from.", 'start': 495.393, 'duration': 4.163}, {'end': 514.222, 'text': "react spring and let's grab from component one this whole thing right here, this whole spring component,", 'start': 503.937, 'duration': 10.285}, {'end': 517.924, 'text': "and we're going to put that right in the return.", 'start': 514.222, 'duration': 3.702}, {'end': 521.565, 'text': "okay, so we'll paste that in.", 'start': 517.924, 'duration': 3.641}], 'summary': 'Creating simple animations and class-based components in react. implementing spring component for animation.', 'duration': 89.801, 'max_score': 431.764, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/S8yn3-WpVV8/pics/S8yn3-WpVV8431764.jpg'}, {'end': 580.148, 'src': 'embed', 'start': 550.492, 'weight': 4, 'content': [{'end': 555.835, 'text': "All right, so let's save that and then we'll go to AppJS and we're going to bring that in.", 'start': 550.492, 'duration': 5.343}, {'end': 568.001, 'text': "So we want to import components to from want to go into the components folder and we want component to and then we'll just embed that down here.", 'start': 556.996, 'duration': 11.005}, {'end': 571.503, 'text': 'Whoops, whoops, whoops, whoops.', 'start': 568.021, 'duration': 3.482}, {'end': 573.885, 'text': 'All right.', 'start': 573.484, 'duration': 0.401}, {'end': 575.966, 'text': 'So component to good.', 'start': 573.945, 'duration': 2.021}, {'end': 580.148, 'text': "So what's happening is Component 2 is just being embedded.", 'start': 576.106, 'duration': 4.042}], 'summary': 'Embed component 2 into appjs to import components into the components folder.', 'duration': 29.656, 'max_score': 550.492, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/S8yn3-WpVV8/pics/S8yn3-WpVV8550492.jpg'}], 'start': 235.318, 'title': 'React component animation', 'summary': 'Demonstrates adding initial styling to a component, implementing react spring for simple animations, creating a fade-in effect with margin top property, and embedding component 2 into appjs.', 'chapters': [{'end': 580.148, 'start': 235.318, 'title': 'React component animation', 'summary': 'Demonstrates adding initial styling to a component, implementing react spring for simple animations, and creating a fade-in effect with margin top property. it also involves creating a class-based component for component 2, embedding component 2 into appjs.', 'duration': 344.83, 'highlights': ['Implementing react spring for simple animations The tutorial demonstrates using react spring to create simple animations, such as fading in and bringing down from the top, achieving a visually appealing user interface.', 'Adding initial styling to a component Initial styling is added to a component by setting styles for background, color, and padding, enhancing the visual presentation and user experience.', "Creating a fade-in effect with margin top property The fade-in effect is achieved by setting the 'margin top' property to -500 initially and transitioning it to 0, resulting in a smooth visual effect as the component appears on the screen.", 'Creating a class-based component for Component 2 A class-based component is created for Component 2, enabling the implementation of additional functionalities, such as toggling other components, and enhancing the reusability and modularity of the codebase.', 'Embedding Component 2 into AppJS Component 2 is embedded into AppJS, showcasing the modular approach in structuring and integrating components within the application, contributing to a scalable and maintainable codebase.']}], 'duration': 344.83, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/S8yn3-WpVV8/pics/S8yn3-WpVV8235318.jpg', 'highlights': ['Implementing react spring for simple animations The tutorial demonstrates using react spring to create simple animations, such as fading in and bringing down from the top, achieving a visually appealing user interface.', "Creating a fade-in effect with margin top property The fade-in effect is achieved by setting the 'margin top' property to -500 initially and transitioning it to 0, resulting in a smooth visual effect as the component appears on the screen.", 'Adding initial styling to a component Initial styling is added to a component by setting styles for background, color, and padding, enhancing the visual presentation and user experience.', 'Creating a class-based component for Component 2 A class-based component is created for Component 2, enabling the implementation of additional functionalities, such as toggling other components, and enhancing the reusability and modularity of the codebase.', 'Embedding Component 2 into AppJS Component 2 is embedded into AppJS, showcasing the modular approach in structuring and integrating components within the application, contributing to a scalable and maintainable codebase.']}, {'end': 765.677, 'segs': [{'end': 628.27, 'src': 'embed', 'start': 599.854, 'weight': 3, 'content': [{'end': 608.728, 'text': "so let's go back into component 2 and let's add here a config and Let's set a delay of 1000.", 'start': 599.854, 'duration': 8.874}, {'end': 617.179, 'text': "so that's 1000 milliseconds, so one second, and then let's set the duration to 1000 and save.", 'start': 608.728, 'duration': 8.451}, {'end': 621.645, 'text': 'so now it comes in, waits a second and then it takes a second to fade in.', 'start': 617.179, 'duration': 4.466}, {'end': 625.208, 'text': "OK. so that's that.", 'start': 622.686, 'duration': 2.522}, {'end': 628.27, 'text': 'Now I want to show you how we can do the inner text.', 'start': 625.308, 'duration': 2.962}], 'summary': 'Configured component 2 with a 1000ms delay and 1000ms duration for fade in.', 'duration': 28.416, 'max_score': 599.854, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/S8yn3-WpVV8/pics/S8yn3-WpVV8599854.jpg'}, {'end': 765.677, 'src': 'heatmap', 'start': 721.224, 'weight': 0, 'content': [{'end': 726.708, 'text': "and then for the styling, i'm just gonna grab that real quick and paste that in.", 'start': 721.224, 'duration': 5.484}, {'end': 736.548, 'text': "now, if i save this, You'll see that it goes from zero to ten, but it goes very fast and it shows decimal points.", 'start': 726.708, 'duration': 9.84}, {'end': 739.549, 'text': "So to fix that, let's add in a config.", 'start': 736.648, 'duration': 2.901}, {'end': 745.431, 'text': "OK, because we want to slow this down and I'm going to do a duration.", 'start': 739.569, 'duration': 5.862}, {'end': 754.354, 'text': 'of 10 seconds, so 10,000 milliseconds, and then, to get rid of the decimals, will just simply add on the two fixed method,', 'start': 746.963, 'duration': 7.391}, {'end': 763.006, 'text': "which is just a JavaScript method, and save, and now it'll take 10 seconds to animate and it'll also get rid of those decimals with the two fixed.", 'start': 754.354, 'duration': 8.652}, {'end': 764.757, 'text': 'All right.', 'start': 764.457, 'duration': 0.3}, {'end': 765.677, 'text': "So that's that.", 'start': 764.837, 'duration': 0.84}], 'summary': 'Animated styling slowed to 10 secs, decimals removed', 'duration': 51.239, 'max_score': 721.224, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/S8yn3-WpVV8/pics/S8yn3-WpVV8721224.jpg'}], 'start': 580.148, 'title': 'Adjusting fade-in delay and react component animation', 'summary': 'Covers adjusting fade-in delay and duration by setting a delay of 1000 milliseconds and a duration of 1000 milliseconds, as well as creating a react component for animating a number from 0 to 10 over 10 seconds, resulting in a smooth animation.', 'chapters': [{'end': 628.27, 'start': 580.148, 'title': 'Adjusting fade-in delay and duration', 'summary': 'Explains how to adjust the delay and duration for a fade-in effect, setting a delay of 1000 milliseconds (1 second) and a duration of 1000 milliseconds (1 second) to achieve the desired effect.', 'duration': 48.122, 'highlights': ['Setting a delay of 1000 milliseconds for the fade-in effect, effectively creating a 1-second delay.', 'Adjusting the duration to 1000 milliseconds (1 second) for the fade-in effect.']}, {'end': 765.677, 'start': 628.61, 'title': 'React component animation', 'summary': 'Demonstrates how to create a react component for animating a number from 0 to 10 over 10 seconds, utilizing props and styling, and using the tofixed method to remove decimals, resulting in a smooth 10-second animation.', 'duration': 137.067, 'highlights': ['Creating a React component to animate a number from 0 to 10 over 10 seconds The transcript explains the process of creating a React component to animate a number from 0 to 10 over a duration of 10 seconds.', 'Utilizing props to access and display the animated number The speaker demonstrates using props to access and display the animated number within the React component.', 'Applying styling to the animated number Styling is applied to the animated number using CSS classes, enhancing the visual presentation of the component.', 'Using the toFixed method to remove decimals from the animated number The toFixed method is employed to eliminate decimal points from the animated number, resulting in a smoother visual output.']}], 'duration': 185.529, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/S8yn3-WpVV8/pics/S8yn3-WpVV8580148.jpg', 'highlights': ['Creating a React component to animate a number from 0 to 10 over 10 seconds', 'Applying styling to the animated number', 'Utilizing props to access and display the animated number', 'Setting a delay of 1000 milliseconds for the fade-in effect', 'Adjusting the duration to 1000 milliseconds (1 second) for the fade-in effect', 'Using the toFixed method to remove decimals from the animated number']}, {'end': 1002.062, 'segs': [{'end': 799.306, 'src': 'embed', 'start': 765.838, 'weight': 0, 'content': [{'end': 767.858, 'text': "Now we're going to start to look at transitions.", 'start': 765.838, 'duration': 2.02}, {'end': 776.902, 'text': 'And the way that this is going to work is we want it to look at a piece of our component state and basically transition based on that.', 'start': 768.298, 'duration': 8.604}, {'end': 781.964, 'text': "So in our app JS, I'm going to create some state.", 'start': 776.982, 'duration': 4.982}, {'end': 790.787, 'text': "Oops We want to go above render and let's create state and let's set that to an object and we'll we'll create show.", 'start': 781.984, 'duration': 8.803}, {'end': 799.306, 'text': "component or show components to show component three because that's the one we're toggling and we're going to set that to false.", 'start': 792.56, 'duration': 6.746}], 'summary': 'Transitioning based on component state to show component three as false.', 'duration': 33.468, 'max_score': 765.838, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/S8yn3-WpVV8/pics/S8yn3-WpVV8765838.jpg'}, {'end': 973.667, 'src': 'embed', 'start': 816.759, 'weight': 2, 'content': [{'end': 828.322, 'text': "so we're gonna have to actually have an event in in on that button in component two to pass up a prop so that we can then create a method here to toggle it all right and then implement the transition.", 'start': 816.759, 'duration': 11.563}, {'end': 832.623, 'text': "so i guess first we'll create the actual component.", 'start': 828.322, 'duration': 4.301}, {'end': 851.556, 'text': "so let's say component3.js and let's do uh, it's going to be a functional component and it's just going to have an h1 component, 3 paragraph,", 'start': 832.623, 'duration': 18.933}, {'end': 855.88, 'text': 'and just add some initial style here.', 'start': 851.556, 'duration': 4.324}, {'end': 863.807, 'text': "so c3 style, and i'm just going to grab that All right.", 'start': 855.88, 'duration': 7.927}, {'end': 866.649, 'text': "So this component doesn't really we're not doing anything here.", 'start': 863.847, 'duration': 2.802}, {'end': 870.57, 'text': "It's just basically displaying this markup, this JSX here.", 'start': 866.709, 'duration': 3.861}, {'end': 876.753, 'text': "So I'm going to bring this in to to app JS.", 'start': 871.091, 'duration': 5.662}, {'end': 879.575, 'text': 'So we want to import component three.', 'start': 878.014, 'duration': 1.561}, {'end': 884.757, 'text': "And for now, I'm just going to put it in here and save.", 'start': 879.715, 'duration': 5.042}, {'end': 886.898, 'text': "OK, so now it's just there.", 'start': 885.417, 'duration': 1.481}, {'end': 889.9, 'text': "Now let's create the button in component two.", 'start': 887.358, 'duration': 2.542}, {'end': 903.827, 'text': "So in component two I'm going to go below the paragraph and let's create a button and we'll say toggle component three.", 'start': 890.805, 'duration': 13.022}, {'end': 910.235, 'text': "And let's add a style of BTN.", 'start': 905.772, 'duration': 4.463}, {'end': 912.417, 'text': "And let's do an onClick.", 'start': 910.976, 'duration': 1.441}, {'end': 916.819, 'text': 'Now, remember, the state is above us in app.js.', 'start': 913.017, 'duration': 3.802}, {'end': 921.502, 'text': "So we're just going to say this.props.toggle.", 'start': 917.04, 'duration': 4.462}, {'end': 924.564, 'text': "And then we'll catch that up above in app.js.", 'start': 921.763, 'duration': 2.801}, {'end': 928.027, 'text': 'But let me quickly just add that styling in real quick.', 'start': 925.345, 'duration': 2.682}, {'end': 932.859, 'text': "so let's see paste that in all right.", 'start': 929.918, 'duration': 2.941}, {'end': 940.602, 'text': "so we'll save and now component 2 has a button and when we click that it's going to call this dot, props dot, toggle.", 'start': 932.859, 'duration': 7.743}, {'end': 947.285, 'text': 'so in app.js, on component 2 we want to add toggle and set that to whatever we want to happen,', 'start': 940.602, 'duration': 6.683}, {'end': 953.947, 'text': "which i'm just going to call a method called toggle all right, and then we'll add that here.", 'start': 947.285, 'duration': 6.662}, {'end': 959.472, 'text': "so we use an arrow function And let's just make sure that it actually works.", 'start': 953.947, 'duration': 5.525}, {'end': 962.716, 'text': "So we'll just say console log one, two, three.", 'start': 960.213, 'duration': 2.503}, {'end': 966.079, 'text': "Let's open up our tools here and click it.", 'start': 962.736, 'duration': 3.343}, {'end': 967.421, 'text': 'And we see one, two, three.', 'start': 966.159, 'duration': 1.262}, {'end': 968.562, 'text': 'All right.', 'start': 967.441, 'duration': 1.121}, {'end': 973.667, 'text': 'Now I just want this toggle to change the state of show component three.', 'start': 968.662, 'duration': 5.005}], 'summary': 'Creating components, adding button functionality, and toggling state', 'duration': 156.908, 'max_score': 816.759, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/S8yn3-WpVV8/pics/S8yn3-WpVV8816759.jpg'}], 'start': 765.838, 'title': 'React component integration and transitions', 'summary': "Discusses creating transitions in react, utilizing component state, setting up initial state, and creating an event to toggle the transition. it also covers integrating react components, importing and utilizing components, adding event handling, updating state, and demonstrating toggling a component's visibility based on user interaction.", 'chapters': [{'end': 851.556, 'start': 765.838, 'title': 'Creating transitions in react', 'summary': 'Discusses creating transitions in react by using component state to manage the transition, setting up the initial state for the component, and creating an event to toggle the transition.', 'duration': 85.718, 'highlights': ['The chapter discusses creating transitions in React by using component state to manage the transition. Using component state for managing the transition', 'Setting up the initial state for the component to facilitate the transition. Initial state setup for the component', 'Creating an event to toggle the transition, passing up a prop from the button in component two to create a method for toggling the transition. Creating an event to toggle the transition']}, {'end': 1002.062, 'start': 851.556, 'title': 'React component integration', 'summary': "Covers integrating react components, including importing and utilizing components, adding event handling, and updating state, with a demonstration of toggling a component's visibility based on user interaction.", 'duration': 150.506, 'highlights': ['The chapter demonstrates importing and utilizing React components for integration and display, as well as adding event handling for user interaction.', 'The transcript includes a demonstration of updating the component state using this.setState to toggle the visibility of component three based on user interaction.', 'The instructor showcases the process of creating and styling a button in component two, as well as implementing an onClick event to trigger the toggle function and update the state accordingly.']}], 'duration': 236.224, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/S8yn3-WpVV8/pics/S8yn3-WpVV8765838.jpg', 'highlights': ['Using component state for managing the transition', 'Setting up the initial state for the component', 'Creating an event to toggle the transition', 'Demonstrates importing and utilizing React components for integration and display', 'Adding event handling for user interaction', 'Demonstration of updating the component state using this.setState to toggle the visibility of component three based on user interaction', 'Showcasing the process of creating and styling a button in component two, as well as implementing an onClick event to trigger the toggle function and update the state accordingly']}, {'end': 1246.756, 'segs': [{'end': 1036.167, 'src': 'embed', 'start': 1002.122, 'weight': 0, 'content': [{'end': 1004.662, 'text': 'But we want it to fade out to transition.', 'start': 1002.122, 'duration': 2.54}, {'end': 1016.091, 'text': "So that's that's where react spring comes in, so let's bring in from react react spring transition.", 'start': 1005.142, 'duration': 10.949}, {'end': 1023.637, 'text': "And we also want we also want something called animate, and that's going to be from.", 'start': 1016.111, 'duration': 7.526}, {'end': 1026.66, 'text': 'React spring.', 'start': 1025.679, 'duration': 0.981}, {'end': 1033.566, 'text': "All right now I'm going to go down here and I'm going to just get rid of this, this component three,", 'start': 1026.68, 'duration': 6.886}, {'end': 1036.167, 'text': 'because what we want to do is put in a transition.', 'start': 1033.566, 'duration': 2.601}], 'summary': 'Integrating transition using react spring for component animation.', 'duration': 34.045, 'max_score': 1002.122, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/S8yn3-WpVV8/pics/S8yn3-WpVV81002122.jpg'}, {'end': 1123.919, 'src': 'embed', 'start': 1071.372, 'weight': 2, 'content': [{'end': 1074.733, 'text': "And in our case, it's going to be this piece of state, this show component three.", 'start': 1071.372, 'duration': 3.361}, {'end': 1085.056, 'text': "So let's add items equals this dot state dot show component three.", 'start': 1075.333, 'duration': 9.723}, {'end': 1091.598, 'text': 'And then we want to have a an enter or is it.', 'start': 1086.196, 'duration': 5.402}, {'end': 1096.239, 'text': 'So we want from enter and leave.', 'start': 1093.178, 'duration': 3.061}, {'end': 1098.812, 'text': "So let's add those.", 'start': 1097.751, 'duration': 1.061}, {'end': 1109.919, 'text': "So from we're going to set the opacity to zero and then enter.", 'start': 1098.952, 'duration': 10.967}, {'end': 1117.684, 'text': 'We want to set opacity to one and then leave.', 'start': 1109.939, 'duration': 7.745}, {'end': 1123.919, 'text': 'We want to set opacity to zero.', 'start': 1117.704, 'duration': 6.215}], 'summary': 'Code sets opacity to 0 and 1 for enter and leave transitions.', 'duration': 52.547, 'max_score': 1071.372, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/S8yn3-WpVV8/pics/S8yn3-WpVV81071372.jpg'}, {'end': 1236.526, 'src': 'heatmap', 'start': 1197.731, 'weight': 1, 'content': [{'end': 1198.792, 'text': 'And that should do it.', 'start': 1197.731, 'duration': 1.061}, {'end': 1199.993, 'text': "So let's save.", 'start': 1199.012, 'duration': 0.981}, {'end': 1205.52, 'text': 'And now if we click this toggle component, component three fades in.', 'start': 1201.535, 'duration': 3.985}, {'end': 1207.854, 'text': 'All right.', 'start': 1207.554, 'duration': 0.3}, {'end': 1208.915, 'text': 'So it adds that effect.', 'start': 1207.874, 'duration': 1.041}, {'end': 1214.899, 'text': 'And obviously you could add any any CSS properties or any style properties that you want for these.', 'start': 1208.975, 'duration': 5.924}, {'end': 1216.941, 'text': 'So you can do some cool stuff with it.', 'start': 1215.26, 'duration': 1.681}, {'end': 1219.863, 'text': 'But, you know, I want to keep this very basic.', 'start': 1217.862, 'duration': 2.001}, {'end': 1225.667, 'text': "It's basically just so you guys have a foundation so that you can continue on and create some some cool stuff.", 'start': 1219.943, 'duration': 5.724}, {'end': 1226.836, 'text': 'All right.', 'start': 1226.536, 'duration': 0.3}, {'end': 1227.997, 'text': "So I think that's it.", 'start': 1226.956, 'duration': 1.041}, {'end': 1232.922, 'text': 'I will put a link in the description to this code if you want it to use it for reference.', 'start': 1228.118, 'duration': 4.804}, {'end': 1236.526, 'text': 'Also, check out the documentation has a bunch of great examples.', 'start': 1233.022, 'duration': 3.504}], 'summary': 'Tutorial on adding fade effect to toggle component. provides foundation for creating cool stuff.', 'duration': 49.068, 'max_score': 1197.731, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/S8yn3-WpVV8/pics/S8yn3-WpVV81197731.jpg'}], 'start': 1002.122, 'title': 'React spring transition and using animated components in react', 'summary': 'Demonstrates using react spring for transitioning components, setting opacity values for entering and leaving, and using state to control the transition. it also covers using the animated.div component in react to create a fade-in effect for component three, providing foundational understanding for further customization and referencing external documentation for additional examples.', 'chapters': [{'end': 1150.463, 'start': 1002.122, 'title': 'React spring transition', 'summary': 'Demonstrates using react spring for transitioning components, setting opacity values for entering and leaving, and using state to control the transition.', 'duration': 148.341, 'highlights': ['Using React Spring for transitioning components, setting opacity values for entering and leaving, and using state to control the transition.', 'Setting opacity to zero for the entering component and opacity to one for the leaving component.', "Using state to control the transition by setting the 'show' component as an item."]}, {'end': 1246.756, 'start': 1150.483, 'title': 'Using animated components in react', 'summary': 'Demonstrates how to use the animated.div component in react to create a fade-in effect for component three, providing a foundational understanding for further customization and referencing external documentation for additional examples.', 'duration': 96.273, 'highlights': ['The chapter demonstrates how to use the animated.div component in React to create a fade-in effect for component three. It shows the process of using the animated.div component to achieve a specific visual effect for a React component.', 'Providing a foundational understanding for further customization and referencing external documentation for additional examples. The tutorial aims to equip viewers with a basic understanding of animated components in React and encourages further exploration through external resources.']}], 'duration': 244.634, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/S8yn3-WpVV8/pics/S8yn3-WpVV81002122.jpg', 'highlights': ['Using React Spring for transitioning components, setting opacity values for entering and leaving, and using state to control the transition.', 'The chapter demonstrates how to use the animated.div component in React to create a fade-in effect for component three.', 'Setting opacity to zero for the entering component and opacity to one for the leaving component.', "Using state to control the transition by setting the 'show' component as an item.", 'Providing a foundational understanding for further customization and referencing external documentation for additional examples.', 'The tutorial aims to equip viewers with a basic understanding of animated components in React and encourages further exploration through external resources.']}], 'highlights': ['React Spring excels in applying animations without relying on React to render updates frame by frame, unlike most animation libraries.', 'React Spring demonstrates the ability to animate props or text, such as a counter going from one to 10.', 'The chapter details the better performance of React Spring for advanced and intricate tasks compared to basic animations.', 'The process of setting up a basic React application is explained, including removing default markup, adding custom CSS, and installing React Spring.', 'The installation of React Spring involves using npm to install the package and creating multiple components for the application.', 'Implementing react spring for simple animations The tutorial demonstrates using react spring to create simple animations, such as fading in and bringing down from the top, achieving a visually appealing user interface.', "Creating a fade-in effect with margin top property The fade-in effect is achieved by setting the 'margin top' property to -500 initially and transitioning it to 0, resulting in a smooth visual effect as the component appears on the screen.", 'Adding initial styling to a component Initial styling is added to a component by setting styles for background, color, and padding, enhancing the visual presentation and user experience.', 'Creating a class-based component for Component 2 A class-based component is created for Component 2, enabling the implementation of additional functionalities, such as toggling other components, and enhancing the reusability and modularity of the codebase.', 'Creating a React component to animate a number from 0 to 10 over 10 seconds', 'Applying styling to the animated number', 'Utilizing props to access and display the animated number', 'Setting a delay of 1000 milliseconds for the fade-in effect', 'Adjusting the duration to 1000 milliseconds (1 second) for the fade-in effect', 'Using the toFixed method to remove decimals from the animated number', 'Using component state for managing the transition', 'Setting up the initial state for the component', 'Creating an event to toggle the transition', 'Demonstrates importing and utilizing React components for integration and display', 'Adding event handling for user interaction', 'Demonstration of updating the component state using this.setState to toggle the visibility of component three based on user interaction', 'Showcasing the process of creating and styling a button in component two, as well as implementing an onClick event to trigger the toggle function and update the state accordingly', 'Using React Spring for transitioning components, setting opacity values for entering and leaving, and using state to control the transition.', 'The chapter demonstrates how to use the animated.div component in React to create a fade-in effect for component three.', 'Setting opacity to zero for the entering component and opacity to one for the leaving component.', "Using state to control the transition by setting the 'show' component as an item.", 'Providing a foundational understanding for further customization and referencing external documentation for additional examples.', 'The tutorial aims to equip viewers with a basic understanding of animated components in React and encourages further exploration through external resources.']}