Slide 1 ----------- Part 1: Let's explore ReactJS, the most popular front-end framework out there! Slide 2 ----------- Part 1: If you are looking for a smooth ride in this part of the course, it would be beneficial if you had: Part 2: a knowledge of javascript (preferably Typescript). If there are any particularities of Javascript that might seem strange, we will explain them. Part 3: a good knowledge of HTML or XML to build the structure of our pages Part 4: and an introductory knowledge of CSS to make things look prettier. But do not despair if you are missing one or more prerequisites, we are sure you will be able to tag along! So, all set? Let's get started! Slide 3 ----------- Part 1: So, what exactly is ReactJS? Part 2: React is a JavaScript library created by Facebook, with contributions from worldwide community. Part 3: It is designed for building user interfaces Part 4: It excels in building complex, interactive, and scalable front-end applications. Part 5: React’s strength lies in its simplicity and flexibility. It allows developers to compose complex UIs from small, isolated pieces of code called components and reuse those components across multiple projects. Slide 4 ----------- Part 1: Let me show you an example of what makes React so cool! Part 2: Imagine you're building a super cool robot out of LEGOs. Each part of the robot — like its head, arms, and legs — is made from different LEGO blocks. Part 3: Now, imagine that you want to build a different robot, but you want to reuse existing body parts, such as feet, head or hips and only modify them a little, such as change their color or adding a small feature. Slide 5 ----------- Part 1: React works in a similar way! Part 2: Imagine you design a really cool component for your website, showing the latest news. Part 3: With React, you can easily and efficiently reuse this component across your website, use it on a different website, or even share it with the world by publishing it as an open-source package! Slide 6 ----------- Part 1: But that's not all! React is also very efficient. For example, when you swap out a hat on your LEGO robot, you do not have to rebuild the entire thing, ReactJS works in a similar way with websites. Part 2: Whenever a change needs to happen, like someone clicking a button or typing something, ReactJS updates only the specific parts that need changing—not the entire website. Pretty clever, right? Slide 7 ----------- Part 1: Let's now honour the tradition and show how to display "Hello World" on your screen using ReactJS. We will also explain the role of the two main packages powering React, the ReactDOM package and the React package. Part 2: First, there is the React package, which manages the reactivity of components. You will mainly use this package in your code. Part 3: Then, there is the ReactDOM package, which does most of React's background heavy lifting, such as rendering and updating your components into your browser's DOM. Part 4: You will usually use the ReactDOM package only once when rendering the root of your React application. This is also our case when rendering the Hello components into a DOM element with the ID "root." Part 5: Wow, check out the strange syntax! We are using HTML code inside the javascript code. This syntax is called JSX, and we will dive into it soon. Part 6: For now, you can consider that we can define custom HTML elements using Javascript functions, such as our Hello component, which returns the "Hello World" text as an HTML header. Slide 8 ----------- Part 1: It is time for your first interactive exercise! This time, you can code your exercise directly in piePlayer, or, if you prefer, in the description below or in the next section. Part 2: Your goal is to change the Hello World text to its Spanish equivalent: Hola Mundo! We added unit tests to check your solution, and if you did everything right, your tests will turn green! Make sure to get the correct spelling and punctuation to avoid frustration. Part 3: You can browse exercise files in the interactive editor. First, clicking on "Script" allows you to view source code if your solution. Part 4: Clicking on CSS will allow you to view and modify styles of your solution. Go ahead and try to make something more funky than this black and white example! Part 5: The HTML tab shows the source of the HTML page that we are creating. If you open it, you can see we are loading React and ReactDOM from CDN and adding some fonts. Normally React packages are bundled using a library such as Webpack or SWJS, but that cannot be achieved in the browser. Part 6: The test tab shows the source of our unit test file. Please check it out to see what the tests is expecting! Part 7: Once you examine all exercise files, it's time to do the work! Currently, the exercise is in the view or read-only mode. You have to press the "Edit" button to launch the editor. Part 8: You can modify the code in the editor, most errors are shown immediately as you type. Part 9: Once you are done and ready to test your solution, please press the Play button and bask in the glory of green test results! Part 10: We will pause the presentation so you can finish the exercise. Once you are ready to continue, please click on the Play button the the piePlayer.