title
MERN Stack Tutorial for Beginners | Build a MERN App From Scratch | Full Stack Training | Edureka

description
🔥𝐄𝐝𝐮𝐫𝐞𝐤𝐚 𝐑𝐞𝐚𝐜𝐭 𝐉𝐒 𝐂𝐞𝐫𝐭𝐢𝐟𝐢𝐜𝐚𝐭𝐢𝐨𝐧 𝐓𝐫𝐚𝐢𝐧𝐢𝐧𝐠 𝐂𝐨𝐮𝐫𝐬𝐞 : https://www.edureka.co/reactjs-redux-certification-training(Use code "𝐘𝐎𝐔𝐓𝐔𝐁𝐄𝟐𝟎") This Edureka video on "MERN Stack Tutorial" will help you to create a Full Stack MERN Application from scratch. Each section of code has been explained to provide a better understanding. You will learn about following technologies while going through this video: 1) ReactJS 2) Node.js 3) Express 4) MongoDB 5) GraphQL Subscribe to our channel to get video updates. Hit the subscribe button above. 🔥 Full-Stack Web Development Internship Program: http://bit.ly/fs-internship Check our complete Node.js playlist here: https://goo.gl/mEkHWw Check our complete ReactJS playlist here: https://goo.gl/EtU2ST For more such tutorials, you can also check out this YouTube channel: https://goo.gl/CmZqxo ---------------- JavaScript Certification Training ----------------- 🔵 Edureka Angular Training: http://bit.ly/38mi3sw 🔵 Edureka ReactJS Training: http://bit.ly/2DVP6Wz 🔵 Edureka NodeJS Training: http://bit.ly/35ehwXX 🔵 Edureka Full Stack Training: http://bit.ly/2YveVpL 🔵 Edureka Python Django Training: http://bit.ly/2RAk6Do How does it work? 1. This program follows a set structure with 5 core courses and 4 electives spread across 21 weeks. 2. We have a 24x7 One-on-One LIVE Technical Support to help you with any problems you might face or any clarifications you may require during the course. 3. At the end of the training you will have to work on a project, based on which we will provide you a Grade and a Verifiable Certificate! - - - - - - - - - - - - - - About The Program This program follows a set structure with 5 core courses and 4 electives spread across 21 weeks. It makes you an expert in key technologies related to Full Stack Web Development. At the end of each core course, you will be working on a real-time project to gain hands on expertise. By the end of the program you will be ready for seasoned Full Stack Web Development job roles. -------------------------------------------------------- Who should go for this Program? Full Stack Developer Masters Program has been curated after thorough research and recommendations from industry experts. It will help you differentiate yourself with multi-platform fluency, and have real-world experience with the most important tools and platforms. Edureka will be by your side throughout the learning journey - We’re Ridiculously Committed. For more information, please write back to us at sales@edureka.co or call us at IND: 9606058406 / US: 18338555775 (toll free). Facebook: https://www.facebook.com/edurekaIN/ Twitter: https://twitter.com/edurekain LinkedIn: https://www.linkedin.com/company/edureka

detail
{'title': 'MERN Stack Tutorial for Beginners | Build a MERN App From Scratch | Full Stack Training | Edureka', 'heatmap': [{'end': 433.296, 'start': 308.623, 'weight': 0.744}, {'end': 973.349, 'start': 932.46, 'weight': 0.835}, {'end': 1555.228, 'start': 1476.846, 'weight': 0.716}, {'end': 1790.623, 'start': 1668.461, 'weight': 0.848}, {'end': 1866.948, 'start': 1825.855, 'weight': 0.737}, {'end': 1983.452, 'start': 1904.947, 'weight': 0.819}, {'end': 2061.641, 'start': 2021.715, 'weight': 1}, {'end': 2379.177, 'start': 2290.469, 'weight': 0.764}, {'end': 2917.946, 'start': 2870.245, 'weight': 0.861}], 'summary': 'This tutorial covers building a mern stack app from scratch, introducing mern stack overview, setting up graphql server, implementing crud operations, building react app for crud operations, using apollo and graphql in react, enhancing apollo queries with material ui, managing react props and apollo cache, and handling array and form operations in react.', 'chapters': [{'end': 196.194, 'segs': [{'end': 58.633, 'src': 'embed', 'start': 31.198, 'weight': 0, 'content': [{'end': 39.163, 'text': 'which is a technology from Facebook that makes it easy to query fields and send data between the server and client.', 'start': 31.198, 'duration': 7.965}, {'end': 43.346, 'text': "And we're also going to be replacing Angular with React.", 'start': 39.763, 'duration': 3.583}, {'end': 46.508, 'text': 'And this is called the mern stack.', 'start': 43.906, 'duration': 2.602}, {'end': 54.535, 'text': "So what exactly is the mern stack? Well, it's the same thing as the mean stack, but replacing Angular with React.", 'start': 47.128, 'duration': 7.407}, {'end': 58.633, 'text': 'So here is what it looks like.', 'start': 56.812, 'duration': 1.821}], 'summary': 'Introducing mern stack: replaces angular with react for easier data exchange.', 'duration': 27.435, 'max_score': 31.198, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc31198.jpg'}, {'end': 114.299, 'src': 'embed', 'start': 82.18, 'weight': 1, 'content': [{'end': 84.421, 'text': "And we're going to be using MongoDB for this.", 'start': 82.18, 'duration': 2.241}, {'end': 92.038, 'text': 'You guys may be wondering why might you want to use ReactJS over something like Angular or just JavaScript itself.', 'start': 85.273, 'duration': 6.765}, {'end': 95.207, 'text': 'Well, this is a very popular framework right now.', 'start': 93.066, 'duration': 2.141}, {'end': 102.252, 'text': "It is currently what Facebook uses on their very own website, and it's very nice to build applications with.", 'start': 95.548, 'duration': 6.704}, {'end': 108.115, 'text': 'It has somewhat of a steeper learning curve, I would say, than some of the other frameworks, but once you learn it,', 'start': 102.672, 'duration': 5.443}, {'end': 114.299, 'text': 'you can be very productive and build very high-quality, production-ready web applications, which is very cool.', 'start': 108.115, 'duration': 6.184}], 'summary': 'Mongodb and reactjs are popular for building high-quality web applications, with reactjs being used by facebook.', 'duration': 32.119, 'max_score': 82.18, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc82180.jpg'}, {'end': 152.598, 'src': 'embed', 'start': 123.164, 'weight': 2, 'content': [{'end': 127.466, 'text': 'And then MongoDB is just a really solid database for NoSQL.', 'start': 123.164, 'duration': 4.302}, {'end': 130.926, 'text': "So that means it's very easy to store different types of data.", 'start': 127.906, 'duration': 3.02}, {'end': 138.85, 'text': "And as our database changes and our application changes, it's very easy to change our schema or what our data looks like in the database.", 'start': 131.427, 'duration': 7.423}, {'end': 143.953, 'text': 'And then Express is very nice to make a server with very fast.', 'start': 139.69, 'duration': 4.263}, {'end': 146.354, 'text': "So that's our choice here.", 'start': 144.633, 'duration': 1.721}, {'end': 152.598, 'text': "So there's really four main operations when building an application like this.", 'start': 147.314, 'duration': 5.284}], 'summary': 'Mongodb is a solid nosql database for easy data storage and schema changes, while express is fast for server creation.', 'duration': 29.434, 'max_score': 123.164, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc123164.jpg'}], 'start': 7.318, 'title': 'Mern stack and tech stack overview', 'summary': 'Introduces the mern stack, incorporating graphql and web application tech stack overview including react.js, node.js, express, graphql, and mongodb, emphasizing their benefits and capabilities. it also covers building an application with mongodb and express, highlighting their ease of use and main operations.', 'chapters': [{'end': 58.633, 'start': 7.318, 'title': 'Introduction to mern stack with graphql', 'summary': 'Introduces the mern stack, which replaces angular with react in the mean stack, and incorporates graphql for querying fields and data transfer, a technology from facebook.', 'duration': 51.315, 'highlights': ['The MERN stack replaces Angular with React and incorporates GraphQL for querying fields and data transfer, a technology from Facebook.', 'The MEAN stack, which is MongoDB, AngularJS, Express, and Node.js, is being transformed into the MERN stack to incorporate React and GraphQL.', 'GraphQL, a technology from Facebook, is introduced to make it easy to query fields and send data between the server and client.']}, {'end': 122.724, 'start': 59.093, 'title': 'Web application tech stack overview', 'summary': 'Introduces the tech stack for the web application, including react.js, node.js with express, graphql, and mongodb, highlighting the benefits of using react.js and graphql due to their popularity, productivity, and optimization capabilities.', 'duration': 63.631, 'highlights': ['React.js is chosen for the front end due to its popularity and its use by Facebook, offering productivity and high-quality web application development.', "GraphQL is selected for optimizing and sending efficient queries, leveraging Facebook's technology and expertise.", 'Node.js with Express will serve as the server to handle requests from the web app, contributing to the overall architecture of the application.', 'The backend will utilize MongoDB for data storage, completing the tech stack for the web application.']}, {'end': 196.194, 'start': 123.164, 'title': 'Building an application with mongodb and express', 'summary': 'Covers how mongodb and express are used to build a server, emphasizing the easiness of schema changes and the four main operations (crud: create, read, update, delete) with mongodb and mongoose in node.js.', 'duration': 73.03, 'highlights': ['The chapter emphasizes MongoDB as a solid NoSQL database for easy storage of different data types and schema changes.', 'The four main operations, CRUD (Create, Read, Update, Delete) are explained, highlighting the usage of MongoDB and Mongoose in Node.js for each operation.', "The specific methods for each CRUD operation are detailed, including 'save' for create, 'find' for read, 'update' for update, and the deletion process for delete."]}], 'duration': 188.876, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc7318.jpg', 'highlights': ['The MERN stack replaces Angular with React and incorporates GraphQL for querying fields and data transfer, a technology from Facebook.', 'React.js is chosen for the front end due to its popularity and its use by Facebook, offering productivity and high-quality web application development.', 'The chapter emphasizes MongoDB as a solid NoSQL database for easy storage of different data types and schema changes.']}, {'end': 707.94, 'segs': [{'end': 237.794, 'src': 'embed', 'start': 196.194, 'weight': 0, 'content': [{'end': 198.756, 'text': 'and this is going to be remove.', 'start': 196.194, 'duration': 2.562}, {'end': 206.08, 'text': "so the application that we're going to be building to try this stack out, the mern stack, is a to-do list app.", 'start': 198.756, 'duration': 7.324}, {'end': 209.771, 'text': "So, without further ado, let's go ahead and get started.", 'start': 206.829, 'duration': 2.942}, {'end': 213.615, 'text': 'So there are a few prerequisites for this tutorial.', 'start': 210.392, 'duration': 3.223}, {'end': 217.177, 'text': 'First off, make sure you have a editor of some sort.', 'start': 214.055, 'duration': 3.122}, {'end': 221.021, 'text': "I'm going to be using Visual Studio Code where I can edit files.", 'start': 217.318, 'duration': 3.703}, {'end': 223.162, 'text': 'And then you want to make sure you have a terminal.', 'start': 221.481, 'duration': 1.681}, {'end': 226.105, 'text': "I'm going to be using the terminal built into Visual Studio Code.", 'start': 223.503, 'duration': 2.602}, {'end': 228.367, 'text': "And we're just going to be doing some things with that.", 'start': 226.385, 'duration': 1.982}, {'end': 229.728, 'text': 'So make sure you have both of those.', 'start': 228.407, 'duration': 1.321}, {'end': 232.33, 'text': "And then we're going to be using MongoDB.", 'start': 230.228, 'duration': 2.102}, {'end': 233.811, 'text': "So you're going to want to install that.", 'start': 232.57, 'duration': 1.241}, {'end': 237.794, 'text': "And the recommended way to install MongoDB, I'm using a Mac.", 'start': 234.311, 'duration': 3.483}], 'summary': 'Building a to-do list app using mern stack with prerequisites - editor, terminal, and mongodb installation on a mac.', 'duration': 41.6, 'max_score': 196.194, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc196194.jpg'}, {'end': 433.296, 'src': 'heatmap', 'start': 257.148, 'weight': 2, 'content': [{'end': 261.913, 'text': "install MongoDB and that'll just install MongoDB on my computer.", 'start': 257.148, 'duration': 4.765}, {'end': 264.837, 'text': 'And then to verify that you have MongoDB,', 'start': 262.374, 'duration': 2.463}, {'end': 271.604, 'text': "you can just type Mongo and you can see here's the version of my Mongo shell and then you can see whether you connected to it.", 'start': 264.837, 'duration': 6.767}, {'end': 275.723, 'text': 'So the other thing is to make sure you do start your Mongo database.', 'start': 272.082, 'duration': 3.641}, {'end': 278.144, 'text': 'So I already had mine started, so I was able to connect to this.', 'start': 275.823, 'duration': 2.321}, {'end': 282.166, 'text': 'If you use brew, you can just do brew services.', 'start': 278.164, 'duration': 4.002}, {'end': 285.027, 'text': "And then instead of restart, we're going to start.", 'start': 283.106, 'duration': 1.921}, {'end': 289.109, 'text': 'So brew services start MongoDB if you installed this with homebrew.', 'start': 285.347, 'duration': 3.762}, {'end': 291.61, 'text': "The other thing we're going to need is node.js.", 'start': 289.349, 'duration': 2.261}, {'end': 295.971, 'text': 'So again, once you have homebrew, you can do brew install node.', 'start': 292.15, 'duration': 3.821}, {'end': 299.173, 'text': "So you can see it's really nice to just install things with homebrew.", 'start': 296.131, 'duration': 3.042}, {'end': 300.073, 'text': 'It makes it super easy.', 'start': 299.193, 'duration': 0.88}, {'end': 304.682, 'text': 'And if you type node-v in terminal, you should see a value.', 'start': 300.56, 'duration': 4.122}, {'end': 305.962, 'text': "And here's the version.", 'start': 305.042, 'duration': 0.92}, {'end': 308.623, 'text': "I'm currently on node 9.11.", 'start': 305.982, 'duration': 2.641}, {'end': 312.125, 'text': 'And then with that, you should get npm, which is node package manager.', 'start': 308.623, 'duration': 3.502}, {'end': 316.326, 'text': "I'm using 5.8, so you just want to verify both of those got installed.", 'start': 312.505, 'duration': 3.821}, {'end': 319.207, 'text': "Now, if you're not running on a Mac, you can't use Homebrew.", 'start': 316.506, 'duration': 2.701}, {'end': 325.59, 'text': 'I just recommend going to the official websites for MongoDB and Node.js and downloading them that way.', 'start': 319.427, 'duration': 6.163}, {'end': 328.204, 'text': "All right, so we're ready to get started.", 'start': 326.383, 'duration': 1.821}, {'end': 330.706, 'text': "We're going to be starting from a blank directory.", 'start': 328.224, 'duration': 2.482}, {'end': 334.428, 'text': 'So I have just an empty folder right here called server.', 'start': 331.046, 'duration': 3.382}, {'end': 336.61, 'text': "If I do an ls, there's nothing in there right now.", 'start': 334.609, 'duration': 2.001}, {'end': 339.812, 'text': "And I'm going to start off the project with npm init.", 'start': 337.07, 'duration': 2.742}, {'end': 342.374, 'text': "And I'm just going to do dash y.", 'start': 340.192, 'duration': 2.182}, {'end': 347.097, 'text': 'This accepts all the defaults and just creates a package.json file.', 'start': 342.374, 'duration': 4.723}, {'end': 349.579, 'text': 'So we have one file now in our project.', 'start': 347.137, 'duration': 2.442}, {'end': 354.122, 'text': 'And this is going to hold basically where our configuration stuff for the project.', 'start': 349.679, 'duration': 4.443}, {'end': 356.163, 'text': 'So what dependencies we need mainly.', 'start': 354.202, 'duration': 1.961}, {'end': 361.489, 'text': "So we're going to start off by adding a dependency called GraphQL yoga.", 'start': 356.643, 'duration': 4.846}, {'end': 365.393, 'text': 'This is a really nice GraphQL server that makes it super easy.', 'start': 361.869, 'duration': 3.524}, {'end': 367.095, 'text': "We're going to install it.", 'start': 365.673, 'duration': 1.422}, {'end': 368.877, 'text': "So we're going to copy this.", 'start': 367.155, 'duration': 1.722}, {'end': 370.879, 'text': "I'm just going to say npm,", 'start': 369.437, 'duration': 1.442}, {'end': 378.127, 'text': "install GraphQL yoga and you want to make sure and run this command inside the server directory and it's going to go ahead and install this for us.", 'start': 370.879, 'duration': 7.248}, {'end': 385.894, 'text': "Now here is a little quick start that we're going to use and we're going to copy the quick start and paste it into a file.", 'start': 378.689, 'duration': 7.205}, {'end': 391.898, 'text': "I'm going to create a new file called index.js and paste it in here.", 'start': 385.914, 'duration': 5.984}, {'end': 395.28, 'text': "So let's go through exactly what all this stuff is doing.", 'start': 392.178, 'duration': 3.102}, {'end': 398.062, 'text': 'First line is importing the package.', 'start': 395.74, 'duration': 2.322}, {'end': 401.344, 'text': "We're going to use the require syntax because we're just going to use node.", 'start': 398.242, 'duration': 3.102}, {'end': 404.967, 'text': 'So here we are importing GraphQL yoga, which is that library.', 'start': 401.905, 'duration': 3.062}, {'end': 407.409, 'text': "Here is what's known as the schema.", 'start': 405.268, 'duration': 2.141}, {'end': 409.191, 'text': "So we're using GraphQL.", 'start': 407.489, 'duration': 1.702}, {'end': 412.253, 'text': 'So with GraphQL, you have to set up a schema.', 'start': 409.471, 'duration': 2.782}, {'end': 416.216, 'text': 'And our schema right now has this thing called a query type.', 'start': 412.553, 'duration': 3.663}, {'end': 418.838, 'text': 'And inside of query type, we have hello.', 'start': 416.336, 'duration': 2.502}, {'end': 422.121, 'text': 'And hello takes one argument that kind of looks like a function.', 'start': 419.178, 'duration': 2.943}, {'end': 423.722, 'text': 'This argument is name.', 'start': 422.521, 'duration': 1.201}, {'end': 433.296, 'text': 'name is the name of the argument and then string is the data type for it, and then this is the return type, which is a string as well.', 'start': 424.472, 'duration': 8.824}], 'summary': 'Install mongodb and node.js using homebrew, set up graphql server with graphql yoga, create package.json file and index.js for project configuration and dependencies.', 'duration': 85.226, 'max_score': 257.148, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc257148.jpg'}, {'end': 398.062, 'src': 'embed', 'start': 367.155, 'weight': 6, 'content': [{'end': 368.877, 'text': "So we're going to copy this.", 'start': 367.155, 'duration': 1.722}, {'end': 370.879, 'text': "I'm just going to say npm,", 'start': 369.437, 'duration': 1.442}, {'end': 378.127, 'text': "install GraphQL yoga and you want to make sure and run this command inside the server directory and it's going to go ahead and install this for us.", 'start': 370.879, 'duration': 7.248}, {'end': 385.894, 'text': "Now here is a little quick start that we're going to use and we're going to copy the quick start and paste it into a file.", 'start': 378.689, 'duration': 7.205}, {'end': 391.898, 'text': "I'm going to create a new file called index.js and paste it in here.", 'start': 385.914, 'duration': 5.984}, {'end': 395.28, 'text': "So let's go through exactly what all this stuff is doing.", 'start': 392.178, 'duration': 3.102}, {'end': 398.062, 'text': 'First line is importing the package.', 'start': 395.74, 'duration': 2.322}], 'summary': 'Installing graphql yoga using npm and importing the package into a new file.', 'duration': 30.907, 'max_score': 367.155, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc367155.jpg'}, {'end': 528.471, 'src': 'embed', 'start': 500.585, 'weight': 7, 'content': [{'end': 506.407, 'text': "so all right, let's go to localhost 4000 and see what's going on there.", 'start': 500.585, 'duration': 5.822}, {'end': 510.947, 'text': "So we'll get this thing that says loading GraphQL playground.", 'start': 506.927, 'duration': 4.02}, {'end': 513.368, 'text': "I've been here before, so I have some junk.", 'start': 511.548, 'duration': 1.82}, {'end': 514.808, 'text': "It's going to clear that off.", 'start': 513.688, 'duration': 1.12}, {'end': 522.69, 'text': 'And so if I click on schema, I can see on the right what things I can run or what things I can do here.', 'start': 515.628, 'duration': 7.062}, {'end': 525.43, 'text': 'This is a GraphQL playground.', 'start': 522.95, 'duration': 2.48}, {'end': 528.471, 'text': 'And what this is, is you can run your queries.', 'start': 525.65, 'duration': 2.821}], 'summary': 'Using localhost 4000 to access graphql playground for running queries.', 'duration': 27.886, 'max_score': 500.585, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc500585.jpg'}, {'end': 667.194, 'src': 'embed', 'start': 622.175, 'weight': 8, 'content': [{'end': 625.858, 'text': "There's two main things in GraphQL, queries and mutations.", 'start': 622.175, 'duration': 3.683}, {'end': 630.763, 'text': "Queries are for looking at the data, which I already said, and that's what we ran right here.", 'start': 626.639, 'duration': 4.124}, {'end': 634.107, 'text': 'We could prefix this with the word query to be more explicit.', 'start': 631.264, 'duration': 2.843}, {'end': 635.809, 'text': 'Those are doing the same things.', 'start': 634.427, 'duration': 1.382}, {'end': 638.571, 'text': 'The other thing is called mutations.', 'start': 636.269, 'duration': 2.302}, {'end': 642.575, 'text': 'These are when we add data, we update data, or we delete data.', 'start': 638.691, 'duration': 3.884}, {'end': 643.936, 'text': "We're going to be running mutations.", 'start': 642.615, 'duration': 1.321}, {'end': 650.162, 'text': "And we'll get into those very shortly when we add our MongoDB connection.", 'start': 644.837, 'duration': 5.325}, {'end': 651.863, 'text': 'So our server is good.', 'start': 650.842, 'duration': 1.021}, {'end': 655.306, 'text': "We're going to move on to connecting to MongoDB.", 'start': 651.883, 'duration': 3.423}, {'end': 659.249, 'text': "And to do this, we're going to be using something called Mongoose.", 'start': 656.187, 'duration': 3.062}, {'end': 661.43, 'text': 'So first off, we need to install this.', 'start': 659.529, 'duration': 1.901}, {'end': 667.194, 'text': "So I'm going to come over here to terminal, stop my server, do npm install Mongoose.", 'start': 661.891, 'duration': 5.303}], 'summary': 'Graphql has two main aspects: queries and mutations. mutations involve adding, updating, or deleting data. the next step is to connect to mongodb using mongoose.', 'duration': 45.019, 'max_score': 622.175, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc622175.jpg'}], 'start': 196.194, 'title': 'Building mern stack to-do list', 'summary': 'Introduces the process of building a to-do list app using the mern stack, highlighting the prerequisites of having an editor, a terminal, and installing mongodb via homebrew. it also covers the installation of mongodb and node.js, setting up a graphql server using graphql yoga, demonstrating graphql queries and mutations, and connecting to mongodb using mongoose.', 'chapters': [{'end': 255.947, 'start': 196.194, 'title': 'Building mern stack to-do list', 'summary': 'Introduces the process of building a to-do list app using the mern stack, highlighting the prerequisites of having an editor, a terminal, and installing mongodb via homebrew.', 'duration': 59.753, 'highlights': ['The tutorial focuses on building a to-do list app using the MERN stack.', 'Prerequisites include having an editor, a terminal, and installing MongoDB using Homebrew.', 'Homebrew is recommended as a package manager for installing MongoDB.']}, {'end': 707.94, 'start': 257.148, 'title': 'Setting up mongodb, node.js, and graphql server', 'summary': 'Covers the installation of mongodb and node.js, setting up a graphql server using graphql yoga, demonstrating graphql queries and mutations, and connecting to mongodb using mongoose.', 'duration': 450.792, 'highlights': ['Installed MongoDB and verified the installation by checking the version and connection status. MongoDB was installed and verified, with the version of Mongo shell being 3.4.2 and successful connection established.', 'Installed Node.js using Homebrew and verified the installation along with npm. Node.js installation via Homebrew was confirmed, with the version being 9.11 and npm version 5.8.', "Initiated a new project directory and created a package.json file using npm init. Initialized a new project directory 'server' and created a package.json file using 'npm init -y' to set up project configurations and dependencies.", 'Installed GraphQL yoga for setting up a GraphQL server and pasted a quick start code into index.js. Installed GraphQL yoga to facilitate the setup of a GraphQL server and added a quick start code into index.js for further configuration.', 'Demonstrated the setup of a GraphQL schema, resolvers, and started the server, accessing the GraphQL playground for running queries. Configured the GraphQL schema, resolvers, and initiated the server, accessing the GraphQL playground to execute queries, showcasing functionality and data retrieval.', 'Explained the concepts of GraphQL queries and mutations, elaborating on their usage and differences. Explained the concepts of GraphQL queries and mutations, highlighting their purpose and distinction, emphasizing queries for data retrieval and mutations for data manipulation.', 'Installed Mongoose for connecting to MongoDB and demonstrated the creation of a connection to a test database. Installed Mongoose to enable the connection to MongoDB, illustrating the setup of a connection to a test database using Mongoose.']}], 'duration': 511.746, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc196194.jpg', 'highlights': ['The tutorial focuses on building a to-do list app using the MERN stack.', 'Prerequisites include having an editor, a terminal, and installing MongoDB using Homebrew.', 'Homebrew is recommended as a package manager for installing MongoDB.', 'Installed MongoDB and verified the installation by checking the version and connection status.', 'Installed Node.js using Homebrew and verified the installation along with npm.', 'Initiated a new project directory and created a package.json file using npm init.', 'Installed GraphQL yoga for setting up a GraphQL server and pasted a quick start code into index.js.', 'Demonstrated the setup of a GraphQL schema, resolvers, and started the server, accessing the GraphQL playground for running queries.', 'Explained the concepts of GraphQL queries and mutations, elaborating on their usage and differences.', 'Installed Mongoose for connecting to MongoDB and demonstrated the creation of a connection to a test database.']}, {'end': 1434.2, 'segs': [{'end': 776.994, 'src': 'embed', 'start': 728.227, 'weight': 0, 'content': [{'end': 736.837, 'text': "they did mongoose connection and then inside of that they're going to pass the server.start.", 'start': 728.227, 'duration': 8.61}, {'end': 742.263, 'text': 'so once we connect to the mongo db database, we then start our graphql server.', 'start': 736.837, 'duration': 5.426}, {'end': 742.999, 'text': 'All right.', 'start': 742.639, 'duration': 0.36}, {'end': 751.607, 'text': "so next thing we want to do is create a schema which is then going to be basically our database model, or what we're going to store in the database.", 'start': 742.999, 'duration': 8.608}, {'end': 756.131, 'text': "So we're going to grab this Mongoose model, and we're going to change it up a little bit.", 'start': 751.667, 'duration': 4.464}, {'end': 758.053, 'text': 'So they are doing a kitten.', 'start': 756.771, 'duration': 1.282}, {'end': 761.015, 'text': 'For us, we are going to do a to-do.', 'start': 758.753, 'duration': 2.262}, {'end': 763.537, 'text': 'So the model is going to be to-do.', 'start': 761.536, 'duration': 2.001}, {'end': 766.267, 'text': "And we're going to have a few things.", 'start': 764.466, 'duration': 1.801}, {'end': 768.228, 'text': 'So the first is text.', 'start': 766.547, 'duration': 1.681}, {'end': 772.791, 'text': 'And here we want to pass the data type.', 'start': 768.809, 'duration': 3.982}, {'end': 775.533, 'text': 'So the text is going to be a string.', 'start': 773.091, 'duration': 2.442}, {'end': 776.994, 'text': 'So we say string.', 'start': 776.033, 'duration': 0.961}], 'summary': 'Setting up mongoose connection and creating a to-do model with a text field of type string.', 'duration': 48.767, 'max_score': 728.227, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc728227.jpg'}, {'end': 973.349, 'src': 'heatmap', 'start': 932.46, 'weight': 0.835, 'content': [{'end': 935.723, 'text': 'But before we return it, we have to save it to the database with .', 'start': 932.46, 'duration': 3.263}, {'end': 938.165, 'text': 'save And .', 'start': 935.723, 'duration': 2.442}, {'end': 941.687, 'text': 'save returns a promise, so we want to await that.', 'start': 938.165, 'duration': 3.522}, {'end': 946.49, 'text': 'And we await this to-do from being saved into the database.', 'start': 942.748, 'duration': 3.742}, {'end': 951.134, 'text': "So we're creating an instance of it, saving it to the database, and then returning it.", 'start': 946.67, 'duration': 4.464}, {'end': 955.737, 'text': 'So I can start my server, and we can see if this code works.', 'start': 951.714, 'duration': 4.023}, {'end': 959.499, 'text': 'And if it does, what we should do is be able to create a to-do in our database.', 'start': 955.877, 'duration': 3.622}, {'end': 962.121, 'text': "So we're going to say node index.js.", 'start': 960.34, 'duration': 1.781}, {'end': 968.966, 'text': 'Alright, so it started up, so it looks like it was able to connect to the MongoDB instance okay.', 'start': 963.562, 'duration': 5.404}, {'end': 970.727, 'text': 'And bring the playground over here.', 'start': 968.986, 'duration': 1.741}, {'end': 973.349, 'text': "And I'm going to say mutation.", 'start': 970.747, 'duration': 2.602}], 'summary': 'Saving a to-do into the database and testing the code by connecting to mongodb.', 'duration': 40.889, 'max_score': 932.46, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc932460.jpg'}, {'end': 1019.592, 'src': 'embed', 'start': 991.777, 'weight': 2, 'content': [{'end': 994.418, 'text': 'So now under mutations, we can see the create to do.', 'start': 991.777, 'duration': 2.641}, {'end': 998.799, 'text': 'And this is kind of like our own documentation that was automatically generated for us.', 'start': 994.438, 'duration': 4.361}, {'end': 1002.079, 'text': "So that's really cool and a nice feature of GraphQL.", 'start': 998.819, 'duration': 3.26}, {'end': 1002.96, 'text': 'So create to do.', 'start': 1002.099, 'duration': 0.861}, {'end': 1004.52, 'text': 'We now have text.', 'start': 1003.18, 'duration': 1.34}, {'end': 1006.86, 'text': 'So create to do text.', 'start': 1004.9, 'duration': 1.96}, {'end': 1009.281, 'text': "And I'm going to say my first item.", 'start': 1007.06, 'duration': 2.221}, {'end': 1015.147, 'text': "Now you can see, it's kind of mad at us, but this is the exact same thing that we did with the hello right?", 'start': 1009.821, 'duration': 5.326}, {'end': 1019.592, 'text': 'Well, it expects a little bit different return type to do, which is an object.', 'start': 1015.387, 'duration': 4.205}], 'summary': "Using mutations in graphql, a to-do item 'my first item' was created with text 'create to do'.", 'duration': 27.815, 'max_score': 991.777, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc991777.jpg'}, {'end': 1096.845, 'src': 'embed', 'start': 1069.172, 'weight': 6, 'content': [{'end': 1072.233, 'text': 'We just add a bunch of to do items to our database.', 'start': 1069.172, 'duration': 3.061}, {'end': 1076.195, 'text': "Let's go ahead and fetch them or read them or query them.", 'start': 1072.393, 'duration': 3.802}, {'end': 1080.057, 'text': "So to do this, we're going to add a query.", 'start': 1076.955, 'duration': 3.102}, {'end': 1085.68, 'text': 'We first update the schema and then you add the implementation of how the data is getting fetched.', 'start': 1080.377, 'duration': 5.303}, {'end': 1089.162, 'text': "So here I want to get all the to do's.", 'start': 1086.44, 'duration': 2.722}, {'end': 1093.364, 'text': "So I'm going to call it to do's and it just returns an array of to do's.", 'start': 1089.382, 'duration': 3.982}, {'end': 1096.845, 'text': 'Now to return an array, you do brackets like that.', 'start': 1094.024, 'duration': 2.821}], 'summary': 'Adding to do items to database and fetching them using query.', 'duration': 27.673, 'max_score': 1069.172, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc1069172.jpg'}, {'end': 1219.871, 'src': 'embed', 'start': 1189.843, 'weight': 3, 'content': [{'end': 1191.764, 'text': 'just like that, All right.', 'start': 1189.843, 'duration': 1.921}, {'end': 1193.044, 'text': "so that's perfect.", 'start': 1191.764, 'duration': 1.28}, {'end': 1200.286, 'text': 'We now have two of the CRUD operations done, creating todo items, reading todo items with this query right here.', 'start': 1193.125, 'duration': 7.161}, {'end': 1203.727, 'text': 'The next thing we want to do is updating an item.', 'start': 1201.046, 'duration': 2.681}, {'end': 1209.188, 'text': "So the way we're going to do that is we're going to create a new mutation called update todo.", 'start': 1204.567, 'duration': 4.621}, {'end': 1219.871, 'text': "This will have two arguments, the ID, and this is what we'll use to know what todo to update, and then also complete.", 'start': 1209.208, 'duration': 10.663}], 'summary': 'Two crud operations are done, creating and reading todo items. next step is updating todo items.', 'duration': 30.028, 'max_score': 1189.843, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc1189843.jpg'}, {'end': 1387.803, 'src': 'embed', 'start': 1360.543, 'weight': 5, 'content': [{'end': 1367.265, 'text': "we're going to do remove to do, and here we don't need to know whether it needs to be complete or not.", 'start': 1360.543, 'duration': 6.722}, {'end': 1376.789, 'text': 'so we can just remove that part and have only one argument which id that we need to remove and then boolean true or false whether the operation was successful.', 'start': 1367.265, 'duration': 9.524}, {'end': 1378.329, 'text': 'so we can copy this.', 'start': 1376.789, 'duration': 1.54}, {'end': 1382.334, 'text': "I'm going to do remove to do.", 'start': 1379.95, 'duration': 2.384}, {'end': 1387.803, 'text': "we can get rid of that argument and then here we're going to say find by id.", 'start': 1382.334, 'duration': 5.469}], 'summary': "Proposing to modify 'remove to do' function to simplify and include success status.", 'duration': 27.26, 'max_score': 1360.543, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc1360543.jpg'}], 'start': 708.28, 'title': 'Setting up graphql server and implementing crud operations', 'summary': 'Covers connecting to a mongodb database, starting a graphql server, creating a to-do model, executing mutations, and implementing crud operations including fetching, updating, and removing to-dos, showcasing the functionality of graphql with practical examples.', 'chapters': [{'end': 1069.132, 'start': 708.28, 'title': 'Setting up graphql server and creating a to-do model', 'summary': 'Covers connecting to a mongodb database, starting a graphql server, creating a to-do model with text and complete fields, and executing a mutation to create a to-do, showcasing the functionality of graphql in retrieving specific fields.', 'duration': 360.852, 'highlights': ['Executing a mutation to create a to-do The process of creating a to-do model with text and complete fields, and executing a mutation to create a to-do, showcasing the functionality of GraphQL in retrieving specific fields.', 'Connecting to a MongoDB database and starting a GraphQL server The initial steps involve connecting to a MongoDB database, and then starting a GraphQL server, which runs in the background and uses a callback to wait for the connection to open or get connected.', 'Customizing the to-do model and its fields Customizing the Mongoose model by changing it to a to-do model with text and complete fields, specifying the data types (string and boolean) for the fields, and setting default values for the complete field.']}, {'end': 1434.2, 'start': 1069.172, 'title': 'Implementing crud operations in database', 'summary': 'Covers the implementation of crud operations in a database, including fetching all to-dos, updating to-dos, and removing to-dos, with examples and explanations provided for each operation.', 'duration': 365.028, 'highlights': ['The chapter covers the implementation of CRUD operations in a database, including fetching all to-dos, updating to-dos, and removing to-dos, with examples and explanations provided for each operation.', 'The update to-do operation involves creating a new mutation called update to-do, with two arguments, ID and complete, and returns a boolean indicating whether the update was successful.', 'The remove to-do operation follows a similar pattern to the update to-do operation, removing a to-do based on its ID and returning a boolean to indicate the success of the operation.', 'The fetch to-do operation involves creating a query to get all the to-dos, specifying the attributes to be returned, and then testing the query to see the results.']}], 'duration': 725.92, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc708280.jpg', 'highlights': ['Covers connecting to a MongoDB database and starting a GraphQL server', 'Customizing the to-do model and its fields', 'Executing a mutation to create a to-do', 'The chapter covers the implementation of CRUD operations in a database', 'The update to-do operation involves creating a new mutation called update to-do', 'The remove to-do operation follows a similar pattern to the update to-do operation', 'The fetch to-do operation involves creating a query to get all the to-dos']}, {'end': 1682.593, 'segs': [{'end': 1462.275, 'src': 'embed', 'start': 1434.28, 'weight': 0, 'content': [{'end': 1438.645, 'text': "We have all our CRUD operations that we want to do, and we're done with our server.", 'start': 1434.28, 'duration': 4.365}, {'end': 1445.088, 'text': 'Now really what we want to do is create a client or a web app using React that allows us to do these.', 'start': 1439.406, 'duration': 5.682}, {'end': 1454.611, 'text': 'So we can view our to-dos, we can click on it to cross it out, we can add to-dos, or we can just straight up delete them if we no longer need them.', 'start': 1445.408, 'duration': 9.203}, {'end': 1456.752, 'text': "So let's get into doing that.", 'start': 1455.671, 'duration': 1.081}, {'end': 1462.275, 'text': "So I'm going to keep this server running and open up a new tab.", 'start': 1457.212, 'duration': 5.063}], 'summary': 'Developing a web app using react to perform crud operations on to-dos.', 'duration': 27.995, 'max_score': 1434.28, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc1434280.jpg'}, {'end': 1555.228, 'src': 'heatmap', 'start': 1476.846, 'weight': 0.716, 'content': [{'end': 1481.447, 'text': 'So this is a CLI tool and you can download it using MPM.', 'start': 1476.846, 'duration': 4.601}, {'end': 1486.168, 'text': 'So MPM install dash G create react app.', 'start': 1481.667, 'duration': 4.501}, {'end': 1489.129, 'text': "If you go ahead and run that, that'll download it for you.", 'start': 1486.888, 'duration': 2.241}, {'end': 1493.57, 'text': 'And then what you can do is do create react app and then the name that you want.', 'start': 1489.889, 'duration': 3.681}, {'end': 1495.03, 'text': "So I'm going to call mine client.", 'start': 1493.63, 'duration': 1.4}, {'end': 1503.076, 'text': "Now I've already run this, and when you run this, you're going to get a folder and I can just do LS right here a folder called client,", 'start': 1495.35, 'duration': 7.726}, {'end': 1504.077, 'text': 'or whatever you named it.', 'start': 1503.076, 'duration': 1.001}, {'end': 1506.019, 'text': "And it's going to download this.", 'start': 1504.458, 'duration': 1.561}, {'end': 1510.963, 'text': "This operation also takes a little bit of time because it's going to download all the dependencies and whatnot.", 'start': 1506.099, 'duration': 4.864}, {'end': 1516.708, 'text': 'This is a boilerplate for creating a react applications that just gets you set up really nicely.', 'start': 1511.263, 'duration': 5.445}, {'end': 1521.989, 'text': "So I have it open right here, and we can check out what's going on here.", 'start': 1517.268, 'duration': 4.721}, {'end': 1523.489, 'text': 'We can look at package.json.', 'start': 1522.029, 'duration': 1.46}, {'end': 1528.83, 'text': "We have dependencies react, and we can see we have a couple scripts that we're going to be using.", 'start': 1523.829, 'duration': 5.001}, {'end': 1535.871, 'text': 'So just right off the bat, if we wanted to, I could cd into my folder and run npm start.', 'start': 1529.47, 'duration': 6.401}, {'end': 1541.613, 'text': 'And what that will do is it will run the scripts start command, which runs this thing right here.', 'start': 1536.672, 'duration': 4.941}, {'end': 1543.793, 'text': 'And what that does is it starts my server.', 'start': 1541.813, 'duration': 1.98}, {'end': 1545.778, 'text': 'And this is a different server.', 'start': 1544.477, 'duration': 1.301}, {'end': 1547.56, 'text': 'So this is a development server.', 'start': 1545.898, 'duration': 1.662}, {'end': 1552.585, 'text': 'And this is just going to allow you to see your React application as you develop it.', 'start': 1547.9, 'duration': 4.685}, {'end': 1555.228, 'text': "So here's basically the hello world.", 'start': 1552.725, 'duration': 2.503}], 'summary': 'Cli tool downloads create react app using mpm, sets up react application with dependencies and development server.', 'duration': 78.382, 'max_score': 1476.846, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc1476846.jpg'}, {'end': 1613.257, 'src': 'embed', 'start': 1568.02, 'weight': 1, 'content': [{'end': 1572.803, 'text': "And what's going to happen is it's going to refresh and we see in our browser, welcome to GraphQL.", 'start': 1568.02, 'duration': 4.783}, {'end': 1573.744, 'text': "So it's kind of cool.", 'start': 1573.004, 'duration': 0.74}, {'end': 1577.207, 'text': "So as we do this, it's going to just automatically refresh as we're typing.", 'start': 1573.884, 'duration': 3.323}, {'end': 1581.71, 'text': "So we're ready to start adding some stuff to our application.", 'start': 1577.827, 'duration': 3.883}, {'end': 1585.013, 'text': 'Now, I guess I should go over the structure real quick.', 'start': 1581.75, 'duration': 3.263}, {'end': 1587.715, 'text': 'So the important parts are the source.', 'start': 1585.193, 'duration': 2.522}, {'end': 1591.558, 'text': 'This is where all our JavaScript code is going and where all the react.', 'start': 1587.835, 'duration': 3.723}, {'end': 1597.263, 'text': "There's a folder called public which you can see has HTML in it,", 'start': 1592.259, 'duration': 5.004}, {'end': 1605.05, 'text': 'and this HTML file is what our JavaScript or react application runs in or it gets run applied to, if you will.', 'start': 1597.263, 'duration': 7.787}, {'end': 1607.192, 'text': 'so here we can see this div root.', 'start': 1605.05, 'duration': 2.142}, {'end': 1613.257, 'text': 'this is where our entire react application is going to be put, so in index.js.', 'start': 1607.192, 'duration': 6.065}], 'summary': 'Introduction to graphql in a web application, covering code structure and file locations.', 'duration': 45.237, 'max_score': 1568.02, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc1568020.jpg'}], 'start': 1434.28, 'title': 'Creating react app for crud operations', 'summary': 'Involves setting up a react application using create react app to enable crud operations, including viewing, adding, and deleting to-dos, and exploring the structure and functionality of a react application.', 'chapters': [{'end': 1682.593, 'start': 1434.28, 'title': 'Creating react app for crud operations', 'summary': 'Involves setting up a react application using create react app to enable crud operations, including viewing, adding, and deleting to-dos, and exploring the structure and functionality of a react application.', 'duration': 248.313, 'highlights': ['Setting up a React application using create react app enables CRUD operations such as viewing, adding, and deleting to-dos. The speaker discusses the process of creating a React application using create react app, which allows for CRUD operations like viewing, adding, and deleting to-dos.', 'Exploring the structure and functionality of a React application, including the source and public folders and JSX syntax for mixing JavaScript with HTML. The structure and functionality of a React application are explored, covering the source and public folders, rendering elements using JSX syntax, and eliminating unnecessary files.', 'Demonstrating the automatic refresh feature during development and making changes to the React application. The automatic refresh feature during development is demonstrated, allowing for real-time updates when making changes to the React application.']}], 'duration': 248.313, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc1434280.jpg', 'highlights': ['Setting up a React application using create react app enables CRUD operations such as viewing, adding, and deleting to-dos.', 'Exploring the structure and functionality of a React application, including the source and public folders and JSX syntax for mixing JavaScript with HTML.', 'Demonstrating the automatic refresh feature during development and making changes to the React application.']}, {'end': 2090.744, 'segs': [{'end': 1726.351, 'src': 'embed', 'start': 1682.973, 'weight': 1, 'content': [{'end': 1684.435, 'text': 'And we can start adding our code.', 'start': 1682.973, 'duration': 1.462}, {'end': 1690.2, 'text': 'So what we want to do is to run the same queries and whatnot that we ran in GraphQL Playground.', 'start': 1684.835, 'duration': 5.365}, {'end': 1695.041, 'text': 'So for example, I would like to render these to-dos in my React application.', 'start': 1690.66, 'duration': 4.381}, {'end': 1697.281, 'text': 'And to do that, I want to run this query.', 'start': 1695.481, 'duration': 1.8}, {'end': 1703.882, 'text': "And to run GraphQL queries from React into a server, we're going to be using something called Apollo.", 'start': 1697.841, 'duration': 6.041}, {'end': 1707.103, 'text': 'So Apollo GraphQL allows us to do this.', 'start': 1704.162, 'duration': 2.941}, {'end': 1708.943, 'text': "It's very easy to get started.", 'start': 1707.443, 'duration': 1.5}, {'end': 1712.284, 'text': "We're going to be downloading a few things here to help us out.", 'start': 1709.283, 'duration': 3.001}, {'end': 1719.425, 'text': 'So Apollo Boost, which is a library they created, React Apollo, GraphQL Tag, and GraphQL.', 'start': 1712.604, 'duration': 6.821}, {'end': 1726.351, 'text': "Here's some little descriptions about what each one does, but basically GraphQL and GraphQL tag are for parsing the query.", 'start': 1720.245, 'duration': 6.106}], 'summary': 'Using apollo to run graphql queries in react for rendering to-dos.', 'duration': 43.378, 'max_score': 1682.973, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc1682973.jpg'}, {'end': 1803.726, 'src': 'embed', 'start': 1773.177, 'weight': 0, 'content': [{'end': 1777.402, 'text': 'So Apollo provider, and this is just going to wrap our whole application.', 'start': 1773.177, 'duration': 4.225}, {'end': 1780.166, 'text': 'And we need to pass in our client.', 'start': 1778.724, 'duration': 1.442}, {'end': 1783.902, 'text': 'So our client is this thing right here that we create.', 'start': 1781.181, 'duration': 2.721}, {'end': 1787.702, 'text': "And basically the only thing we're specifying here is the URL to our server.", 'start': 1784.002, 'duration': 3.7}, {'end': 1790.623, 'text': 'So our server is not running at this location.', 'start': 1788.102, 'duration': 2.521}, {'end': 1797.124, 'text': "It's running at HTTP slash local host 4000.", 'start': 1790.903, 'duration': 6.221}, {'end': 1798.925, 'text': 'So it knows where to make requests.', 'start': 1797.124, 'duration': 1.801}, {'end': 1803.726, 'text': "So it's now going to send GraphQL requests all to the server, which is perfect.", 'start': 1799.325, 'duration': 4.401}], 'summary': 'Apollo provider wraps the application, specifying the server url as localhost:4000 for sending graphql requests.', 'duration': 30.549, 'max_score': 1773.177, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc1773177.jpg'}, {'end': 1866.948, 'src': 'heatmap', 'start': 1825.855, 'weight': 0.737, 'content': [{'end': 1834.121, 'text': "So I'm going to do NPM start and we should still see just the word hello and nothing different because this doesn't actually do anything yet.", 'start': 1825.855, 'duration': 8.266}, {'end': 1835.762, 'text': "We didn't tell it what to query.", 'start': 1834.241, 'duration': 1.521}, {'end': 1839.285, 'text': 'All we said was this is where we want you to make queries.', 'start': 1836.102, 'duration': 3.183}, {'end': 1844.388, 'text': 'I added this client equal new Apollo client before these import statements.', 'start': 1839.985, 'duration': 4.403}, {'end': 1846.59, 'text': 'You need to make sure that comes afterwards.', 'start': 1844.929, 'duration': 1.661}, {'end': 1847.631, 'text': 'So just like that.', 'start': 1846.99, 'duration': 0.641}, {'end': 1849.252, 'text': 'and cool.', 'start': 1848.411, 'duration': 0.841}, {'end': 1851.654, 'text': 'so refreshes and hello is there.', 'start': 1849.252, 'duration': 2.402}, {'end': 1854.617, 'text': 'nice, now we can start doing some stuff.', 'start': 1851.654, 'duration': 2.963}, {'end': 1857.679, 'text': "so in app.js, why don't we run a query?", 'start': 1854.617, 'duration': 3.062}, {'end': 1861.623, 'text': 'and the query that i want to run is that same one we have here in our playground.', 'start': 1857.679, 'duration': 3.944}, {'end': 1866.948, 'text': 'so what i usually like to do is run it here and then just copy it so const.', 'start': 1861.623, 'duration': 5.325}], 'summary': "Npm start shows 'hello', added apollo client, ran a query in app.js.", 'duration': 41.093, 'max_score': 1825.855, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc1825855.jpg'}, {'end': 1983.452, 'src': 'heatmap', 'start': 1870.711, 'weight': 3, 'content': [{'end': 1873.532, 'text': 'so this is just a string of the query.', 'start': 1870.711, 'duration': 2.821}, {'end': 1875.914, 'text': 'now we added a library to help us parse.', 'start': 1873.532, 'duration': 2.382}, {'end': 1877.575, 'text': 'this called GraphQL tag.', 'start': 1875.914, 'duration': 1.661}, {'end': 1887.521, 'text': "so we're going to import GQL from GraphQL tag and this is actually going to parse this query right here and the way we do that is GQL right there.", 'start': 1877.575, 'duration': 9.946}, {'end': 1894.664, 'text': 'Now you may be thinking I might have mistyped this and I meant to do something like this in the pass in the function, and that is not the case.', 'start': 1888.021, 'duration': 6.643}, {'end': 1898.385, 'text': 'You actually call it just like this where GQL is right up against it.', 'start': 1894.784, 'duration': 3.601}, {'end': 1904.527, 'text': 'This is a string template calling and it will pass to this function okay and it will parse this out.', 'start': 1898.885, 'duration': 5.642}, {'end': 1911.55, 'text': 'Next thing is we need to basically bind it with our component and the way we do that is with a higher order component.', 'start': 1904.947, 'duration': 6.603}, {'end': 1916.032, 'text': 'So import GraphQL from React Apollo.', 'start': 1912.09, 'duration': 3.942}, {'end': 1919.493, 'text': 'And this is coming from the React Apollo package.', 'start': 1917.012, 'duration': 2.481}, {'end': 1921.213, 'text': 'So we say GraphQL.', 'start': 1919.773, 'duration': 1.44}, {'end': 1924.914, 'text': 'We specify what query we want or what mutation we want.', 'start': 1921.333, 'duration': 3.581}, {'end': 1927.015, 'text': 'In this case, I want the to-dos query.', 'start': 1924.994, 'duration': 2.021}, {'end': 1929.356, 'text': 'And we wrap our app.', 'start': 1928.095, 'duration': 1.261}, {'end': 1933.857, 'text': "And now injected into the app's props are some stuff.", 'start': 1930.236, 'duration': 3.621}, {'end': 1938.498, 'text': 'So now when I say this.props, I have a few things.', 'start': 1934.437, 'duration': 4.061}, {'end': 1940.899, 'text': 'I have data and loading.', 'start': 1938.758, 'duration': 2.141}, {'end': 1943.96, 'text': "So loading, and why don't we actually.", 'start': 1941.339, 'duration': 2.621}, {'end': 1950.562, 'text': "I'm just going to console.log this so we can take a look at what actually the values are.", 'start': 1944.679, 'duration': 5.883}, {'end': 1957.146, 'text': 'And if we come over here, if you just right click and inspect, you can see in the console what these are.', 'start': 1951.323, 'duration': 5.823}, {'end': 1960.047, 'text': "So let's do a before and after.", 'start': 1957.766, 'duration': 2.281}, {'end': 1964.37, 'text': 'So this is export default app.', 'start': 1960.668, 'duration': 3.702}, {'end': 1972.114, 'text': "So before we actually call this higher order component GraphQL, you'll notice here are the props, just an empty object.", 'start': 1965.67, 'duration': 6.444}, {'end': 1978.522, 'text': 'But now when we add this thing back, we have some stuff in our props that are going to help us out.', 'start': 1973.168, 'duration': 5.354}, {'end': 1981.41, 'text': "So first, you'll notice we have dot data.", 'start': 1979.409, 'duration': 2.001}, {'end': 1983.452, 'text': 'And inside of data, there is loading.', 'start': 1981.671, 'duration': 1.781}], 'summary': 'Using graphql tag to parse query, binding with higher order component, and accessing data and loading values in react apollo.', 'duration': 79.851, 'max_score': 1870.711, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc1870711.jpg'}, {'end': 2061.641, 'src': 'heatmap', 'start': 2021.715, 'weight': 1, 'content': [{'end': 2025.377, 'text': "And I'm saying if it's loading, just return null.", 'start': 2021.715, 'duration': 3.662}, {'end': 2030.239, 'text': "And if it's not, what I want to do is just to dos dot map.", 'start': 2025.957, 'duration': 4.282}, {'end': 2032.64, 'text': 'And for each to do, I want to just render it.', 'start': 2030.559, 'duration': 2.081}, {'end': 2040.522, 'text': "So I'm going to render a div and I'm just going to display the to do dot text and we can come back over here.", 'start': 2034.056, 'duration': 6.466}, {'end': 2043.325, 'text': "Going to load for a second and we're going to see all our items.", 'start': 2040.542, 'duration': 2.783}, {'end': 2053.534, 'text': 'Now we need to add a key and the reason for this is we need to have every single one be unique and this helps for loading purposes with react.', 'start': 2043.705, 'duration': 9.829}, {'end': 2056.996, 'text': "It'll load faster and have less conflicts in your list.", 'start': 2053.954, 'duration': 3.042}, {'end': 2061.641, 'text': "So I'm going to say pass in the to do to ID to make this unique.", 'start': 2057.277, 'duration': 4.364}], 'summary': 'In the code, rendering to do items with unique ids for faster loading in react.', 'duration': 39.926, 'max_score': 2021.715, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc2021715.jpg'}], 'start': 1682.973, 'title': 'Using apollo and graphql in react', 'summary': 'Discusses using apollo to run graphql queries in a react application, enabling sending graphql requests to the server running at http://localhost:4000. it also covers using graphql tag to parse queries, binding components with higher order component graphql from react apollo, accessing data and loading status through props, and rendering fetched data in a react app.', 'chapters': [{'end': 1870.711, 'start': 1682.973, 'title': 'Using apollo to run graphql queries in react', 'summary': 'Discusses using apollo to run graphql queries in a react application, including downloading necessary libraries and creating an apollo client, to enable sending graphql requests to the server running at http://localhost:4000.', 'duration': 187.738, 'highlights': ['Creating an Apollo client by specifying the URL to the server running at HTTP://localhost:4000 allows making GraphQL requests throughout the React application.', 'The chapter explains the process of downloading necessary libraries such as Apollo Boost, React Apollo, GraphQL Tag, and GraphQL for parsing the query and setting up and making the queries.', 'Using Apollo to run GraphQL queries in a React application is discussed, including running the same queries as in GraphQL Playground and rendering to-dos in the React application.']}, {'end': 2090.744, 'start': 1870.711, 'title': 'Using graphql and react apollo', 'summary': 'Discusses using graphql tag to parse queries, binding components with higher order component graphql from react apollo, accessing data and loading status through props, and rendering fetched data in a react app.', 'duration': 220.033, 'highlights': ['Using GraphQL tag to parse queries The chapter explains the process of using GraphQL tag to parse queries and import GQL from GraphQL tag for parsing.', 'Binding components with higher order component GraphQL It discusses the process of binding components using the higher order component GraphQL from React Apollo, specifying the query or mutation, and wrapping the app to inject props.', 'Accessing data and loading status through props It describes the access of data and loading status through props, with an example of using this.props to access data and loading status, and the usage of console.log to view the values.', 'Rendering fetched data in a React app It covers the process of rendering fetched data in a React app, including the use of destructuring to access loading and to-dos, conditional rendering based on loading status, mapping through to-dos, and adding unique keys for optimization.']}], 'duration': 407.771, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc1682973.jpg', 'highlights': ['Creating an Apollo client by specifying the URL to the server running at HTTP://localhost:4000 allows making GraphQL requests throughout the React application.', 'Using Apollo to run GraphQL queries in a React application is discussed, including running the same queries as in GraphQL Playground and rendering to-dos in the React application.', 'The chapter explains the process of downloading necessary libraries such as Apollo Boost, React Apollo, GraphQL Tag, and GraphQL for parsing the query and setting up and making the queries.', 'Using GraphQL tag to parse queries The chapter explains the process of using GraphQL tag to parse queries and import GQL from GraphQL tag for parsing.', 'Binding components with higher order component GraphQL It discusses the process of binding components using the higher order component GraphQL from React Apollo, specifying the query or mutation, and wrapping the app to inject props.', 'Accessing data and loading status through props It describes the access of data and loading status through props, with an example of using this.props to access data and loading status, and the usage of console.log to view the values.', 'Rendering fetched data in a React app It covers the process of rendering fetched data in a React app, including the use of destructuring to access loading and to-dos, conditional rendering based on loading status, mapping through to-dos, and adding unique keys for optimization.']}, {'end': 2886.439, 'segs': [{'end': 2119.097, 'src': 'embed', 'start': 2091.745, 'weight': 0, 'content': [{'end': 2096.768, 'text': "So this is a little teaser, a little intro into Apollo and how we're going to do our queries.", 'start': 2091.745, 'duration': 5.023}, {'end': 2102.592, 'text': 'But now what I want to do is add some material UI to make this look pretty.', 'start': 2097.509, 'duration': 5.083}, {'end': 2106.175, 'text': "And then we're going to continue on with some more mutations and whatnot.", 'start': 2103.053, 'duration': 3.122}, {'end': 2109.133, 'text': "So we're going to be adding this package.", 'start': 2106.972, 'duration': 2.161}, {'end': 2115.855, 'text': "This is material UI from Google and it just makes everything look really nice and it's a nice utility.", 'start': 2109.613, 'duration': 6.242}, {'end': 2119.097, 'text': "So we're going to install go through the installation.", 'start': 2116.776, 'duration': 2.321}], 'summary': 'Introducing apollo for queries and adding material ui for a better look.', 'duration': 27.352, 'max_score': 2091.745, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc2091745.jpg'}, {'end': 2379.177, 'src': 'heatmap', 'start': 2290.469, 'weight': 0.764, 'content': [{'end': 2299.374, 'text': "So the first three imports we don't need, but I do need list all this list associated things and I do want the icons.", 'start': 2290.469, 'duration': 8.905}, {'end': 2304.057, 'text': 'So I want to copy those and just move them to the top where my other imports are.', 'start': 2300.175, 'duration': 3.882}, {'end': 2307.819, 'text': 'And then I basically just want to merge these two.', 'start': 2304.898, 'duration': 2.921}, {'end': 2310.361, 'text': "I don't care about the style.", 'start': 2307.839, 'duration': 2.522}, {'end': 2311.642, 'text': "We're going to add our own style.", 'start': 2310.421, 'duration': 1.221}, {'end': 2317.88, 'text': 'So where he was adding styles here, I just want to move their outer div.', 'start': 2313.037, 'duration': 4.843}, {'end': 2321.201, 'text': "And I'm going to replace it with my stuff.", 'start': 2318.88, 'duration': 2.321}, {'end': 2324.543, 'text': 'So this is what we added.', 'start': 2322.162, 'duration': 2.381}, {'end': 2328.165, 'text': 'And I want to just add the stuff in there.', 'start': 2325.163, 'duration': 3.002}, {'end': 2331.186, 'text': "I guess the best way is we're going to copy these two.", 'start': 2328.665, 'duration': 2.521}, {'end': 2335.428, 'text': "And we're just going to go through what this code does in just one second.", 'start': 2332.187, 'duration': 3.241}, {'end': 2338.27, 'text': 'I first want to make sure it renders okay.', 'start': 2336.249, 'duration': 2.021}, {'end': 2340.934, 'text': "So we're going to add these two.", 'start': 2339.713, 'duration': 1.221}, {'end': 2343.075, 'text': 'State is kind of interesting.', 'start': 2341.554, 'duration': 1.521}, {'end': 2345.116, 'text': 'And this is just another function.', 'start': 2343.475, 'duration': 1.641}, {'end': 2346.957, 'text': "We'll talk about state in a second.", 'start': 2345.456, 'duration': 1.501}, {'end': 2348.978, 'text': "We don't care about the props.", 'start': 2347.578, 'duration': 1.4}, {'end': 2350.639, 'text': 'This is our list.', 'start': 2349.719, 'duration': 0.92}, {'end': 2353.601, 'text': "And we don't care about these things either.", 'start': 2351.94, 'duration': 1.661}, {'end': 2358.384, 'text': "Okay So we're going to take our list and plop it down here.", 'start': 2354.462, 'duration': 3.922}, {'end': 2361.326, 'text': 'And there.', 'start': 2360.645, 'duration': 0.681}, {'end': 2365.99, 'text': "going over their mapping and they're doing this thing right.", 'start': 2362.168, 'duration': 3.822}, {'end': 2369.152, 'text': "so that's the exact same thing we did here.", 'start': 2365.99, 'duration': 3.162}, {'end': 2379.177, 'text': "so we want to just replace that map with todos and instead of value, this is going to be todo, and here's our key.", 'start': 2369.152, 'duration': 10.025}], 'summary': 'Merging and modifying code, adding list items and styles.', 'duration': 88.708, 'max_score': 2290.469, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc2290469.jpg'}, {'end': 2499.281, 'src': 'embed', 'start': 2473.432, 'weight': 1, 'content': [{'end': 2480.153, 'text': "Now we don't really need state so I'm going to go ahead and get rid of it because we're storing everything and the MongoDB is our state if you will.", 'start': 2473.432, 'duration': 6.721}, {'end': 2482.363, 'text': "and we're fetching everything with GraphQL.", 'start': 2480.635, 'duration': 1.728}, {'end': 2487.613, 'text': 'This handle toggle thing, this I believe is okay.', 'start': 2483.41, 'duration': 4.203}, {'end': 2494.638, 'text': 'Yes. So when we click on a list item for us, what we want to do is actually just mark it off right?', 'start': 2487.653, 'duration': 6.985}, {'end': 2499.281, 'text': "When I click on this, it should be oops, we crashed it because we're not supposed to click on things.", 'start': 2494.678, 'duration': 4.603}], 'summary': 'Using mongodb to store state and fetching with graphql, working on list item functionality.', 'duration': 25.849, 'max_score': 2473.432, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc2473432.jpg'}, {'end': 2669.862, 'src': 'embed', 'start': 2642.426, 'weight': 2, 'content': [{'end': 2647.989, 'text': "So to add this, we're going to scroll up to the top, and instead of a comment icon, I'm going to say close icon.", 'start': 2642.426, 'duration': 5.563}, {'end': 2651.851, 'text': "And I'm just going to replace comment with close.", 'start': 2648.79, 'duration': 3.061}, {'end': 2654.173, 'text': "And we'll see if that works.", 'start': 2652.752, 'duration': 1.421}, {'end': 2656.274, 'text': 'Close icon.', 'start': 2655.193, 'duration': 1.081}, {'end': 2662.217, 'text': 'Refresh And sure enough, the icon shows up as an X.', 'start': 2657.074, 'duration': 5.143}, {'end': 2664.979, 'text': 'Perfect So now I just want to hook this up.', 'start': 2662.217, 'duration': 2.762}, {'end': 2669.862, 'text': 'So this icon button should have an on click.', 'start': 2666.34, 'duration': 3.522}], 'summary': 'Replacing comment icon with close icon, successful x display.', 'duration': 27.436, 'max_score': 2642.426, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc2642426.jpg'}], 'start': 2091.745, 'title': 'Enhancing apollo queries with material ui', 'summary': 'Covers adding material ui to improve the appearance of apollo queries and mutations, including steps for installation, customization, updating a to-do list with mongodb, handling toggles and checkboxes, and replacing icons with graphql mutations.', 'chapters': [{'end': 2369.152, 'start': 2091.745, 'title': 'Adding material ui to apollo queries', 'summary': 'Introduces the process of adding material ui to enhance the appearance of apollo queries and mutations, including installing the material ui package, importing fonts and svg icons, rendering a paper component, and customizing a list to resemble to-do items.', 'duration': 277.407, 'highlights': ['The chapter introduces the process of adding Material UI to enhance the appearance of Apollo queries and mutations, including installing the Material UI package, importing fonts and SVG icons, rendering a paper component, and customizing a list to resemble to-do items.', 'Material UI from Google is added to make the UI look visually appealing and is described as a nice utility.', 'The installation process involves importing the Roboto font and adding SVG icons to enhance the appearance.', 'Rendering a paper component is performed to create a platform for displaying a list, and it is centered using styling properties like display flex, margin auto, and a width of 400.', 'The list is customized to resemble to-do items, and the process includes merging imports, replacing styles, and utilizing state and mapping to achieve the desired appearance.']}, {'end': 2594.104, 'start': 2369.152, 'title': 'Updating to-do list and handling toggles', 'summary': 'Discusses updating a to-do list with mongodb, handling toggles for to-do items, and explaining the use of checkboxes and state in the application.', 'duration': 224.952, 'highlights': ['The chapter discusses updating a to-do list with MongoDB The speaker explains the process of updating a to-do list using MongoDB as the state and fetching data with GraphQL.', 'Handling toggles for to-do items The speaker demonstrates the process of handling toggles for to-do items, marking them as complete or incomplete, and updating the database accordingly.', 'Explaining the use of checkboxes and state in the application The speaker explains the use of checkboxes with values representing the completion status of to-do items and the role of state in storing application data that could change.']}, {'end': 2886.439, 'start': 2594.765, 'title': 'Updating and removing icons in material ui', 'summary': 'Discusses replacing a comment icon with a close icon, setting up on click functionality for the icon, and explaining how to update and remove items using graphql mutations in material ui.', 'duration': 291.674, 'highlights': ['The chapter discusses replacing a comment icon with a close icon, setting up on click functionality for the icon, and explaining how to update and remove items using GraphQL mutations in Material UI.', 'The speaker demonstrates the process of selecting and adding the close icon from the Material UI website, which is located under navigation.', 'The speaker explains the process of setting up on click functionality for the close icon, including creating functions for updating and removing to-do items using GraphQL mutations.', 'The speaker provides a detailed explanation of how to update and remove items using GraphQL mutations, including defining variables, injecting the app with the mutation, and using the compose function to wrap the app.']}], 'duration': 794.694, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc2091745.jpg', 'highlights': ['The chapter introduces the process of adding Material UI to enhance the appearance of Apollo queries and mutations, including installing the Material UI package, importing fonts and SVG icons, rendering a paper component, and customizing a list to resemble to-do items.', 'The chapter discusses updating a to-do list with MongoDB, explaining the process of updating a to-do list using MongoDB as the state and fetching data with GraphQL.', 'The chapter discusses replacing a comment icon with a close icon, setting up on click functionality for the icon, and explaining how to update and remove items using GraphQL mutations in Material UI.']}, {'end': 3285.392, 'segs': [{'end': 2944.905, 'src': 'embed', 'start': 2887.259, 'weight': 0, 'content': [{'end': 2895.046, 'text': "All right, so now what we can do is we've added a new thing to our props, and we can give it a name.", 'start': 2887.259, 'duration': 7.787}, {'end': 2898.289, 'text': "I'm going to call it updateToDo.", 'start': 2895.066, 'duration': 3.223}, {'end': 2906.418, 'text': 'So now in my update to do function, I can say this dot props dot update to do.', 'start': 2900.293, 'duration': 6.125}, {'end': 2912.982, 'text': 'And this function is available in my props because I specified it here and the name I specified matches.', 'start': 2907.238, 'duration': 5.744}, {'end': 2917.946, 'text': 'All right, so what I need to do to pass to this is those variables.', 'start': 2913.002, 'duration': 4.944}, {'end': 2923.17, 'text': "And this is a asynchronous function, so I'm going to await it.", 'start': 2918.887, 'duration': 4.283}, {'end': 2928.381, 'text': 'And the variables that I need to pass in are an ID and complete.', 'start': 2925.24, 'duration': 3.141}, {'end': 2933.042, 'text': "So the ID, I'm going to say to do that ID and then complete.", 'start': 2929.201, 'duration': 3.841}, {'end': 2934.742, 'text': "I'm going to do the opposite.", 'start': 2933.582, 'duration': 1.16}, {'end': 2937.083, 'text': 'So to do dot complete.', 'start': 2935.743, 'duration': 1.34}, {'end': 2941.384, 'text': "So I'm going to do the opposite of the current value of complete.", 'start': 2938.323, 'duration': 3.061}, {'end': 2944.905, 'text': 'So if it is complete right now, I uncomplete it.', 'start': 2941.944, 'duration': 2.961}], 'summary': 'Added updatetodo function to props, async with id and complete variables', 'duration': 57.646, 'max_score': 2887.259, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc2887259.jpg'}, {'end': 3025.292, 'src': 'embed', 'start': 2970.519, 'weight': 2, 'content': [{'end': 2975.161, 'text': 'And if I click those two, refresh, I see those items changed.', 'start': 2970.519, 'duration': 4.642}, {'end': 2978.543, 'text': "So why didn't update right away, right?", 'start': 2975.481, 'duration': 3.062}, {'end': 2981.744, 'text': 'Why did we have to refresh the page for this to happen??', 'start': 2978.623, 'duration': 3.121}, {'end': 2992.088, 'text': 'well, apollo caches all your stuff by default, which is really nice because it saves you requests and basically optimizes things,', 'start': 2982.364, 'duration': 9.724}, {'end': 2996.43, 'text': "but it doesn't refetch the data whenever we update it.", 'start': 2992.088, 'duration': 4.342}, {'end': 2999.752, 'text': 'so what we need to do is we need to tell apollo to update.', 'start': 2996.43, 'duration': 3.322}, {'end': 3011.077, 'text': 'so there is something called update, that we can pass our mutation or our function that looks like this, and this allows us to update the cache.', 'start': 2999.752, 'duration': 11.325}, {'end': 3014.767, 'text': "So let's copy this in.", 'start': 3012.606, 'duration': 2.161}, {'end': 3021.39, 'text': 'And how this works is the store is where the cache, so you can think of this as the Apollo cache.', 'start': 3015.867, 'duration': 5.523}, {'end': 3025.292, 'text': 'And then right here, this is us getting the data.', 'start': 3022.25, 'duration': 3.042}], 'summary': 'Apollo caches data by default, requiring manual updates for changes to take effect.', 'duration': 54.773, 'max_score': 2970.519, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc2970519.jpg'}], 'start': 2887.259, 'title': 'React props and apollo cache', 'summary': "Discusses adding an 'updatetodo' function to props for asynchronous updating of to-do items, and managing apollo for real-time cache updates, enabling seamless item updates and persistence while addressing page refresh necessity.", 'chapters': [{'end': 2944.905, 'start': 2887.259, 'title': 'React props and asynchronous function', 'summary': "Discusses adding a new function 'updatetodo' to the props, using it in an asynchronous function to update a to-do item by toggling its completion status, and passing the id and completion status as variables.", 'duration': 57.646, 'highlights': ["The function 'updateToDo' is added to the props, allowing it to be accessed in the component's functions.", 'An asynchronous function is used to update a to-do item by toggling its completion status, requiring the ID and completion status as variables.']}, {'end': 3285.392, 'start': 2945.445, 'title': 'Managing apollo cache in real time', 'summary': 'Discusses using apollo to manage cache updates in real-time, demonstrating how to update and delete items in a to-do list, enabling real-time updating and persistence of the items while explaining the necessity of refreshing the page for changes to take effect.', 'duration': 339.947, 'highlights': ['Explaining the necessity of refreshing the page for changes to take effect The chapter discusses the need to refresh the page for changes to take effect when using Apollo to manage cache updates in real-time.', 'Demonstrating how to update and delete items in a to-do list The transcript provides a detailed demonstration of updating and deleting items in a to-do list using Apollo, showcasing the process of updating the cache and removing items from the list.', 'Enabling real-time updating and persistence of the items The chapter explains how Apollo enables real-time updating and persistence of items in the to-do list, showcasing the feature of real-time updates and the persistence of the items even after refreshing the page.']}], 'duration': 398.133, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc2887259.jpg', 'highlights': ["The function 'updateToDo' is added to the props, allowing it to be accessed in the component's functions.", 'An asynchronous function is used to update a to-do item by toggling its completion status, requiring the ID and completion status as variables.', 'The chapter explains how Apollo enables real-time updating and persistence of items in the to-do list, showcasing the feature of real-time updates and the persistence of the items even after refreshing the page.', 'Demonstrating how to update and delete items in a to-do list The transcript provides a detailed demonstration of updating and deleting items in a to-do list using Apollo, showcasing the process of updating the cache and removing items from the list.', 'Explaining the necessity of refreshing the page for changes to take effect The chapter discusses the need to refresh the page for changes to take effect when using Apollo to manage cache updates in real-time.']}, {'end': 3886.748, 'segs': [{'end': 3314.23, 'src': 'embed', 'start': 3286.218, 'weight': 0, 'content': [{'end': 3293.061, 'text': 'Another important thing I did not mention about this update function is you want to make sure to, when updating this,', 'start': 3286.218, 'duration': 6.843}, {'end': 3296.502, 'text': 'not mutate and create a new instance of it?', 'start': 3293.061, 'duration': 3.441}, {'end': 3300.163, 'text': 'So with filter, we create a new instance of that array.', 'start': 3296.642, 'duration': 3.521}, {'end': 3302.044, 'text': "So let's see this.", 'start': 3301.024, 'duration': 1.02}, {'end': 3306.846, 'text': 'And oh, we can just make this an async function.', 'start': 3303.124, 'duration': 3.722}, {'end': 3311.288, 'text': 'just like we did update.', 'start': 3309.847, 'duration': 1.441}, {'end': 3314.23, 'text': "And let's go ahead and delete this.", 'start': 3312.148, 'duration': 2.082}], 'summary': 'Discussing the importance of not mutating and creating a new instance when updating, and converting a function to async.', 'duration': 28.012, 'max_score': 3286.218, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc3286218.jpg'}, {'end': 3505.185, 'src': 'embed', 'start': 3472.859, 'weight': 2, 'content': [{'end': 3477.423, 'text': 'So I talked about earlier that we wanted to manage stuff in our state and data that changes.', 'start': 3472.859, 'duration': 4.564}, {'end': 3480.105, 'text': 'So this is going to be text that changes.', 'start': 3478.123, 'duration': 1.982}, {'end': 3482.767, 'text': 'At first, it is just an empty string.', 'start': 3480.285, 'duration': 2.482}, {'end': 3488.292, 'text': "And I can get that text from this.state, and I'm going to pass that value in.", 'start': 3482.887, 'duration': 5.405}, {'end': 3491.214, 'text': 'So the value of the text field is equal to this text.', 'start': 3488.352, 'duration': 2.862}, {'end': 3495.579, 'text': 'Whenever someone types, onChange is called.', 'start': 3492.777, 'duration': 2.802}, {'end': 3497.82, 'text': "So there's an event called onChange.", 'start': 3495.719, 'duration': 2.101}, {'end': 3505.185, 'text': "And when this is called, and I'm going to call this handleOnChange, or we can just call it handleChange.", 'start': 3498.321, 'duration': 6.864}], 'summary': 'Managing changing text data in state using onchange event.', 'duration': 32.326, 'max_score': 3472.859, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc3472859.jpg'}, {'end': 3871.718, 'src': 'embed', 'start': 3845.462, 'weight': 1, 'content': [{'end': 3851.628, 'text': 'we did all the operations creating, reading, updating and deleting to do items.', 'start': 3845.462, 'duration': 6.166}, {'end': 3858.274, 'text': 'i hope that was helpful and you got a good grasp of how to do this and a little taste of how graphql and react works.', 'start': 3851.628, 'duration': 6.646}, {'end': 3861.818, 'text': 'if you have any questions, please leave a comment below.', 'start': 3858.274, 'duration': 3.544}, {'end': 3863.9, 'text': "i'd be happy to answer again.", 'start': 3861.818, 'duration': 2.082}, {'end': 3868.144, 'text': 'thanks for watching guys and leave any questions you have in the comments below.', 'start': 3863.9, 'duration': 4.244}, {'end': 3871.718, 'text': 'I hope you have enjoyed listening to this video.', 'start': 3869.597, 'duration': 2.121}], 'summary': 'Covered crud operations for to-do items using graphql and react.', 'duration': 26.256, 'max_score': 3845.462, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc3845462.jpg'}], 'start': 3286.218, 'title': 'Array and form operations in react', 'summary': 'Covers the importance of non-mutating array updates, demonstrates proper array deletion, and plans to integrate a to-do input field. it also explores creating a form component in react, managing state, handling events, and integrating graphql for to-do operations.', 'chapters': [{'end': 3337.063, 'start': 3286.218, 'title': 'Array update and delete operations', 'summary': 'Demonstrates the importance of not mutating the array when updating, shows the proper functioning of the delete function, and mentions the plan to create a to-do input field.', 'duration': 50.845, 'highlights': ['The delete function is demonstrated to be working properly, as seen when the items are removed and the page is refreshed.', 'The importance of not mutating the array when updating is emphasized to ensure the proper functioning of the update function.', 'The plan to create a to-do input field at the top is mentioned as the next step in the process.']}, {'end': 3886.748, 'start': 3337.623, 'title': 'Creating form component in react', 'summary': 'Covers creating a form component in react, managing state using onchange event, handling key down event to submit form, using graphql to create, read, update, and delete to-do items, and the integration of graphql and react.', 'duration': 549.125, 'highlights': ['Creating a form component in React and managing state using onChange event Explains the process of creating a form component in React, including managing state using onChange event to update the text field value as the user types.', 'Handling key down event to submit the form Describes the process of handling the key down event to submit the form when the user presses the enter key, and passing the text value to the parent component using props.', 'Using GraphQL to create, read, update, and delete to-do items Demonstrates the usage of GraphQL to perform operations like creating, reading, updating, and deleting to-do items, and integrating GraphQL with React to manage the to-do list.']}], 'duration': 600.53, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rpJO0T08Bnc/pics/rpJO0T08Bnc3286218.jpg', 'highlights': ['The importance of not mutating the array when updating is emphasized to ensure the proper functioning of the update function.', 'Using GraphQL to create, read, update, and delete to-do items Demonstrates the usage of GraphQL to perform operations like creating, reading, updating, and deleting to-do items, and integrating GraphQL with React to manage the to-do list.', 'Creating a form component in React and managing state using onChange event Explains the process of creating a form component in React, including managing state using onChange event to update the text field value as the user types.']}], 'highlights': ['The MERN stack replaces Angular with React and incorporates GraphQL for querying fields and data transfer, a technology from Facebook.', 'React.js is chosen for the front end due to its popularity and its use by Facebook, offering productivity and high-quality web application development.', 'The chapter emphasizes MongoDB as a solid NoSQL database for easy storage of different data types and schema changes.', 'The tutorial focuses on building a to-do list app using the MERN stack.', 'Prerequisites include having an editor, a terminal, and installing MongoDB using Homebrew.', 'Installed MongoDB and verified the installation by checking the version and connection status.', 'Installed Node.js using Homebrew and verified the installation along with npm.', 'Initiated a new project directory and created a package.json file using npm init.', 'Installed GraphQL yoga for setting up a GraphQL server and pasted a quick start code into index.js.', 'Covers connecting to a MongoDB database and starting a GraphQL server', 'Customizing the to-do model and its fields', 'Executing a mutation to create a to-do', 'The chapter covers the implementation of CRUD operations in a database', 'Setting up a React application using create react app enables CRUD operations such as viewing, adding, and deleting to-dos.', 'Creating an Apollo client by specifying the URL to the server running at HTTP://localhost:4000 allows making GraphQL requests throughout the React application.', 'Using Apollo to run GraphQL queries in a React application is discussed, including running the same queries as in GraphQL Playground and rendering to-dos in the React application.', 'The chapter explains the process of downloading necessary libraries such as Apollo Boost, React Apollo, GraphQL Tag, and GraphQL for parsing the query and setting up and making the queries.', 'Using GraphQL tag to parse queries The chapter explains the process of using GraphQL tag to parse queries and import GQL from GraphQL tag for parsing.', 'Binding components with higher order component GraphQL It discusses the process of binding components using the higher order component GraphQL from React Apollo, specifying the query or mutation, and wrapping the app to inject props.', 'Accessing data and loading status through props It describes the access of data and loading status through props, with an example of using this.props to access data and loading status, and the usage of console.log to view the values.', 'Rendering fetched data in a React app It covers the process of rendering fetched data in a React app, including the use of destructuring to access loading and to-dos, conditional rendering based on loading status, mapping through to-dos, and adding unique keys for optimization.', 'The chapter introduces the process of adding Material UI to enhance the appearance of Apollo queries and mutations, including installing the Material UI package, importing fonts and SVG icons, rendering a paper component, and customizing a list to resemble to-do items.', 'The chapter discusses updating a to-do list with MongoDB, explaining the process of updating a to-do list using MongoDB as the state and fetching data with GraphQL.', 'The chapter discusses replacing a comment icon with a close icon, setting up on click functionality for the icon, and explaining how to update and remove items using GraphQL mutations in Material UI.', "The function 'updateToDo' is added to the props, allowing it to be accessed in the component's functions.", 'An asynchronous function is used to update a to-do item by toggling its completion status, requiring the ID and completion status as variables.', 'The chapter explains how Apollo enables real-time updating and persistence of items in the to-do list, showcasing the feature of real-time updates and the persistence of the items even after refreshing the page.', 'Demonstrating how to update and delete items in a to-do list The transcript provides a detailed demonstration of updating and deleting items in a to-do list using Apollo, showcasing the process of updating the cache and removing items from the list.', 'Explaining the necessity of refreshing the page for changes to take effect The chapter discusses the need to refresh the page for changes to take effect when using Apollo to manage cache updates in real-time.', 'The importance of not mutating the array when updating is emphasized to ensure the proper functioning of the update function.', 'Using GraphQL to create, read, update, and delete to-do items Demonstrates the usage of GraphQL to perform operations like creating, reading, updating, and deleting to-do items, and integrating GraphQL with React to manage the to-do list.', 'Creating a form component in React and managing state using onChange event Explains the process of creating a form component in React, including managing state using onChange event to update the text field value as the user types.']}