{"type":"doc","content":[{"type":"heading","attrs":{"level":1},"content":[{"type":"text","text":"React"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"align":null,"inline":true,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"📝 This lesson's quiz can be found - "}]},{"type":"paragraph","attrs":{"align":null,"inline":true,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","marks":[{"type":"link","attrs":{"href":"http://localhost:3001/assets/protected/courses/tinyhouse-react-masterclass/module_5/lesson_5.1/protected/multiple-choice-questions.pdf"}}],"text":"here"}]},{"type":"paragraph","attrs":{"align":null,"inline":true,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"."}]},{"type":"hardBreak"},{"type":"paragraph","attrs":{"align":null,"inline":true,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"\n🗒️ Solutions for this lesson's quiz can be found - "}]},{"type":"paragraph","attrs":{"align":null,"inline":true,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","marks":[{"type":"link","attrs":{"href":"http://localhost:3001/assets/protected/courses/tinyhouse-react-masterclass/module_5/lesson_5.1/protected/multiple-choice-answers.pdf"}}],"text":"here"}]},{"type":"paragraph","attrs":{"align":null,"inline":true,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"."}]},{"type":"hardBreak"},{"type":"paragraph","attrs":{"align":null,"inline":true,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"\n📖 This lesson's lecture slides can be found - "}]},{"type":"paragraph","attrs":{"align":null,"inline":true,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","marks":[{"type":"link","attrs":{"href":"http://localhost:3001/assets/protected/courses/tinyhouse-react-masterclass/module_5/lesson_5.1/protected/lecture-slides.pdf"}}],"text":"here"}]},{"type":"paragraph","attrs":{"align":null,"inline":true,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"."}]},{"type":"emptyNode"}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"Though this course assumes some experience with the use of "},{"type":"text","marks":[{"type":"link","attrs":{"href":"http://reactjs.org"}}],"text":"React"},{"type":"text","text":", we're going to cover some of the core concepts of React in this lesson to bring everyone up to speed."}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Traditional JavaScript"}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"In traditional HTML and JavaScript applications, JavaScript is used to "},{"type":"text","marks":[{"type":"italic"}],"text":"directly"},{"type":"text","text":" manipulate the "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model"}}],"text":"DOM (i.e. the Document Object Model)"},{"type":"text","text":". To make changes in our UI, we'd have to make references to the DOM and imperatively declare the changes we'd want."}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"For example, assume we had a simple "},{"type":"text","marks":[{"type":"code"}],"text":"

"},{"type":"text","text":" element that said "},{"type":"text","marks":[{"type":"code"}],"text":"Hello World!"},{"type":"text","text":" and a button with an "},{"type":"text","marks":[{"type":"code"}],"text":"onclick"},{"type":"text","text":" listener that calls a "},{"type":"text","marks":[{"type":"code"}],"text":"changeGreeting()"},{"type":"text","text":" method when triggered."}]},{"type":"codeMirror","attrs":{"mode":"text/html","uniqueId":"Bvt7gra2j--fTAxqTmUNw","locality":0,"loading":false,"url":null,"displayName":"","startLine":null,"endLine":null,"codeQuery":null,"readOnly":false,"highlightLines":[]},"content":[{"type":"text","text":"\n \n
\n
Hello World!
\n \n
\n \n \n"}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"Let's say we're interested in toggling the text content of the "},{"type":"text","marks":[{"type":"code"}],"text":"

"},{"type":"text","text":" element when the button is clicked. To do so in native JavaScript, we have to get the reference to the DOM node in question and only then will we be able to change the text content of the DOM node."}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"Here's an example of toggling between the "},{"type":"text","marks":[{"type":"code"}],"text":"Hello World!"},{"type":"text","text":" and "},{"type":"text","marks":[{"type":"code"}],"text":"What is up!"},{"type":"text","text":" text when the "},{"type":"text","marks":[{"type":"code"}],"text":"Change Greeting"},{"type":"text","text":" button element is clicked."}]},{"type":"codeMirror","attrs":{"mode":"javascript","uniqueId":"5Vin-wtePe1XcZ20RUCc1","locality":0,"loading":false,"url":null,"displayName":"","startLine":null,"endLine":null,"codeQuery":null,"readOnly":false,"highlightLines":[]},"content":[{"type":"text","text":"let greetingTag = document.getElementsByTagName(\"h2\")[0];\n\nchangeGreeting = () => {\n if (greetingTag.textContent === \"Hello World!\") {\n greetingTag.textContent = \"What is up!\";\n } else {\n greetingTag.textContent = \"Hello World!\";\n }\n};"}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"This works fine but the problem a lot of engineers noticed with large-scale applications is things get difficult to track "},{"type":"text","marks":[{"type":"italic"}],"text":"very quickly"},{"type":"text","text":". Certain libraries came to the scene to help structure things better with the Model-View-Controller pattern or even the Model-View-Presenter pattern. React came into the scene with a pretty unique way of solving this."}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"React"}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"React changed the paradigm of how we make changes to our UI with the help of something known as the "},{"type":"text","marks":[{"type":"bold"},{"type":"link","attrs":{"href":"https://reactjs.org/docs/faq-internals.html"}}],"text":"virtual DOM"},{"type":"text","text":". The virtual DOM is a cool term for essentially just JavaScript objects that represent the structure of the DOM."}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"When we make changes in React, we don't make changes directly to the actual DOM - we make changes to the virtual DOM. Why? Because it's a "},{"type":"text","marks":[{"type":"italic"}],"text":"lot"},{"type":"text","text":" less expensive too. React then has the responsibility to compare the difference between the changes to the virtual DOM and the actual DOM, then patch the changes made to the actual DOM."}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"This has introduced a different way of building UI with React."}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"JSX"}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"React gives us the ability to use "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://reactjs.org/docs/glossary.html#jsx"}}],"text":"JSX"},{"type":"text","text":", a non-standard syntax which helps us create markup in JavaScript."}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"Here's an example of using the "},{"type":"text","marks":[{"type":"code"}],"text":"ReactDOM.render()"},{"type":"text","text":" function to render an element on a particular DOM node."}]},{"type":"codeMirror","attrs":{"mode":"text/jsx","uniqueId":"NbtlRqEpqeB8K-GMk0riD","locality":0,"loading":false,"url":null,"displayName":"","startLine":null,"endLine":null,"codeQuery":null,"readOnly":false,"highlightLines":[]},"content":[{"type":"text","text":"ReactDOM.render(

Hello World!

, document.getElementById(\"app\"));"}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"ReactDOM.render()"},{"type":"text","text":" is often the starting point of React Applications. The "},{"type":"text","marks":[{"type":"code"}],"text":"

Hello World!

"},{"type":"text","text":" element passed in the first argument of the "},{"type":"text","marks":[{"type":"code"}],"text":"ReactDOM.render()"},{"type":"text","text":" is JSX - "},{"type":"text","marks":[{"type":"bold"}],"text":"XML-like syntax in JavaScript"},{"type":"text","text":"."}]}]}

React vs JavaScript - Reusable Components and JSX