title
What To Learn Before A JavaScript Framework

description
In this video I will share what I think people should learn in JavaScript before moving to a front end framework like React, Angular or Vue. This includes things like modules, classes, arrow functions and more. Ill also give some examples of these things being used in different frameworks. Sponsor: Freelancer Bundle (Use "brad25" for 25% off) https://studywebdevelopment.com/freelancing.html 21 Hour JavaScript Course! https://www.udemy.com/modern-javascript-from-the-beginning/?couponCode=TRAVERSYMEDIA 💖 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': 'What To Learn Before A JavaScript Framework', 'heatmap': [{'end': 198.176, 'start': 163.371, 'weight': 0.986}, {'end': 257, 'start': 223.038, 'weight': 0.749}, {'end': 326.118, 'start': 264.808, 'weight': 0.867}, {'end': 397.869, 'start': 374.733, 'weight': 0.861}, {'end': 466.942, 'start': 432.117, 'weight': 0.708}, {'end': 881.818, 'start': 849.135, 'weight': 1}], 'summary': "Before learning javascript frameworks like react, angular, and vue.js, it's essential to grasp fundamental javascript concepts such as syntax, modules, classes, arrow functions, promises, destructuring, and understand the shift to component-based ui and state management, ensuring easier adaptability and smoother learning across multiple frameworks.", 'chapters': [{'end': 389.218, 'segs': [{'end': 114.207, 'src': 'embed', 'start': 88.933, 'weight': 0, 'content': [{'end': 95.635, 'text': "So you can see that a lot of this stuff, it's just global to JavaScript rather than a particular framework.", 'start': 88.933, 'duration': 6.702}, {'end': 98.076, 'text': "So let's go ahead and get started.", 'start': 96.615, 'duration': 1.461}, {'end': 100.538, 'text': 'Now, obviously, this is a no brainer.', 'start': 98.577, 'duration': 1.961}, {'end': 105.361, 'text': 'You want to learn the basics and fundamentals of JavaScript before moving to a framework.', 'start': 100.878, 'duration': 4.483}, {'end': 107.042, 'text': 'I think most people know this.', 'start': 105.801, 'duration': 1.241}, {'end': 114.207, 'text': "This includes basic syntax, variables, arrays, objects, functions, loops all the stuff that you would learn when you're.", 'start': 107.502, 'duration': 6.705}], 'summary': 'Master javascript basics before diving into a framework.', 'duration': 25.274, 'max_score': 88.933, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qi9VQqYcXqY/pics/qi9VQqYcXqY88933.jpg'}, {'end': 211.227, 'src': 'heatmap', 'start': 163.371, 'weight': 1, 'content': [{'end': 170.639, 'text': "But it's not it's not it's not the ending point of, you know, learning just regular JavaScript and moving to a framework.", 'start': 163.371, 'duration': 7.268}, {'end': 180.389, 'text': "so next, we have modules, and modules are used in every framework because they're used to import files into other files or import packages,", 'start': 171.866, 'duration': 8.523}, {'end': 187.552, 'text': "and without modules there wouldn't be any framework, because modules allow everything to work together and instead, you know,", 'start': 180.389, 'duration': 7.163}, {'end': 198.176, 'text': "instead of having isolated code and files, and there's different types of modules, but you want to focus on es6 modules or es2015 modules, same thing,", 'start': 187.552, 'duration': 10.624}, {'end': 200.137, 'text': 'which is the import from syntax.', 'start': 198.176, 'duration': 1.961}, {'end': 207.564, 'text': 'Now Angular actually uses TypeScript, which has many of the same features that ES6 has, including modules.', 'start': 200.937, 'duration': 6.627}, {'end': 211.227, 'text': "So if you learn ES6 modules, you'll be fine with TypeScript.", 'start': 208.124, 'duration': 3.103}], 'summary': 'Learning es6 modules is essential for transitioning to frameworks like angular, as they allow for importing files and packages, and are also used in typescript.', 'duration': 23.675, 'max_score': 163.371, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qi9VQqYcXqY/pics/qi9VQqYcXqY163371.jpg'}, {'end': 326.118, 'src': 'heatmap', 'start': 223.038, 'weight': 2, 'content': [{'end': 229.785, 'text': "Now, I'm not going to say that you have to learn how to do that before moving to a framework, like learn how to configure Webpack and all that stuff.", 'start': 223.038, 'duration': 6.747}, {'end': 235.531, 'text': 'But I would suggest at least reading about modules a little bit, looking at the syntax,', 'start': 230.366, 'duration': 5.165}, {'end': 240.176, 'text': 'maybe watching a tutorial before you move on to to learning a framework.', 'start': 235.531, 'duration': 4.645}, {'end': 243.168, 'text': 'All right, so next we have classes.', 'start': 241.567, 'duration': 1.601}, {'end': 246.892, 'text': 'So classes were introduced in ES6 or ES2015.', 'start': 243.849, 'duration': 3.043}, {'end': 248.413, 'text': 'I call it ES6.', 'start': 246.992, 'duration': 1.421}, {'end': 250.335, 'text': "I know you're supposed to call it ES2015.", 'start': 248.473, 'duration': 1.862}, {'end': 257, 'text': 'But classes are used in many languages, and you may even be familiar with classes from another language.', 'start': 251.196, 'duration': 5.804}, {'end': 264.808, 'text': 'and classes are more commonly used in react and angular view kind of uses, uh, like an object literal type style.', 'start': 257.5, 'duration': 7.308}, {'end': 271.954, 'text': "but even if you're learning view, i would suggest learning classes, learn how to structure them, learn about constructors, methods and properties,", 'start': 264.808, 'duration': 7.146}, {'end': 279.44, 'text': 'instantiation, which means creating objects from the class as well as extending classes and inheritance, all right.', 'start': 271.954, 'duration': 7.486}, {'end': 282.161, 'text': 'so next is arrow functions.', 'start': 279.44, 'duration': 2.721}, {'end': 286.043, 'text': 'arrow functions will make your code much more compact and clean.', 'start': 282.161, 'duration': 3.882}, {'end': 289.984, 'text': "even though there's many situations where you don't need to use arrow functions,", 'start': 286.043, 'duration': 3.941}, {'end': 295.566, 'text': "in my experience they're kind of the norm when it comes to building stuff with these frameworks.", 'start': 289.984, 'duration': 5.582}, {'end': 300.308, 'text': "it's cleaner, it's less lines of code and there can also be advantages within scope.", 'start': 295.566, 'duration': 4.742}, {'end': 302.889, 'text': 'it uses something called a lexical, this.', 'start': 300.308, 'duration': 2.581}, {'end': 308.035, 'text': 'so you want to look into that stuff before learning a framework, All right.', 'start': 302.889, 'duration': 5.146}, {'end': 309.336, 'text': 'so next thing is promises.', 'start': 308.035, 'duration': 1.301}, {'end': 315.245, 'text': 'ES6 introduced promises as an alternative to using callbacks for asynchronous code.', 'start': 309.597, 'duration': 5.648}, {'end': 319.771, 'text': 'So, if we make a request to a server or anything that could take a while,', 'start': 315.665, 'duration': 4.106}, {'end': 326.118, 'text': 'we want to do it asynchronously so that we can move on with our application and not have to stop and wait for a response.', 'start': 319.771, 'duration': 6.347}], 'summary': 'Before learning a framework, grasp modules, classes, arrow functions, and promises from es6 to streamline code and asynchronous operations.', 'duration': 72.528, 'max_score': 223.038, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qi9VQqYcXqY/pics/qi9VQqYcXqY223038.jpg'}, {'end': 343.467, 'src': 'embed', 'start': 319.771, 'weight': 3, 'content': [{'end': 326.118, 'text': 'we want to do it asynchronously so that we can move on with our application and not have to stop and wait for a response.', 'start': 319.771, 'duration': 6.347}, {'end': 327.999, 'text': 'So promises do just that.', 'start': 326.578, 'duration': 1.421}, {'end': 331.361, 'text': 'They make a promise and then fulfill it when the task is done.', 'start': 328.059, 'duration': 3.302}, {'end': 334.622, 'text': 'And you should learn how to create and receive promises.', 'start': 331.961, 'duration': 2.661}, {'end': 337.484, 'text': 'When a promise completes, you want to use .', 'start': 335.123, 'duration': 2.361}, {'end': 341.406, 'text': 'then to catch the response and get the data back, and then .', 'start': 337.484, 'duration': 3.922}, {'end': 343.467, 'text': 'catch to catch any possible errors.', 'start': 341.406, 'duration': 2.061}], 'summary': 'Using promises allows for asynchronous processing, enabling the application to continue without waiting for responses. learning to create and handle promises is essential for managing data and errors effectively.', 'duration': 23.696, 'max_score': 319.771, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qi9VQqYcXqY/pics/qi9VQqYcXqY319771.jpg'}, {'end': 397.869, 'src': 'embed', 'start': 367.681, 'weight': 4, 'content': [{'end': 372.009, 'text': "You're also going to want to learn how to use the Fetch API to make HTTP requests.", 'start': 367.681, 'duration': 4.328}, {'end': 374.412, 'text': 'This is built into JavaScript.', 'start': 372.81, 'duration': 1.602}, {'end': 380.122, 'text': "There's other tools like Axios that you can use, but it's good to know how to do this with Vanilla JavaScript.", 'start': 374.733, 'duration': 5.389}, {'end': 383.351, 'text': 'So next thing is destructuring.', 'start': 381.809, 'duration': 1.542}, {'end': 389.218, 'text': 'Destructuring allows you to unpack values and assign variables from objects and arrays.', 'start': 383.611, 'duration': 5.607}, {'end': 397.869, 'text': 'It makes your code cleaner and it also seems to be preferred when you look at other applications built with these frameworks.', 'start': 389.659, 'duration': 8.21}], 'summary': 'Learn fetch api for http requests and use destructuring for cleaner code.', 'duration': 30.188, 'max_score': 367.681, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qi9VQqYcXqY/pics/qi9VQqYcXqY367681.jpg'}], 'start': 7.165, 'title': 'Essential skills for frontend frameworks', 'summary': 'Emphasizes the necessity of learning fundamental javascript concepts such as syntax, modules, classes, arrow functions, promises, and destructuring before delving into frontend frameworks like react, angular, and view, to ensure a better grasp on the concepts and easier adaptability across multiple frameworks.', 'chapters': [{'end': 389.218, 'start': 7.165, 'title': 'Essential skills before learning frontend frameworks', 'summary': 'Emphasizes the necessity of learning fundamental javascript concepts such as syntax, modules, classes, arrow functions, promises, and destructuring before delving into frontend frameworks like react, angular, and view, to ensure a better grasp on the concepts and easier adaptability across multiple frameworks.', 'duration': 382.053, 'highlights': ['Fundamental JavaScript concepts are crucial before learning a framework. Learning basics and fundamentals of JavaScript, including syntax, variables, arrays, objects, functions, and loops, is essential before delving into a framework to ensure a strong foundation.', 'Modules are a key aspect used in every framework for importing files and packages. Modules, particularly ES6 modules with the import from syntax, are vital for integrating files and packages into frameworks, ensuring smooth functionality across different frameworks.', 'Classes play a significant role, especially in react and angular, for structuring and inheritance. Learning about classes, constructors, methods, properties, instantiation, and inheritance is important for understanding the structure and functionality within react and angular, and even beneficial for view.', 'Arrow functions contribute to cleaner and more compact code within frameworks. Understanding arrow functions is crucial for writing concise and clean code in frameworks, as they offer advantages in terms of code length and scope.', 'Promises are essential for asynchronous code handling in frameworks. Knowing how to create, receive, and handle promises, along with using .then and .catch, is vital for managing asynchronous tasks within frameworks, contributing to efficient code execution.', 'Destructuring facilitates unpacking values and assigning variables from objects and arrays. Destructuring aids in unpacking values and assigning variables from objects and arrays, providing a more efficient way to work with data within frameworks and ensuring a better understanding of data manipulation.']}], 'duration': 382.053, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qi9VQqYcXqY/pics/qi9VQqYcXqY7165.jpg', 'highlights': ['Learning basics and fundamentals of JavaScript is essential before delving into a framework to ensure a strong foundation.', 'Modules, particularly ES6 modules with the import from syntax, are vital for integrating files and packages into frameworks, ensuring smooth functionality across different frameworks.', 'Understanding arrow functions is crucial for writing concise and clean code in frameworks, as they offer advantages in terms of code length and scope.', 'Knowing how to create, receive, and handle promises, along with using .then and .catch, is vital for managing asynchronous tasks within frameworks, contributing to efficient code execution.', 'Destructuring aids in unpacking values and assigning variables from objects and arrays, providing a more efficient way to work with data within frameworks and ensuring a better understanding of data manipulation.', 'Learning about classes, constructors, methods, properties, instantiation, and inheritance is important for understanding the structure and functionality within react and angular, and even beneficial for view.']}, {'end': 756.414, 'segs': [{'end': 415.426, 'src': 'embed', 'start': 389.659, 'weight': 0, 'content': [{'end': 397.869, 'text': 'It makes your code cleaner and it also seems to be preferred when you look at other applications built with these frameworks.', 'start': 389.659, 'duration': 8.21}, {'end': 406.918, 'text': "So this is a very simple example where basically, let's say, we have a user object with a name, email address, maybe some other fields,", 'start': 398.47, 'duration': 8.448}, {'end': 408.519, 'text': 'and we just want the name and email.', 'start': 406.918, 'duration': 1.601}, {'end': 415.426, 'text': 'We want to put that into a variable called name and email so we can just pull that out by using curly braces.', 'start': 408.579, 'duration': 6.847}], 'summary': 'Using object destructuring makes code cleaner and is preferred in many frameworks for extracting specific fields from an object.', 'duration': 25.767, 'max_score': 389.659, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qi9VQqYcXqY/pics/qi9VQqYcXqY389659.jpg'}, {'end': 466.942, 'src': 'heatmap', 'start': 432.117, 'weight': 0.708, 'content': [{'end': 434.098, 'text': 'In that case, we would use this syntax.', 'start': 432.117, 'duration': 1.981}, {'end': 440.982, 'text': 'So we would say address, which is an object within user, and then city, which is a property of address.', 'start': 434.398, 'duration': 6.584}, {'end': 446.086, 'text': 'And then we could use name, email, and city as a variable in our code.', 'start': 441.723, 'duration': 4.363}, {'end': 450.309, 'text': "And again, I'm going to give you some examples of this in each framework.", 'start': 446.966, 'duration': 3.343}, {'end': 454.927, 'text': 'All right, so next is the concept of components and state.', 'start': 451.323, 'duration': 3.604}, {'end': 461.495, 'text': "Now, when you first learn basic HTML, CSS, JavaScript, you're taught about separation of concerns.", 'start': 455.428, 'duration': 6.067}, {'end': 466.942, 'text': 'You have your HTML markup, your CSS styling, and your JavaScript for any dynamic type functionality.', 'start': 461.535, 'duration': 5.407}], 'summary': "Using syntax to access user's address properties; explaining html, css, javascript separation of concerns.", 'duration': 34.825, 'max_score': 432.117, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qi9VQqYcXqY/pics/qi9VQqYcXqY432117.jpg'}, {'end': 582.695, 'src': 'embed', 'start': 553.417, 'weight': 1, 'content': [{'end': 558.322, 'text': "So this is kind of an intricate interface to to describe this, but it's a site that we all know.", 'start': 553.417, 'duration': 4.905}, {'end': 565.008, 'text': 'So, basically, instead of thinking and thinking of thinking of it as an HTML file with separate JavaScript, separate CSS,', 'start': 558.542, 'duration': 6.466}, {'end': 569.39, 'text': 'look at each individual thing as its own entity, as its own component.', 'start': 565.709, 'duration': 3.681}, {'end': 577.593, 'text': 'For instance, this might be the top bar component with a menu bar component embedded in it, as well as a search bar component.', 'start': 569.87, 'duration': 7.723}, {'end': 582.695, 'text': "When we type something in here, it's basically the state of this individual component.", 'start': 577.613, 'duration': 5.082}], 'summary': 'An intricate interface approach treating elements as separate components.', 'duration': 29.278, 'max_score': 553.417, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qi9VQqYcXqY/pics/qi9VQqYcXqY553417.jpg'}, {'end': 634.912, 'src': 'embed', 'start': 610.2, 'weight': 2, 'content': [{'end': 616.163, 'text': "so that's when you look into something like redux for react or view x for view for state level management.", 'start': 610.2, 'duration': 5.963}, {'end': 620.765, 'text': 'so you can have this, this single source of truth, this, this application state,', 'start': 616.163, 'duration': 4.602}, {'end': 628.149, 'text': 'that that basically hovers over all of your ui components and you can send state down directly to them.', 'start': 620.765, 'duration': 7.384}, {'end': 630.33, 'text': "And there's different ways to do it.", 'start': 629.129, 'duration': 1.201}, {'end': 633.331, 'text': "You don't have to use like Redux and React.", 'start': 630.41, 'duration': 2.921}, {'end': 634.912, 'text': 'You have the context API.', 'start': 633.351, 'duration': 1.561}], 'summary': 'Consider using redux or context api for state management in react or vue.', 'duration': 24.712, 'max_score': 610.2, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qi9VQqYcXqY/pics/qi9VQqYcXqY610200.jpg'}, {'end': 680.578, 'src': 'embed', 'start': 653.708, 'weight': 3, 'content': [{'end': 659.85, 'text': 'And this is important, especially when dealing with state like we just talked about, because state is usually immutable,', 'start': 653.708, 'duration': 6.142}, {'end': 662.151, 'text': "which means it can't be directly changed.", 'start': 659.85, 'duration': 2.301}, {'end': 666.833, 'text': 'What usually happens is you have to make a copy of it and add what you want,', 'start': 662.571, 'duration': 4.262}, {'end': 670.534, 'text': 'change what you want and then send it down to the application or the component.', 'start': 666.833, 'duration': 3.701}, {'end': 673.215, 'text': 'And the spread operator allows us to do that.', 'start': 671.014, 'duration': 2.201}, {'end': 675.356, 'text': "So here's a really simple example.", 'start': 673.315, 'duration': 2.041}, {'end': 680.578, 'text': "So let's say we have this user state that just has one property of name that's equal to John.", 'start': 675.836, 'duration': 4.742}], 'summary': 'State in programming is usually immutable, requiring a copy to be made and changed, illustrated by a user state example.', 'duration': 26.87, 'max_score': 653.708, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qi9VQqYcXqY/pics/qi9VQqYcXqY653708.jpg'}, {'end': 745.688, 'src': 'embed', 'start': 715.049, 'weight': 4, 'content': [{'end': 720.972, 'text': 'A high order function is basically a function that takes another function as a parameter.', 'start': 715.049, 'duration': 5.923}, {'end': 729.778, 'text': 'But these all have to do with arrays and iterating through them, manipulating data, stuff like that for each is is probably the most basic.', 'start': 721.613, 'duration': 8.165}, {'end': 732.239, 'text': "It's just used for iteration, kind of like a for loop.", 'start': 729.838, 'duration': 2.401}, {'end': 733.7, 'text': "It doesn't return anything.", 'start': 732.48, 'duration': 1.22}, {'end': 736.122, 'text': 'It just loops through something and you can do what you want.', 'start': 733.76, 'duration': 2.362}, {'end': 745.688, 'text': "Map is heavily used in React and it's actually used to create an array from another array with whatever types of manipulation you want to do.", 'start': 736.782, 'duration': 8.906}], 'summary': 'High order functions manipulate arrays, e.g. map creates new array in react.', 'duration': 30.639, 'max_score': 715.049, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qi9VQqYcXqY/pics/qi9VQqYcXqY715049.jpg'}], 'start': 389.659, 'title': 'Javascript destructuring and frontend state management', 'summary': "Discusses the concept of destructuring in javascript, emphasizing its advantages in making code cleaner and its use in extracting specific data from objects. it also covers frontend frameworks' shift to component-based ui, highlighting the importance of state management, high order array functions, and the use of the spread operator for immutable state.", 'chapters': [{'end': 454.927, 'start': 389.659, 'title': 'Destructuring in javascript', 'summary': 'Discusses the concept of destructuring in javascript, where it is highlighted that it makes code cleaner, preferred in applications, and can be used to extract specific data from objects, with examples provided for user objects and nested objects. furthermore, the concept of components and state is mentioned.', 'duration': 65.268, 'highlights': ['Destructuring makes code cleaner and is preferred in applications built with JavaScript frameworks.', 'Examples are provided for extracting specific data from user objects and nested objects.', 'The concept of components and state in JavaScript is mentioned.']}, {'end': 756.414, 'start': 455.428, 'title': 'Frontend frameworks and state management', 'summary': 'Explains the shift from monolithic javascript to component-based ui in frontend frameworks like react, emphasizing the importance of state management and high order array functions, and the use of the spread operator for immutable state. it also introduces the concept of high order array functions for array manipulation.', 'duration': 300.986, 'highlights': ['Shift to Component-Based UI Frontend frameworks like React emphasize the shift from monolithic JavaScript to component-based UI, where UI elements are treated as encapsulated entities with their own state, allowing for better organization and reusability of code.', 'Importance of State Management The importance of state management in frontend frameworks is highlighted, with examples of how each component has its own state, and the need for technologies like Redux for React or Vuex for Vue for state level management and sharing of data.', 'Utilizing the Spread Operator for Immutable State The use of the spread operator for immutable state in React is explained, demonstrating how it allows for creating new copies of state objects and adding or changing properties, essential for managing state in a component-based UI.', 'Introduction to High Order Array Functions The concept of high order array functions for array manipulation is introduced, including examples of for each for iteration, map for creating new arrays, and the significance of these functions in React.']}], 'duration': 366.755, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qi9VQqYcXqY/pics/qi9VQqYcXqY389659.jpg', 'highlights': ['Destructuring makes code cleaner and is preferred in applications built with JavaScript frameworks.', 'Shift to Component-Based UI Frontend frameworks like React emphasize the shift from monolithic JavaScript to component-based UI, where UI elements are treated as encapsulated entities with their own state, allowing for better organization and reusability of code.', 'Importance of State Management The importance of state management in frontend frameworks is highlighted, with examples of how each component has its own state, and the need for technologies like Redux for React or Vuex for Vue for state level management and sharing of data.', 'Utilizing the Spread Operator for Immutable State The use of the spread operator for immutable state in React is explained, demonstrating how it allows for creating new copies of state objects and adding or changing properties, essential for managing state in a component-based UI.', 'Introduction to High Order Array Functions The concept of high order array functions for array manipulation is introduced, including examples of for each for iteration, map for creating new arrays, and the significance of these functions in React.', 'Examples are provided for extracting specific data from user objects and nested objects.', 'The concept of components and state in JavaScript is mentioned.']}, {'end': 903.243, 'segs': [{'end': 784.364, 'src': 'embed', 'start': 757.635, 'weight': 1, 'content': [{'end': 762.737, 'text': 'You also have filter, which will basically filter items out based on a condition.', 'start': 757.635, 'duration': 5.102}, {'end': 768.859, 'text': "Filter is heavily used in reducers and state management, and I'll give you an example of that in a little bit.", 'start': 763.237, 'duration': 5.622}, {'end': 775.581, 'text': 'So those are my suggestions for what you should learn before you jump into a framework.', 'start': 770.159, 'duration': 5.422}, {'end': 781.543, 'text': "I think once you really understand those things, you'll be absolutely ready to learn any front end framework.", 'start': 775.961, 'duration': 5.582}, {'end': 784.364, 'text': "You'll also be able to pick up a second or third really easily.", 'start': 781.563, 'duration': 2.801}], 'summary': 'Learn filter function for reducers and state management before starting a front-end framework, enabling easy adoption of multiple frameworks.', 'duration': 26.729, 'max_score': 757.635, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qi9VQqYcXqY/pics/qi9VQqYcXqY757635.jpg'}, {'end': 841.971, 'src': 'embed', 'start': 816.942, 'weight': 0, 'content': [{'end': 823.664, 'text': "And my goal isn't to teach this and make you understand how they work, but just to show you that they're present in all frameworks.", 'start': 816.942, 'duration': 6.722}, {'end': 827.085, 'text': "So it's a good thing to learn this stuff before you jump in.", 'start': 824.124, 'duration': 2.961}, {'end': 830.567, 'text': 'So up here in this react component, we have a bunch of imports.', 'start': 827.706, 'duration': 2.861}, {'end': 831.907, 'text': "So we're using modules.", 'start': 830.747, 'duration': 1.16}, {'end': 834.028, 'text': 'Basically, we import a file.', 'start': 832.387, 'duration': 1.641}, {'end': 836.029, 'text': 'We import something from a file.', 'start': 834.248, 'duration': 1.781}, {'end': 838.79, 'text': "In this case, we're importing the post form component.", 'start': 836.229, 'duration': 2.561}, {'end': 841.971, 'text': 'We can also import from packages like React Redux.', 'start': 839.17, 'duration': 2.801}], 'summary': "Frameworks use modules for importing files and packages. it's crucial to learn before diving in.", 'duration': 25.029, 'max_score': 816.942, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qi9VQqYcXqY/pics/qi9VQqYcXqY816942.jpg'}, {'end': 881.818, 'src': 'heatmap', 'start': 849.135, 'weight': 1, 'content': [{'end': 855.778, 'text': "For instance, this post actions file may have like an add post function that's being exported.", 'start': 849.135, 'duration': 6.643}, {'end': 858.959, 'text': 'So we can kind of bring in as much as many things as we want.', 'start': 856.198, 'duration': 2.761}, {'end': 861.42, 'text': 'But these were only going to bring in one thing.', 'start': 859.319, 'duration': 2.101}, {'end': 867.383, 'text': 'OK, and the class of post, which is our react component, is actually being exported down here as well.', 'start': 862.041, 'duration': 5.342}, {'end': 870.847, 'text': "OK, so let's take a look at an Angular example.", 'start': 868.345, 'duration': 2.502}, {'end': 873.25, 'text': 'And this is an Angular component.', 'start': 871.788, 'duration': 1.462}, {'end': 877.574, 'text': "Again, we're bringing in something from Angular core component on init.", 'start': 873.47, 'duration': 4.104}, {'end': 881.818, 'text': 'And this stuff, of course, is specific to Angular.', 'start': 878.355, 'duration': 3.463}], 'summary': 'Transcript discusses importing functions and components from angular and react.', 'duration': 32.683, 'max_score': 849.135, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qi9VQqYcXqY/pics/qi9VQqYcXqY849135.jpg'}], 'start': 757.635, 'title': 'Fundamental javascript concepts', 'summary': 'Emphasizes understanding fundamental javascript concepts such as filter, module imports, and component exports before diving into front-end frameworks, as these concepts are present in all major frameworks and enable easier adoption of subsequent frameworks.', 'chapters': [{'end': 903.243, 'start': 757.635, 'title': 'Key concepts before learning front end frameworks', 'summary': 'Emphasizes understanding fundamental javascript concepts such as filter, module imports, and component exports before diving into front-end frameworks, as these concepts are present in all major frameworks and enable easier adoption of subsequent frameworks.', 'duration': 145.608, 'highlights': ['Filter function Filter is heavily used in reducers and state management, and understanding it enables easier adoption of front-end frameworks.', 'Module imports and component exports in React, Angular, and Vue Understanding module imports and component exports in React, Angular, and Vue is crucial as these concepts are present in all three major frameworks, making it easier to distinguish between standard JavaScript and framework-specific concepts.']}], 'duration': 145.608, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qi9VQqYcXqY/pics/qi9VQqYcXqY757635.jpg', 'highlights': ['Understanding module imports and component exports in React, Angular, and Vue is crucial for easier adoption of front-end frameworks.', 'Filter function is heavily used in reducers and state management, enabling easier adoption of front-end frameworks.']}, {'end': 1398.37, 'segs': [{'end': 984.879, 'src': 'embed', 'start': 960.365, 'weight': 1, 'content': [{'end': 968.187, 'text': 'If we look at Angular, we have a class as well called ClientsComponent, and we have methods including a constructor.', 'start': 960.365, 'duration': 7.822}, {'end': 972.308, 'text': "You can have constructors in React as well, but those examples didn't have any.", 'start': 968.587, 'duration': 3.721}, {'end': 974.39, 'text': 'And then we also have some properties.', 'start': 972.968, 'duration': 1.422}, {'end': 978.633, 'text': 'The colon and then client colon number, this is actually TypeScript.', 'start': 975.15, 'duration': 3.483}, {'end': 980.715, 'text': 'So you would learn that along with Angular.', 'start': 978.874, 'duration': 1.841}, {'end': 984.879, 'text': "Let's see, this is another Angular example, which is the service.", 'start': 980.735, 'duration': 4.144}], 'summary': 'Angular and react have classes with methods and properties, including typescript usage.', 'duration': 24.514, 'max_score': 960.365, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qi9VQqYcXqY/pics/qi9VQqYcXqY960365.jpg'}, {'end': 1049.611, 'src': 'embed', 'start': 1023.55, 'weight': 2, 'content': [{'end': 1029.635, 'text': "And again, this isn't to show you exactly how it works, but just to show you we do this stuff in frameworks.", 'start': 1023.55, 'duration': 6.085}, {'end': 1033.358, 'text': 'And then when you catch a promise, you use this .', 'start': 1030.396, 'duration': 2.962}, {'end': 1035.3, 'text': 'then and you can use .', 'start': 1033.358, 'duration': 1.942}, {'end': 1036.56, 'text': 'catch to catch any errors.', 'start': 1035.3, 'duration': 1.26}, {'end': 1041.085, 'text': 'An example of that would be in this view component down here.', 'start': 1037.561, 'duration': 3.524}, {'end': 1045.407, 'text': 'right here db.collection.add.', 'start': 1042.226, 'duration': 3.181}, {'end': 1049.01, 'text': "so we're just adding something to firebase here and it returns a promise.", 'start': 1045.407, 'duration': 3.603}, {'end': 1049.611, 'text': 'so we do.', 'start': 1049.01, 'duration': 0.601}], 'summary': 'Demonstrating framework usage with promise handling and firebase interaction.', 'duration': 26.061, 'max_score': 1023.55, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qi9VQqYcXqY/pics/qi9VQqYcXqY1023550.jpg'}, {'end': 1115.376, 'src': 'embed', 'start': 1090.171, 'weight': 3, 'content': [{'end': 1096.677, 'text': "So down here where we use posts, which is this right here, if we didn't destructure, we would have to do this.", 'start': 1090.171, 'duration': 6.506}, {'end': 1102.223, 'text': 'This.props.post.post Like that.', 'start': 1096.857, 'duration': 5.366}, {'end': 1103.604, 'text': "And that's kind of ugly.", 'start': 1102.303, 'duration': 1.301}, {'end': 1104.985, 'text': 'Same thing with.', 'start': 1104.365, 'duration': 0.62}, {'end': 1107.973, 'text': "Let's see, let's grab that.", 'start': 1106.752, 'duration': 1.221}, {'end': 1109.173, 'text': "So we'd have to do it here.", 'start': 1108.013, 'duration': 1.16}, {'end': 1111.394, 'text': 'We would have to do it here.', 'start': 1110.114, 'duration': 1.28}, {'end': 1115.376, 'text': 'So you can see that it really cleans things up when you use destructuring.', 'start': 1112.154, 'duration': 3.222}], 'summary': 'Destructuring in posts cleans up code, reducing repetition and improving readability.', 'duration': 25.205, 'max_score': 1090.171, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qi9VQqYcXqY/pics/qi9VQqYcXqY1090171.jpg'}, {'end': 1205.667, 'src': 'embed', 'start': 1173.184, 'weight': 4, 'content': [{'end': 1176.924, 'text': 'So We talked about the spread operator.', 'start': 1173.184, 'duration': 3.74}, {'end': 1178.968, 'text': "So let's take a look at a redux example.", 'start': 1176.965, 'duration': 2.003}, {'end': 1183.614, 'text': "And if you've never used redux before, I don't expect you to understand what's going on here.", 'start': 1179.388, 'duration': 4.226}, {'end': 1185.898, 'text': "But you notice that we're using the spread operator.", 'start': 1183.675, 'duration': 2.223}, {'end': 1196.057, 'text': 'quite a bit here, because we have our initial state up here, which has post post loading, and then, for instance, when we want to get the posts,', 'start': 1186.708, 'duration': 9.349}, {'end': 1205.667, 'text': "we want to send some data through a payload to the posts and we're using the the spread operator to copy everything that's in the state,", 'start': 1196.057, 'duration': 9.61}], 'summary': 'In a redux example, the spread operator is used extensively to copy the initial state and send data as a payload.', 'duration': 32.483, 'max_score': 1173.184, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qi9VQqYcXqY/pics/qi9VQqYcXqY1173184.jpg'}, {'end': 1341.567, 'src': 'embed', 'start': 1313.557, 'weight': 0, 'content': [{'end': 1316.158, 'text': 'It has nothing to do with the framework.', 'start': 1313.557, 'duration': 2.601}, {'end': 1320.08, 'text': 'There are specific concepts of the framework, but a lot of it is JavaScript.', 'start': 1316.198, 'duration': 3.882}, {'end': 1324.822, 'text': "And if you learn that stuff beforehand, then you're going to be fine learning any framework.", 'start': 1320.36, 'duration': 4.462}, {'end': 1332.804, 'text': "And even if, let's say, you learn React and then for some reason, React tanks in the industry and Vue.js is now what everyone's using,", 'start': 1325.382, 'duration': 7.422}, {'end': 1336.665, 'text': "you'll easily be able to move to Vue because you already know all these concepts.", 'start': 1332.804, 'duration': 3.861}, {'end': 1339.166, 'text': "So that's the that's the whole point of doing this.", 'start': 1337.366, 'duration': 1.8}, {'end': 1341.567, 'text': 'So hopefully this this helps you guys out.', 'start': 1339.646, 'duration': 1.921}], 'summary': 'Learning javascript concepts prepares for any framework, ensuring adaptability in industry changes.', 'duration': 28.01, 'max_score': 1313.557, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qi9VQqYcXqY/pics/qi9VQqYcXqY1313557.jpg'}], 'start': 903.764, 'title': 'Understanding javascript in frameworks', 'summary': 'Emphasizes the importance of recognizing that many concepts in frameworks like vue.js, react, angular, and redux are actually javascript, covering classes, promises, destructuring, spread operator, map, and filter. it highlights that understanding these concepts beforehand can ease the learning of any framework.', 'chapters': [{'end': 1398.37, 'start': 903.764, 'title': 'Understanding javascript in frameworks', 'summary': 'Discusses the importance of recognizing that many concepts in frameworks like vue.js, react, angular, and redux are actually javascript, covering classes, promises, destructuring, spread operator, map, and filter, emphasizing that understanding these concepts beforehand can ease the learning of any framework.', 'duration': 494.606, 'highlights': ['Understanding that many concepts in frameworks like Vue.js, React, Angular, and Redux are actually JavaScript, covering classes, promises, destructuring, spread operator, map, and filter, emphasizing that understanding these concepts beforehand can ease the learning of any framework. The transcript emphasizes the importance of recognizing that many concepts in frameworks like Vue.js, React, Angular, and Redux are actually JavaScript. It covers classes, promises, destructuring, spread operator, map, and filter, emphasizing that understanding these concepts beforehand can ease the learning of any framework.', 'Emphasizing the usage of classes and methods within classes in React and Angular, along with the introduction of TypeScript in Angular. The usage of classes and methods within classes is emphasized in React and Angular, along with the introduction of TypeScript in Angular.', 'Explaining the usage of promises in various frameworks including Vue, Angular, and React, along with the handling of promises using .then and .catch. The transcript explains the usage of promises in various frameworks including Vue, Angular, and React, along with the handling of promises using .then and .catch.', 'Demonstrating the benefits of destructuring in JavaScript, specifically in React and functional components, for cleaner syntax and improved readability. The benefits of destructuring in JavaScript, specifically in React and functional components, for cleaner syntax and improved readability, are demonstrated.', 'Illustrating the usage of the spread operator in Redux to manage state and the usage of filter as a high order function, emphasizing the importance of understanding these concepts when dealing with state management. The transcript illustrates the usage of the spread operator in Redux to manage state and the usage of filter as a high order function, emphasizing the importance of understanding these concepts when dealing with state management.']}], 'duration': 494.606, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qi9VQqYcXqY/pics/qi9VQqYcXqY903764.jpg', 'highlights': ['Understanding that many concepts in frameworks like Vue.js, React, Angular, and Redux are actually JavaScript, covering classes, promises, destructuring, spread operator, map, and filter, emphasizing that understanding these concepts beforehand can ease the learning of any framework.', 'Emphasizing the usage of classes and methods within classes in React and Angular, along with the introduction of TypeScript in Angular.', 'Explaining the usage of promises in various frameworks including Vue, Angular, and React, along with the handling of promises using .then and .catch.', 'Demonstrating the benefits of destructuring in JavaScript, specifically in React and functional components, for cleaner syntax and improved readability.', 'Illustrating the usage of the spread operator in Redux to manage state and the usage of filter as a high order function, emphasizing the importance of understanding these concepts when dealing with state management.']}], 'highlights': ['Understanding module imports and component exports in React, Angular, and Vue is crucial for easier adoption of front-end frameworks.', 'Learning basics and fundamentals of JavaScript is essential before delving into a framework to ensure a strong foundation.', 'Modules, particularly ES6 modules with the import from syntax, are vital for integrating files and packages into frameworks, ensuring smooth functionality across different frameworks.', 'Understanding arrow functions is crucial for writing concise and clean code in frameworks, as they offer advantages in terms of code length and scope.', 'Knowing how to create, receive, and handle promises, along with using .then and .catch, is vital for managing asynchronous tasks within frameworks, contributing to efficient code execution.', 'Destructuring aids in unpacking values and assigning variables from objects and arrays, providing a more efficient way to work with data within frameworks and ensuring a better understanding of data manipulation.', 'Shift to Component-Based UI Frontend frameworks like React emphasize the shift from monolithic JavaScript to component-based UI, where UI elements are treated as encapsulated entities with their own state, allowing for better organization and reusability of code.', 'Importance of State Management The importance of state management in frontend frameworks is highlighted, with examples of how each component has its own state, and the need for technologies like Redux for React or Vuex for Vue for state level management and sharing of data.', 'Understanding that many concepts in frameworks like Vue.js, React, Angular, and Redux are actually JavaScript, covering classes, promises, destructuring, spread operator, map, and filter, emphasizing that understanding these concepts beforehand can ease the learning of any framework.', 'Emphasizing the usage of classes and methods within classes in React and Angular, along with the introduction of TypeScript in Angular.', 'Explaining the usage of promises in various frameworks including Vue, Angular, and React, along with the handling of promises using .then and .catch.', 'Demonstrating the benefits of destructuring in JavaScript, specifically in React and functional components, for cleaner syntax and improved readability.', 'Illustrating the usage of the spread operator in Redux to manage state and the usage of filter as a high order function, emphasizing the importance of understanding these concepts when dealing with state management.']}