title
Using Chart.js With React

description
In this video I will show you how to build a React app that implements the Chart.js JavaScript library for building charts Please watch the "Getting Started With Chart.js" video first if you are unfamiliar with Chart.js https://www.youtube.com/watch?v=sE08f4iuOhA CODE: Code for this video https://github.com/bradtraversy/reactcharts React-chartjs-2 Github Page https://github.com/gor181/react-chartjs-2 10 Project React Course! http://www.traversymedia.com/course/projects-in-reactjs-the-complete-react-learning-course/ SUPPORT: We spend massive amounts of time creating these free videos, please donate to show your support: http://www.paypal.me/traversymedia http://www.patreon.com/traversymedia FOLLOW TRAVERSY MEDIA: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia https://www.instagram.com/traversymedia

detail
{'title': 'Using Chart.js With React', 'heatmap': [{'end': 441.9, 'start': 423.433, 'weight': 0.838}, {'end': 587.321, 'start': 564.064, 'weight': 0.709}, {'end': 729.24, 'start': 654.21, 'weight': 0.704}], 'summary': "Tutorial 'using chart.js with react' demonstrates creating a react application to display a chart using chart.js, covering setting up npm, creating react chart component, customizing chart options, refactoring the app, and discussing react component state and props, providing examples and recommendations for further learning.", 'chapters': [{'end': 200.831, 'segs': [{'end': 179.761, 'src': 'embed', 'start': 39.143, 'weight': 0, 'content': [{'end': 47.244, 'text': "We're going to basically create a React application that's going to display this data and we're going to format it so that we could easily switch out the data,", 'start': 39.143, 'duration': 8.101}, {'end': 50.745, 'text': 'switch out the cities and the population numbers and all that.', 'start': 47.244, 'duration': 3.501}, {'end': 54.446, 'text': "We're going to create a chart component that we can pass the data into.", 'start': 51.425, 'duration': 3.021}, {'end': 61.371, 'text': 'Now, I would highly highly suggest that you watch the Getting Started with Chart.js video before doing this,', 'start': 55.226, 'duration': 6.145}, {'end': 64.072, 'text': 'unless you really understand how Chart.js works.', 'start': 61.371, 'duration': 2.701}, {'end': 75.141, 'text': "Now, as far as what we'll be using to work in React, we're going to use this React-Chart.js-2 module or package.", 'start': 65.033, 'duration': 10.108}, {'end': 78.683, 'text': 'not to be confused with just react chart js.', 'start': 75.621, 'duration': 3.062}, {'end': 84.007, 'text': "we're using this one because we're using chart js version 2, which is the the recommended version,", 'start': 78.683, 'duration': 5.324}, {'end': 88.891, 'text': 'and there seems to be some compatible compatibility issues with just the react chart js.', 'start': 84.007, 'duration': 4.884}, {'end': 90.272, 'text': 'okay, so make sure you have this.', 'start': 88.891, 'duration': 1.381}, {'end': 93.314, 'text': "it's by this gore 181..", 'start': 90.272, 'duration': 3.042}, {'end': 100.179, 'text': 'So basically all we need to do is install this React Chart JS2 along with Chart.js.', 'start': 93.314, 'duration': 6.865}, {'end': 101.94, 'text': "That's a dependency of this package.", 'start': 100.219, 'duration': 1.721}, {'end': 106.383, 'text': 'And then once we do that, we can import it and then we can create a chart from it.', 'start': 102.42, 'duration': 3.963}, {'end': 112.667, 'text': "All right, so we're gonna set up a React application using the Create React App tool.", 'start': 106.843, 'duration': 5.824}, {'end': 119.331, 'text': "okay?. If you've never used this, you just need to install it globally and then you can generate an application with this command here", 'start': 112.667, 'duration': 6.664}, {'end': 120.953, 'text': "So let's go ahead and do that.", 'start': 119.432, 'duration': 1.521}, {'end': 122.774, 'text': "I'm in my projects folder here.", 'start': 121.013, 'duration': 1.761}, {'end': 125.155, 'text': "But first we're going to install this globally.", 'start': 123.214, 'duration': 1.941}, {'end': 132.058, 'text': "So let's say npm install dash g and it's going to be create dash react dash app.", 'start': 125.215, 'duration': 6.843}, {'end': 137.14, 'text': 'I already have installed so mine will go really quick.', 'start': 132.918, 'duration': 4.222}, {'end': 146.625, 'text': "And then once you do that we can generate an application by doing create react app and then I'm going to call this react charts.", 'start': 137.24, 'duration': 9.385}, {'end': 153.166, 'text': "Now, I'm using git bash as my terminal or my command line.", 'start': 148.603, 'duration': 4.563}, {'end': 162.813, 'text': "If you want this for Windows, just go to, I think it's git-scm.com, and you can download that and install it if you want.", 'start': 153.186, 'duration': 9.627}, {'end': 169.117, 'text': 'But, of course, you could use your standard Windows command line, your PowerShell, or your Linux or Mac terminal.', 'start': 163.273, 'duration': 5.844}, {'end': 172.099, 'text': "All right, so that's going to get set up.", 'start': 169.137, 'duration': 2.962}, {'end': 176.199, 'text': 'now this is not going to be.', 'start': 174.258, 'duration': 1.941}, {'end': 179.761, 'text': 'um, this is not going to be an introduction to react.', 'start': 176.199, 'duration': 3.562}], 'summary': 'Creating a react application to display and format data with react-chart.js-2, using create react app tool.', 'duration': 140.618, 'max_score': 39.143, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ly-9VTXJlnA/pics/Ly-9VTXJlnA39143.jpg'}], 'start': 7.543, 'title': 'Creating react chart component and setting up react application', 'summary': "Demonstrates creating a react application to display a chart using chart.js, emphasizing the importance of watching 'getting started with chart.js' video before using react-chart.js-2 for chart.js version 2 and covering the setup of a react application using create react app tool.", 'chapters': [{'end': 54.446, 'start': 7.543, 'title': 'Creating react chart component', 'summary': "Demonstrates the creation of a react application to display a chart using the chart.js javascript library, allowing for easy data switching and formatting, in response to viewers' requests after the video 'getting started with chart.js'.", 'duration': 46.903, 'highlights': ['Creation of React application to display a chart with Chart.js library The chapter demonstrates the creation of a React application to display a chart using the Chart.js JavaScript library.', "Responsive to viewers' requests for React implementation after 'Getting Started with Chart.js' video The chapter is a response to viewers' requests in the comments of the 'Getting Started with Chart.js' video, seeking guidance on implementing the chart in React.", 'Flexibility to easily switch out data and format The React application allows for easy switching of data and formatting, enabling the modification of cities and population numbers.']}, {'end': 101.94, 'start': 55.226, 'title': 'Using react-chart.js-2 for chart.js version 2', 'summary': "Emphasizes the importance of watching 'getting started with chart.js' video before using react-chart.js-2, as it's recommended for chart.js version 2 and has compatibility issues with 'just react chart js'. it also mentions the necessity of installing react-chart.js-2 along with chart.js as a dependency.", 'duration': 46.714, 'highlights': ["The chapter highlights the importance of watching 'Getting Started with Chart.js' video before using React-Chart.js-2, unless understanding how Chart.js works, as it's recommended for Chart.js version 2 and has compatibility issues with 'just react chart js'.", 'It mentions the necessity of installing React-Chart.js-2 along with Chart.js as a dependency.']}, {'end': 200.831, 'start': 102.42, 'title': 'Setting up react application with create react app', 'summary': 'Covers setting up a react application using the create react app tool, including the installation process and considerations for different operating systems.', 'duration': 98.411, 'highlights': ['The chapter covers setting up a React application using the Create React App tool.', "Installation of Create React App globally is demonstrated using the command 'npm install -g create-react-app.'", 'Considerations for different operating systems, including Windows, are discussed for setting up the React application.']}], 'duration': 193.288, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ly-9VTXJlnA/pics/Ly-9VTXJlnA7543.jpg', 'highlights': ['Demonstrates creating a React application to display a chart with Chart.js library.', "Responsive to viewers' requests for React implementation after 'Getting Started with Chart.js' video.", 'Flexibility to easily switch out data and format in the React application.', "Importance of watching 'Getting Started with Chart.js' video before using React-Chart.js-2 for Chart.js version 2.", 'Necessity of installing React-Chart.js-2 along with Chart.js as a dependency.', 'Covers setting up a React application using the Create React App tool.', "Demonstrates installation of Create React App globally using the command 'npm install -g create-react-app.'", 'Considerations for different operating systems, including Windows, are discussed for setting up the React application.']}, {'end': 481.073, 'segs': [{'end': 251.4, 'src': 'embed', 'start': 200.831, 'weight': 0, 'content': [{'end': 204.43, 'text': 'all right, and then we want to install, uh.', 'start': 200.831, 'duration': 3.599}, {'end': 205.451, 'text': 'these two things here.', 'start': 204.43, 'duration': 1.021}, {'end': 207.372, 'text': "so i'll just grab this npm command.", 'start': 205.451, 'duration': 1.921}, {'end': 211.274, 'text': "obviously need node.js installed and we'll go ahead and paste that in.", 'start': 207.372, 'duration': 3.902}, {'end': 220.52, 'text': "okay, that's gonna set up those two packages for us, alright.", 'start': 211.274, 'duration': 9.246}, {'end': 223.722, 'text': "so once that's done, we can go ahead and uh.", 'start': 220.52, 'duration': 3.202}, {'end': 230.608, 'text': "let's first open up our text editor i'm gonna open up atom with atom dot Okay, and you can use any text editor you want.", 'start': 223.722, 'duration': 6.886}, {'end': 236.633, 'text': 'I suggest Atom or Visual Studio Code or Sublime Text, something like that.', 'start': 231.889, 'duration': 4.744}, {'end': 244.398, 'text': "All right, and then what we'll do is start up our application, and we can do that with npm start.", 'start': 236.653, 'duration': 7.745}, {'end': 251.4, 'text': "All right, and you'll see it opens up on port 3000.", 'start': 247.82, 'duration': 3.58}], 'summary': 'Install npm packages, open text editor, start application with npm on port 3000.', 'duration': 50.569, 'max_score': 200.831, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ly-9VTXJlnA/pics/Ly-9VTXJlnA200831.jpg'}, {'end': 301.104, 'src': 'embed', 'start': 275.03, 'weight': 2, 'content': [{'end': 280.793, 'text': "So what I usually do is when we're working with data, any kind of data, whether we're just, you know,", 'start': 275.03, 'duration': 5.763}, {'end': 289.777, 'text': "it's local or we're making an AJAX request I like to pull that in from the root app component and then pass it along to any sub components that we create,", 'start': 280.793, 'duration': 8.984}, {'end': 291.078, 'text': 'such as the chart component.', 'start': 289.777, 'duration': 1.301}, {'end': 292.939, 'text': "All right, so that's what we're going to do.", 'start': 291.738, 'duration': 1.201}, {'end': 301.104, 'text': "Now I'm going to create in the source folder, I'm going to create a folder called Components, and then we're going to create a file in here.", 'start': 292.959, 'duration': 8.145}], 'summary': 'Data is pulled from root app component to sub components like chart component.', 'duration': 26.074, 'max_score': 275.03, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ly-9VTXJlnA/pics/Ly-9VTXJlnA275030.jpg'}, {'end': 342.672, 'src': 'embed', 'start': 315.293, 'weight': 4, 'content': [{'end': 319.956, 'text': 'We want to import the component package, and this is going to be from React.', 'start': 315.293, 'duration': 4.663}, {'end': 321.953, 'text': 'All right.', 'start': 321.653, 'duration': 0.3}, {'end': 327.258, 'text': 'And then we also want to bring in the React.js chart.', 'start': 323.174, 'duration': 4.084}, {'end': 332.863, 'text': 'So if we look over here, they give us an example to bring in a donut chart.', 'start': 327.658, 'duration': 5.205}, {'end': 336.266, 'text': "So I'll just put that in here, but I'm not going to use a donut chart.", 'start': 333.183, 'duration': 3.083}, {'end': 337.147, 'text': "I'm going to use a bar.", 'start': 336.306, 'duration': 0.841}, {'end': 342.672, 'text': "And then I'm also going to bring in wine and pie.", 'start': 338.909, 'duration': 3.763}], 'summary': 'Import react component package and use bar chart instead of donut, also bring in wine and pie.', 'duration': 27.379, 'max_score': 315.293, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ly-9VTXJlnA/pics/Ly-9VTXJlnA315293.jpg'}, {'end': 390.738, 'src': 'embed', 'start': 365.552, 'weight': 3, 'content': [{'end': 376.255, 'text': "If we look at the documentation here for React Chart JS and we go down here, you'll see that we can insert whatever type we want with this tag here.", 'start': 365.552, 'duration': 10.703}, {'end': 377.815, 'text': 'So this is going to be for a bar chart.', 'start': 376.315, 'duration': 1.5}, {'end': 379.015, 'text': "So let's grab that.", 'start': 377.895, 'duration': 1.12}, {'end': 388.078, 'text': "And then when you're working in React, whenever you want to output to the screen, you want to call a render function, a render method.", 'start': 379.936, 'duration': 8.142}, {'end': 390.738, 'text': 'And from here.', 'start': 388.918, 'duration': 1.82}], 'summary': 'Using react chart js to create a bar chart and call a render method.', 'duration': 25.186, 'max_score': 365.552, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ly-9VTXJlnA/pics/Ly-9VTXJlnA365552.jpg'}, {'end': 450.544, 'src': 'heatmap', 'start': 423.433, 'weight': 0.838, 'content': [{'end': 427.114, 'text': 'and then we should be able to go to our main app component and import that.', 'start': 423.433, 'duration': 3.681}, {'end': 432.696, 'text': "so we'll say import chart, and that's going to be from dot.", 'start': 427.114, 'duration': 5.582}, {'end': 437.018, 'text': 'slash components, slash chart, all right.', 'start': 432.696, 'duration': 4.322}, {'end': 439.459, 'text': "and then where i'm going to put this is is down here.", 'start': 437.018, 'duration': 2.441}, {'end': 441.9, 'text': "i'm going to leave the the little header that they have.", 'start': 439.459, 'duration': 2.441}, {'end': 448.563, 'text': "i'm going to replace this paragraph right here with chart like that, All right.", 'start': 441.9, 'duration': 6.663}, {'end': 450.544, 'text': 'Oh, we also need to export it.', 'start': 449.123, 'duration': 1.421}], 'summary': "Import 'chart' component from components/chart and replace paragraph with it.", 'duration': 27.111, 'max_score': 423.433, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ly-9VTXJlnA/pics/Ly-9VTXJlnA423433.jpg'}], 'start': 200.831, 'title': 'Setting up npm and creating a react chart component', 'summary': 'Covers setting up npm for package installation, starting the application, and creating a react chart component, with emphasis on data passing and integration into the main app.', 'chapters': [{'end': 251.4, 'start': 200.831, 'title': 'Setting up npm and starting application', 'summary': 'Covers the installation of npm packages using npm command, starting the application with npm start, and opening it on port 3000.', 'duration': 50.569, 'highlights': ['Starting the application with npm start opens it on port 3000.', 'The chapter covers the installation of NPM packages using npm command.']}, {'end': 481.073, 'start': 251.4, 'title': 'Creating a react chart component', 'summary': 'Discusses creating a react chart component, including importing necessary packages, defining the component class, and integrating the component into the main app, emphasizing the importance of passing data from the root app component to sub components.', 'duration': 229.673, 'highlights': ['The chapter emphasizes the importance of passing data from the root app component to sub components, ensuring efficient data management and reusability.', 'The process of defining the React component class and rendering the chart is detailed, underscoring the utilization of JSX and the imperative render method for outputting to the screen.', 'The import of necessary packages, such as React and React Chart JS, is outlined, highlighting the essential components required for creating the chart component.']}], 'duration': 280.242, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ly-9VTXJlnA/pics/Ly-9VTXJlnA200831.jpg', 'highlights': ['Starting the application with npm start opens it on port 3000.', 'The chapter covers the installation of NPM packages using npm command.', 'The chapter emphasizes the importance of passing data from the root app component to sub components, ensuring efficient data management and reusability.', 'The process of defining the React component class and rendering the chart is detailed, underscoring the utilization of JSX and the imperative render method for outputting to the screen.', 'The import of necessary packages, such as React and React Chart JS, is outlined, highlighting the essential components required for creating the chart component.']}, {'end': 715.191, 'segs': [{'end': 623.237, 'src': 'heatmap', 'start': 564.064, 'weight': 0, 'content': [{'end': 577.733, 'text': "and then what I'm going to do is go to the original Chart.js script that we created and go down to where we have our mass pop chart and we have this data.", 'start': 564.064, 'duration': 13.669}, {'end': 587.321, 'text': 'so we have labels and then we have a data sets array with the population, it has all the population numbers and then it has the colors of each bar.', 'start': 577.733, 'duration': 9.588}, {'end': 593.466, 'text': "if we want to add different colors for each bar and then some other stuff border width, I'm actually not going to include this stuff.", 'start': 587.321, 'duration': 6.145}, {'end': 595.248, 'text': "So what I'll do?", 'start': 594.327, 'duration': 0.921}, {'end': 600.271, 'text': "it's probably better if I just kind of type this out so you guys don't get confused.", 'start': 595.248, 'duration': 5.023}, {'end': 601.571, 'text': "So let's say labels.", 'start': 600.331, 'duration': 1.24}, {'end': 603.292, 'text': 'All right.', 'start': 601.591, 'duration': 1.701}, {'end': 606.554, 'text': "And then I'll just paste in the array of cities.", 'start': 603.392, 'duration': 3.162}, {'end': 614.399, 'text': 'Okay And like I said, I would highly recommend that you go and you watch the original Chart.js video.', 'start': 606.574, 'duration': 7.825}, {'end': 615.919, 'text': 'So we have labels.', 'start': 615.119, 'duration': 0.8}, {'end': 617.961, 'text': "And then under that, we'll have our data sets.", 'start': 616.02, 'duration': 1.941}, {'end': 623.237, 'text': "Actually, that shouldn't be camel case data sets.", 'start': 620.054, 'duration': 3.183}], 'summary': 'Editing chart.js script to include population data and city labels', 'duration': 122.357, 'max_score': 564.064, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ly-9VTXJlnA/pics/Ly-9VTXJlnA564064.jpg'}], 'start': 484.551, 'title': 'React component state and props', 'summary': 'Explains the usage of state and props in react components, including creating initial state and passing props, with an emphasis on maintaining data in the state object. it also discusses adding chart data in chart.js, including population numbers, colors for each bar, and accessing data from the component state, with a recommendation to watch the original chart.js video for more details.', 'chapters': [{'end': 577.733, 'start': 484.551, 'title': 'React component state and props', 'summary': 'Explains the usage of state and props in react components, including the process of creating initial state using a constructor and passing props into components, with an emphasis on maintaining data in the state object.', 'duration': 93.182, 'highlights': ['The chapter emphasizes the importance of state in React, stating that state is where all the data should be kept.', 'It explains the process of creating initial state using a constructor, which is a function that runs when the component is initialized.', 'The usage of props in React components is discussed, highlighting that props are properties that can be passed into components, such as setting the height property to a specific value.']}, {'end': 715.191, 'start': 577.733, 'title': 'Adding chart data in chart.js', 'summary': 'Discusses adding chart data in chart.js, including population numbers, colors for each bar, and accessing data from the component state, with a recommendation to watch the original chart.js video for more details.', 'duration': 137.458, 'highlights': ['The chapter discusses adding chart data in Chart.js, including population numbers, colors for each bar, and accessing data from the component state. Key points: explains the process of adding chart data in Chart.js, including population numbers and colors for each bar.', 'A recommendation is made to watch the original Chart.js video for more details on the topic. Key point: emphasizes the importance of watching the original Chart.js video for a comprehensive understanding.', 'The process involves accessing data from the component state to display the chart data. Key point: highlights the use of component state to access and display the chart data.']}], 'duration': 230.64, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ly-9VTXJlnA/pics/Ly-9VTXJlnA484551.jpg', 'highlights': ['State is where all the data should be kept in React.', 'Creating initial state using a constructor is explained.', 'Props are properties that can be passed into components.', 'Adding chart data in Chart.js, including population numbers and colors for each bar, is discussed.', 'A recommendation is made to watch the original Chart.js video for more details.', 'Accessing data from the component state to display the chart data is emphasized.']}, {'end': 974.729, 'segs': [{'end': 766.009, 'src': 'embed', 'start': 715.291, 'weight': 0, 'content': [{'end': 719.252, 'text': "I'm going to get rid of this value right here, this maintain aspect ratio.", 'start': 715.291, 'duration': 3.961}, {'end': 723.834, 'text': "I'll just clear out this whole thing right here.", 'start': 719.272, 'duration': 4.562}, {'end': 729.24, 'text': 'Whoops, actually, you know what, we need to keep it like that.', 'start': 725.317, 'duration': 3.923}, {'end': 730.842, 'text': 'There we go.', 'start': 730.421, 'duration': 0.421}, {'end': 733.103, 'text': "So now it's not all squished.", 'start': 731.602, 'duration': 1.501}, {'end': 739.128, 'text': 'And if you wanted to, you could add a height if you want and keep the aspect ratio, but this is fine.', 'start': 733.364, 'duration': 5.764}, {'end': 747.755, 'text': 'So for the options, if we look at the original script, bring that over.', 'start': 740.009, 'duration': 7.746}, {'end': 752.539, 'text': 'Okay, so we have this options array right here, or options object.', 'start': 747.775, 'duration': 4.764}, {'end': 757.6, 'text': 'And then inside there, we have embedded objects like the title, the legend, the layout, all that.', 'start': 753.055, 'duration': 4.545}, {'end': 759.482, 'text': "I'm not going to include all of these.", 'start': 758.02, 'duration': 1.462}, {'end': 762.185, 'text': "You guys can if you want, but I'm just going to grab.", 'start': 759.522, 'duration': 2.663}, {'end': 766.009, 'text': "We're just going to use the title and the legend.", 'start': 763.266, 'duration': 2.743}], 'summary': 'Adjusting aspect ratio and selecting specific options for the script.', 'duration': 50.718, 'max_score': 715.291, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ly-9VTXJlnA/pics/Ly-9VTXJlnA715291.jpg'}, {'end': 861.575, 'src': 'embed', 'start': 809.458, 'weight': 1, 'content': [{'end': 811.299, 'text': "so let's save that and see what happens.", 'start': 809.458, 'duration': 1.841}, {'end': 813.019, 'text': 'Okay, so now we have the title here.', 'start': 811.319, 'duration': 1.7}, {'end': 816.38, 'text': "Let's actually change the font size of the title.", 'start': 813.92, 'duration': 2.46}, {'end': 820.862, 'text': 'So if we say, I think I can do that, right? Font size.', 'start': 817.401, 'duration': 3.461}, {'end': 825.984, 'text': 'Font size.', 'start': 825.283, 'duration': 0.701}, {'end': 827.384, 'text': 'Let me just check real quick.', 'start': 826.084, 'duration': 1.3}, {'end': 830.765, 'text': 'Yeah, right here.', 'start': 830.185, 'duration': 0.58}, {'end': 831.245, 'text': 'Font size 25.', 'start': 830.925, 'duration': 0.32}, {'end': 831.505, 'text': 'All right.', 'start': 831.245, 'duration': 0.26}, {'end': 839.197, 'text': "Okay, so now the title's bigger.", 'start': 837.836, 'duration': 1.361}, {'end': 840.677, 'text': 'So we have these options.', 'start': 839.677, 'duration': 1}, {'end': 844.739, 'text': 'Now, you can decide what options you want to use here, obviously.', 'start': 840.737, 'duration': 4.002}, {'end': 848.781, 'text': 'You can also decide what you want to set for component properties.', 'start': 844.759, 'duration': 4.022}, {'end': 852.483, 'text': 'So I want to put some of these things inside of properties for this component.', 'start': 848.861, 'duration': 3.622}, {'end': 854.404, 'text': 'Now to define default properties.', 'start': 852.563, 'duration': 1.841}, {'end': 861.575, 'text': "And before we do that, I just want to show you if you want to pass in a property like, let's say,", 'start': 856.108, 'duration': 5.467}], 'summary': 'Adjust font size to 25, define default properties for component.', 'duration': 52.117, 'max_score': 809.458, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ly-9VTXJlnA/pics/Ly-9VTXJlnA809458.jpg'}, {'end': 974.729, 'src': 'embed', 'start': 949.704, 'weight': 7, 'content': [{'end': 955.305, 'text': 'Now we should be able to overwrite these properties here, the defaults, if we pass them into the component.', 'start': 949.704, 'duration': 5.601}, {'end': 965.927, 'text': "So for example, for this chart component, let's pass in, we'll say legend position, and let's set that to bottom.", 'start': 955.345, 'duration': 10.582}, {'end': 970.928, 'text': "So if we save that, now you'll see that the legend is at the bottom.", 'start': 967.567, 'duration': 3.361}, {'end': 974.729, 'text': 'So whatever we pass in is going to overwrite these default properties.', 'start': 971.048, 'duration': 3.681}], 'summary': 'Component properties can be overwritten by passing new values, such as setting legend position to bottom for the chart component.', 'duration': 25.025, 'max_score': 949.704, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ly-9VTXJlnA/pics/Ly-9VTXJlnA949704.jpg'}], 'start': 715.291, 'title': 'Customizing chart options and setting default component properties in react', 'summary': 'Covers customizing chart options, including removing maintain aspect ratio, selecting specific options from the original script, setting display and text for title and legend, and changing font size to 25. it also explains how to set default properties for a component in react, allowing for the overwriting of these properties, with examples demonstrating the use of static default props and passing in specific properties to overwrite defaults.', 'chapters': [{'end': 840.677, 'start': 715.291, 'title': 'Customizing chart options', 'summary': 'Covers customizing chart options, including removing the maintain aspect ratio, selecting specific options from the original script, setting display and text for title and legend, and changing font size to 25.', 'duration': 125.386, 'highlights': ['The chapter covers customizing chart options, including removing the maintain aspect ratio, selecting specific options from the original script, setting display and text for title and legend, and changing font size to 25.', 'Setting the font size of the title to 25, thus increasing its visibility and prominence for better user experience.', 'Explaining the process of selecting specific options from the original script, focusing on the title and legend while excluding others for customization.', 'Removing the maintain aspect ratio to ensure the chart is not squished, resulting in improved visual presentation.', 'Demonstrating the process of setting display and text for the title and legend within the options object for customization.']}, {'end': 974.729, 'start': 840.737, 'title': 'Setting default component properties in react', 'summary': 'Explains how to set default properties for a component in react, allowing for the overwriting of these properties, with examples demonstrating the use of static default props and passing in specific properties to overwrite defaults.', 'duration': 133.992, 'highlights': ['The chapter explains how to set default properties for a component in React It demonstrates the process of setting default properties for a component in React, providing a foundation for the subsequent examples.', 'Examples demonstrating the use of static default props and passing in specific properties to overwrite defaults The chapter provides examples of using static default props to define default properties and passing specific properties to overwrite these defaults, illustrating the practical implementation of this concept.', 'Demonstrates the overwriting of default properties with specific properties It showcases how specific properties can be passed in to overwrite the default properties of a component, with a concrete example of overwriting the legend position property.']}], 'duration': 259.438, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ly-9VTXJlnA/pics/Ly-9VTXJlnA715291.jpg', 'highlights': ['Covers customizing chart options, including removing maintain aspect ratio, selecting specific options from the original script, setting display and text for title and legend, and changing font size to 25.', 'Setting the font size of the title to 25, thus increasing its visibility and prominence for better user experience.', 'Demonstrating the process of setting display and text for the title and legend within the options object for customization.', 'Explaining the process of selecting specific options from the original script, focusing on the title and legend while excluding others for customization.', 'Removing the maintain aspect ratio to ensure the chart is not squished, resulting in improved visual presentation.', 'The chapter explains how to set default properties for a component in React, providing a foundation for the subsequent examples.', 'Examples demonstrating the use of static default props and passing in specific properties to overwrite defaults, illustrating the practical implementation of this concept.', 'Demonstrates the overwriting of default properties with specific properties, showcasing how specific properties can be passed in to overwrite the default properties of a component.']}, {'end': 1087.831, 'segs': [{'end': 1055.516, 'src': 'embed', 'start': 999.962, 'weight': 0, 'content': [{'end': 1004.345, 'text': "So we're going to go back to the app.js, the main component, and we're going to create a constructor.", 'start': 999.962, 'duration': 4.383}, {'end': 1010.227, 'text': 'All right.', 'start': 1009.867, 'duration': 0.36}, {'end': 1015.411, 'text': "And let's see, for the constructor, we're going to call super.", 'start': 1011.729, 'duration': 3.682}, {'end': 1021.777, 'text': "And then we're going to say this dot state equals.", 'start': 1017.313, 'duration': 4.464}, {'end': 1023.838, 'text': "And then we're going to set that to an object.", 'start': 1021.957, 'duration': 1.881}, {'end': 1025.74, 'text': "And then we're going to set chart data.", 'start': 1024.157, 'duration': 1.583}, {'end': 1030.282, 'text': "And then initially, it's just going to be an empty object.", 'start': 1027.82, 'duration': 2.462}, {'end': 1030.604, 'text': 'All right.', 'start': 1030.343, 'duration': 0.261}, {'end': 1034.342, 'text': 'Now you already know how to use Chart.js with React.', 'start': 1031.317, 'duration': 3.025}, {'end': 1035.443, 'text': "We've already finished that.", 'start': 1034.382, 'duration': 1.061}, {'end': 1039.449, 'text': "Now we're just looking at kind of better structuring the React application.", 'start': 1035.483, 'duration': 3.966}, {'end': 1044.195, 'text': 'Now what I would usually do is set the state initially like this.', 'start': 1040.31, 'duration': 3.885}, {'end': 1045.518, 'text': "Actually I don't want that.", 'start': 1044.217, 'duration': 1.301}, {'end': 1054.135, 'text': "And then we'll have a function here and we'll call it, let's call it get chart data.", 'start': 1046.392, 'duration': 7.743}, {'end': 1055.516, 'text': 'All right.', 'start': 1055.136, 'duration': 0.38}], 'summary': 'In app.js, a constructor is created with initial chart data as an empty object for better structuring the react application.', 'duration': 55.554, 'max_score': 999.962, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ly-9VTXJlnA/pics/Ly-9VTXJlnA999962.jpg'}], 'start': 976.784, 'title': 'Refactoring react app with chart.js', 'summary': 'Focuses on refactoring a react application to better structure the usage of chart.js, including moving data to the main app component and setting it as state, and creating a function to fill the chart data in the state.', 'chapters': [{'end': 1087.831, 'start': 976.784, 'title': 'Refactoring react app with chart.js', 'summary': 'Focuses on refactoring a react application to better structure the usage of chart.js, including moving data to the main app component and setting it as state, and creating a function to fill the chart data in the state.', 'duration': 111.047, 'highlights': ['The chapter emphasizes the importance of better structuring a React application by moving data to the main app component and setting it as state.', 'It details the process of creating a constructor in the main component, setting the state to an object with chart data initially as an empty object, and creating a function to fill the chart data in the state.', 'The chapter mentions the previous completion of using Chart.js with React but now focuses on optimizing the React application.', 'It explains the process of setting the state initially and creating a function to fill the chart data in the state.']}], 'duration': 111.047, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ly-9VTXJlnA/pics/Ly-9VTXJlnA976784.jpg', 'highlights': ['The chapter emphasizes the importance of better structuring a React application by moving data to the main app component and setting it as state.', 'It details the process of creating a constructor in the main component, setting the state to an object with chart data initially as an empty object, and creating a function to fill the chart data in the state.', 'The chapter mentions the previous completion of using Chart.js with React but now focuses on optimizing the React application.', 'It explains the process of setting the state initially and creating a function to fill the chart data in the state.']}, {'end': 1419.074, 'segs': [{'end': 1146.395, 'src': 'embed', 'start': 1117.711, 'weight': 0, 'content': [{'end': 1123.917, 'text': "whether it's a public API or your own API that you created, this is where you would do that.", 'start': 1117.711, 'duration': 6.206}, {'end': 1126.179, 'text': 'So we would make our AJAX call here.', 'start': 1124.037, 'duration': 2.142}, {'end': 1131.345, 'text': 'And then we would fill the state with the data that comes in.', 'start': 1128.603, 'duration': 2.742}, {'end': 1136.208, 'text': 'Now, as it is now, this is not going to run because we just defined it.', 'start': 1131.365, 'duration': 4.843}, {'end': 1143.193, 'text': 'What we need to do is put this inside of a lifecycle hook called componentWillMount.', 'start': 1136.308, 'duration': 6.885}, {'end': 1146.395, 'text': "And this runs when the component's mounted.", 'start': 1144.273, 'duration': 2.122}], 'summary': 'Component mounts to make ajax call and update state.', 'duration': 28.684, 'max_score': 1117.711, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ly-9VTXJlnA/pics/Ly-9VTXJlnA1117711.jpg'}, {'end': 1302.615, 'src': 'embed', 'start': 1272.624, 'weight': 1, 'content': [{'end': 1280.127, 'text': 'But what we want is to, from app.js, when we actually call the chart component, we want a location property.', 'start': 1272.624, 'duration': 7.503}, {'end': 1285.829, 'text': "And let's set that to Massachusetts.", 'start': 1280.947, 'duration': 4.882}, {'end': 1288.817, 'text': "And then we'll save that.", 'start': 1287.716, 'duration': 1.101}, {'end': 1291.981, 'text': "And then let's go back to our chart.js.", 'start': 1290.038, 'duration': 1.943}, {'end': 1302.615, 'text': "And now down here where we have the text Massachusetts, what I'm going to do is just concatenate this.props.location.", 'start': 1292.722, 'duration': 9.893}], 'summary': 'In app.js, set the location property to massachusetts when calling the chart component, and in chart.js, use this.props.location to display the location.', 'duration': 29.991, 'max_score': 1272.624, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ly-9VTXJlnA/pics/Ly-9VTXJlnA1272624.jpg'}, {'end': 1357.026, 'src': 'embed', 'start': 1330.182, 'weight': 2, 'content': [{'end': 1337.309, 'text': "I'm just trying to give you guys examples so that you can have the knowledge to build your own stuff.", 'start': 1330.182, 'duration': 7.127}, {'end': 1338.77, 'text': "That's pretty much it.", 'start': 1337.349, 'duration': 1.421}, {'end': 1348.339, 'text': 'If you wanted to use different types, you see how we brought in line and pie chart as well, we could just grab this whole bar right here.', 'start': 1339.331, 'duration': 9.008}, {'end': 1349.961, 'text': "Let's actually tab that over.", 'start': 1348.359, 'duration': 1.602}, {'end': 1357.026, 'text': 'But we could grab that and then paste it in again and just change this to line.', 'start': 1350.501, 'duration': 6.525}], 'summary': 'Providing examples to build knowledge, including using different chart types.', 'duration': 26.844, 'max_score': 1330.182, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ly-9VTXJlnA/pics/Ly-9VTXJlnA1330182.jpg'}, {'end': 1419.074, 'src': 'embed', 'start': 1392.11, 'weight': 3, 'content': [{'end': 1393.431, 'text': "All right, so that's it, guys.", 'start': 1392.11, 'duration': 1.321}, {'end': 1395.953, 'text': 'Hopefully you enjoyed this and you learned something from it.', 'start': 1393.491, 'duration': 2.462}, {'end': 1402.217, 'text': "Like I said, it's not a full-on React tutorial, so if you don't know anything about React, you probably got a little confused.", 'start': 1396.373, 'duration': 5.844}, {'end': 1405.159, 'text': 'If so, watch my React.js crash course.', 'start': 1402.677, 'duration': 2.482}, {'end': 1406.299, 'text': 'Thanks for watching.', 'start': 1405.639, 'duration': 0.66}, {'end': 1407, 'text': 'Please subscribe.', 'start': 1406.319, 'duration': 0.681}, {'end': 1408.761, 'text': 'Please leave a like, whatever you can.', 'start': 1407.04, 'duration': 1.721}, {'end': 1410.422, 'text': 'Please follow me on Twitter and Facebook.', 'start': 1408.841, 'duration': 1.581}, {'end': 1412.243, 'text': "I'm really trying to build up that community.", 'start': 1410.442, 'duration': 1.801}, {'end': 1416.086, 'text': 'So if you guys could take a second and just go over there and follow me.', 'start': 1412.724, 'duration': 3.362}, {'end': 1417.008, 'text': "That'd be great.", 'start': 1416.467, 'duration': 0.541}, {'end': 1418.031, 'text': 'So thanks for watching.', 'start': 1417.089, 'duration': 0.942}, {'end': 1419.074, 'text': 'I will see you next time.', 'start': 1418.051, 'duration': 1.023}], 'summary': 'Brief react.js overview, encourages engagement and learning, urges following on social media.', 'duration': 26.964, 'max_score': 1392.11, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ly-9VTXJlnA/pics/Ly-9VTXJlnA1392110.jpg'}], 'start': 1087.851, 'title': 'React component state and props', 'summary': 'Discusses setting the state of the main app component, passing data into the chart component as a property, and customizing the location property to allow for different types of charts, providing examples of line and pie charts as well as encouraging viewers to further their knowledge in react.', 'chapters': [{'end': 1419.074, 'start': 1087.851, 'title': 'React component state and props', 'summary': 'Discusses setting the state of the main app component, passing data into the chart component as a property, and customizing the location property to allow for different types of charts, providing examples of line and pie charts as well as encouraging viewers to further their knowledge in react.', 'duration': 331.223, 'highlights': ["The component's state is set by making an AJAX call to fetch data and using the componentWillMount lifecycle hook, ensuring the data is retrieved and set when the component is mounted.", 'Data is passed into the chart component as a property, allowing for the customization of the location property to display different locations for the charts.', 'Examples of different chart types, such as line and pie charts, are provided to showcase the flexibility of the implementation.', "Encouragement is given to viewers to further their knowledge in React by watching the React.js crash course and engaging with the creator's social media platforms."]}], 'duration': 331.223, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ly-9VTXJlnA/pics/Ly-9VTXJlnA1087851.jpg', 'highlights': ["The component's state is set by making an AJAX call to fetch data and using the componentWillMount lifecycle hook, ensuring the data is retrieved and set when the component is mounted.", 'Data is passed into the chart component as a property, allowing for the customization of the location property to display different locations for the charts.', 'Examples of different chart types, such as line and pie charts, are provided to showcase the flexibility of the implementation.', "Encouragement is given to viewers to further their knowledge in React by watching the React.js crash course and engaging with the creator's social media platforms."]}], 'highlights': ['Covers customizing chart options, including removing maintain aspect ratio, selecting specific options from the original script, setting display and text for title and legend, and changing font size to 25.', "The component's state is set by making an AJAX call to fetch data and using the componentWillMount lifecycle hook, ensuring the data is retrieved and set when the component is mounted.", 'The chapter emphasizes the importance of better structuring a React application by moving data to the main app component and setting it as state.', 'Starting the application with npm start opens it on port 3000.', 'State is where all the data should be kept in React.']}