 Thank you very much, Mike, and thanks everyone for joining us today. This is Understanding Drupal at Badcom 2020, online edition. The slide deck and everything that I'm going to show today is already available. So you don't have to take a lot of notes. You have all the resources already available. Let's start by thinking about why would we want to use React. And there are many reasons, but I want to just give you some. First, because React has this philosophy of learning once and applying everywhere. And by that it means that you can use the same library to write applications against different platforms. For example, the web, mobile applications, VR applications, desktop, and so on. In fact, there are around 25 React renders. These are the ones responsible for taking your React code and modifying it for the specific target platform. And in that URL you will see 25 or so. So this holds true. Once you learn React, you are able to reuse that knowledge for different applications. Also, React can be implemented in an incremental fashion. For example, if your project is too big and it is not possible or feasible for you to go, you know, in one go, one big transformation, what you can do is start modifying, you know, pieces by pieces. Let's say that you have a block on your sidebar and that is the first part that you convert into React. After doing so, everything goes well. You decide to convert the whole sidebar. Let's say that, you know, everything is going great and you decide to change your whole application. And you can apply this incremental approach to either go full-blown the couple with everything being rendered by React or stop at any time and have a hybrid approach where Drupal gives you some of the markup and React takes over part of the page. I, in particular, have used this approach of having a hybrid system in a project where the site was powered by Drupal but there was a checkout experience and that was a React application. Everything else was Drupal, but when you want to, you know, go to the cart and make a purchase, that was a React application. Also, React has a great developer experience. For one, there is a small API surface, so there are not a lot of things to remember. You can literally create the whole documentation, official documentation for React in an afternoon. And when doing so, you will be very well equipped for, you know, attacking any React project. Also, contrary to other frameworks, React do not add, you know, extra templating or concepts to the language. This is using basic constructs in the JavaScript language. So, this also has an implication. The better that you become a React, the better you become a JavaScript developer and then you can take this knowledge to apply it to a View project, to an Angular project, to a Vanilla JS project, and so on. For example, you don't need to know a new templating language, you just write JavaScript. There is also great error reporting and developer tools as we're going to see during that demo. As of today, it is very easy to get started. Back in the day, you will have to do a lot of server setup to start with React. But today, there are services like on package, on sandbox, and others that literally with little to no effort, you get React set up so that you can start writing code. And one of the things that I am most impressed by React is that, you know, everything evolves, Drupal evolves, React evolves, technology in general evolves. But in the case of React in particular, when there are API changes, many times the core team releases something that is called a code mode. And this is an application that you execute via the command line that is going to read your source code and modify it to accommodate to the new syntax. We have similar tools in Drupal to do the same, like to go, for example, from Drupal 7 to Drupal 8 syntax or even from things that have been deprecated in Drupal 8 to the new ways of doing that in Drupal 9. So it is certainly not something you need to react. But what I want to point out is that you have these extra tools at your disposal to make that upgrade process to newer version easy. As I mentioned, this is mostly a live demo, and of course, nothing can go wrong, right? The repository is publicly available on GitHub. And it is actually written as a workshop. So I'm going to go briefly over that. But basically what we're going to work on today is going from React elements to React components and then to full applications. So let's switch to that already. I will be using this code. One second here. I will be using this code with a political light server that allows me to every time that I save the file, my browser is going to reload with the changes. The application that I'm going to show today is the one that we see on the right. As you can see, it's relatively straightforward, but the whole point is focusing on learning the real concepts and not necessarily having a beautiful design for the application. In this case, what you can do is you can vote on different frameworks. And the application is going to sort itself based on the number of votes. This is the repository that I mentioned. And as you can see, this is like a step-by-step guide. You can go and there will be comments explaining what are the tasks to do for each of the steps. And in the next one, you will have the solution. So after this session, you can take a look at the code and try to do the exercises yourselves. And we're going to get started right away with the demo. What we see here is the output of the static page on my left. So we're going to start by doing this incremental approach. We're going to just change one line that is going to be powered by React. In the whole page, only one line is going to be powered by React. And that particular one is going to be the one that says vote for your favorite one. In the HTML document, we're going to follow a three-step process. The first step is going to be include the React library. The second step is going to be create a mounting point for the React application. And the third step is going to be actually including the JavaScript file that contains my application. So let's go one by one. In this particular case, I'm going to include from my local repository. I have the libraries configured locally in case something goes wrong. But in this particular case, this React.development.js is the React library by itself. But remember that this is the core package. And on top of this, we need a renderer. In this particular case, because we are writing a web application, we need that DOM renderer, which is another package that also needs to be included. So we do that. And we have the core package and then React DOM. Now, what we said is that we wanted to replace this section. So I'm going to remove this and include a div with an ID of React-app. The ID can be anything that you want. In fact, it doesn't have to be a div and it doesn't have to be an ID. But the point is you need something to hold onto. And in this case, this is where I'm going to mount my React application. And finally, at the very bottom, I am going to include the script tag for my script. This is where I'm going to be writing my application. If I save this, I can verify that both for your favorite text has disappeared. And this is expected because I literally removed that from my HTML and instead put an empty div. Now I'm going to switch to JavaScript. On my HTML, this is everything that I had to do. In JavaScript, we are also going to follow a three-step process. The first one is create a React element. Then get a reference to the DOM where we are going to mount the React application. And the last one is going to be using the renderer. Write the element into the mounting point. So let's go one by one. In this particular case, I am going to create a constant called element. And I'm going to use the React dot create element function. And the way that this works is that it expects at least three parameters. The first one is the HTML tag that I want to render before I had a P tag. So that's what I'm going to do here. The second is we're going to leave as new for now. And the third one is the text that you want to render. I'm going to say, and that doesn't do anything because that's just creating the variable in memory. The second step is going to get a hold of that mounting point in the HTML. You can do this in many ways. For the sake of this example, I'm going to use document get element by ID. So again, I'm going to create a const. And the name is going to be dumb container. And the ID that I had used before was react dash KPP. Finally, I'm going to combine the two, if you will, using my renderer, which is provided by reactdom. I call the render function. And what do I want to do with it? I want to render the element into the dumb container. And if I click save, we can see now that the text is appearing here. Now, if I were to see inspect my source code in the in the depth for the editor, you can see that in my header, which is the, you know, that part of the backup. I have an ID with an ID of react app. And then anything inside it is the react application that I am creating. So, so far so good. I have something there. Now let's try to get some of the functionality that we lost. Remember that the words your favorite were in bold and everything was uppercase. So let's see how we can do that. One functionality that react dot create element provide is that in fact you can pass more than three elements, you can pass, you know, any number of elements for that matter. And in this particular case, let me show you something. If I have it like this, for the record, I have a blogging called prettier that every time that I say it is going to format my code automatically. So if you think if you see the things jumping around is because the previous blogging is doing its magic. But in this particular case, what I wanted to demonstrate is that the text that I had before that was one string. Now it is three. So the way that is going to work is that, you know, they are just going to be concatenated. And by clicking save here, you can see that I get the same result. Not, not, not into fancy, nothing to shape. But this is going to be the building block for the next part, which is coming up with the strong tech. So react elements are channel kind of atoms in, you know, in the, in the, in the world. Those are the smart as components that you can interact with in group in react. And one thing is that you can combine them to create molecules and then you know the analogy like full living beings and stuff. But in this particular case, what I want to do is create another react element inside. In this case is going to be a strong tax. I'm going to pass no for now. And then I'm going to close the parentheses there for proper syntax. And now I am getting my, my bold text. And if I were to open the depth tools I want for saving some time, you will see that it will be, you know, wrapped in a strong element. So what we can see here is that for one, you can create react elements, but also you can nest them. And this is trying to simulate the hierarchical structure of an HTML page. The other thing that we had was that we had everything uppercase in that line. And this was achieved by adding class to that particular p-tag. And this is where the second element in the create element function comes into place. We can pass an object. So instead of passing no, I can pass an object. And that object, if I specify a property called class name, and then, you know, the value, this is, this class is going to be applied to the element. So if I say, and I inspect my source code, I can see that here the header, the deep, the class is being applied and everything else as expected. And in CSS, I am putting everything in uppercase. One thing that I want to point out is that as you can see in the rendered code, it is class, but in your code in JavaScript, you have class name. The reason for this is that ultimately this script is a JavaScript file. And in the language of JavaScript, the word class is a reserve keyword. So if you were to use that, it would produce a, you know, a clash. React has some, you know, backup procedures to interpret that, but it is better to use class name. Otherwise, you are going to get some warnings in your console. But just by doing this, you know, three steps, create one element, nest another one, and then apply a class. We basically got the same result from the very beginning. And again, react elements are kind of like the basic building blocks of a react application. But you might be thinking, well, this is kind of weird. Why do I need to create this complex structure of nested function calls in JavaScript? This is not very user friendly. If I were to have a big application, this is going to become pretty easy. And because of this, the React team came up with something that is called JSX, which is a syntax very similar to HTML. And this is how it looks like. I'm going to replace my React element from here. And this is a syntax. So as you can see, it's very, very similar than regular HTML with a caveat of using class name instead of class. So the properties that you otherwise pass in the second parameter, those become like HTML attributes, if you will. Now, I just saved this file, and you can see on my right that the line is gone. So what is going on here? If I were to open again my DevTools, you will see that I have an error. It says uncut syntax error expected expression got the angle bracket. Ultimately, this is a JavaScript file. And having an angle bracket like this in a JavaScript file is not valid. It's not valid syntax. So the whole thing just doesn't work. It is worth pointing out that HTML is very resilient. And if it doesn't understand something, it just like continues rendering the rest of the page. That is why instead of getting a completely blank page, we only have that particular line missing, the line that is being rendered by the React application. But that being said, the React application is gone. It's not working. So what can we do to fix this? We definitely want to use this syntax because it's easier to read and to maintain. What we need to do is apply a transformation method. There are many ways to do this, but one of the most popular is using a library called Babel. So that's what I'm going to do here. I'm going to go back to my HTML and import the library. And again, I have it in my custom repository. If I click save, you can see that the error still appears. So just having Babel loaded in the page doesn't do anything. You also need to instruct it in some way that the specific script files need to be transformed by Babel. You need to do that explicitly. And the way to do it is where you include the script, like in this particular line. I'm going to add another attribute in this case type equals x slash Babel. And by doing so, I am instructing the library that has already been loaded into the page that, hey, I want you to apply your transformations to this particular file. And as you can see, I got my line working again. But if I look at my console, the syntax error is gone, but now I get a warning. And the warning says you are using the in browser Babel transformer. This is not recommended for production use because you don't want to be, you know, giving the responsibility to your visitors browsers to do the transformations. And another alternative to this is pre-compiled the files. For example, you can use Webpack to create a bundle and then ship the production bundle into your client. And then, you know, you don't get this one. But for today's demo, this should suffice. We're going to, you know, allow this for now. Now we can see how we can use KSX and this is working. Let's say that we are happy with the results that we are getting so far, and we want to continue transforming our application little by little. In this time, I want to render the whole header section into in react. So I am literally going to my HTML and copy and paste from here to here. I'm going to do a little bit of formatting. And then I'm going to save my KSX file. And that's it. As you can see, like again, little by little copying and pasting. If you can open the DevTools to see if there were errors, I know for a fact that this time there were none. And now all my header is being rendered by react. Okay. The next concept after working with react elements that you need to know about is react components. And a react component is very useful for different reasons that we're going to see throughout the demo. But the way that they work is like this. You have a function and that function needs to start with a capital letter. For now we're not going to pass any parameters into the function. And then you need to return something. What is that something that you need to return the react element one react element that you want rendered by this component. So following your approach of copying and pasting, we're going to do the same. I'm going to literally take all of this and put it in here. And then I don't need this anymore. Now this is my react component. What I had before was an element. This is a react component. So why do I need to do I also need to update my render function instead of printing something that no longer exists. I need to print the element and the way that you do it is like this. You call the component as if it were an html tag. So I'm going to click save here and we can verify that everything is working. Now, I mentioned that the component needs to start with capital letter. So basically there are other things that you can do if you don't want to do that, but it's usually the best practice. And I want to give a short explanation for this. You notice that in this case, we have a header html element, and we have a header component. So why does the react framework distinguish between what is a native html tag and what is a custom react component. It's not very fine if the first letter of the component name is a capital letter. So that's how it can tell them apart. My header lowercase is my regular html file tag. My header with capital h is my react component. So far so good. We are happy. We want to continue making changes. So what I'm going to do now is create a new component to hold the data for the candidate list for the whole candidate list. So in this particular case, I'm going to follow the same approach. I'm going to have a function in this case named candidate list. I'm going to return something. And why is that something that I want to return? I'm going to go to my html and literally copy and paste everything. And as you can see, by now, my html is very, very thin. It's mostly a shell, an empty shell like a deep and then the script that I'm going to load. So I'm going to save this. I'm going to go to my html here. I'm going to go to my JS file. I'm going to paste a code. Now, my IDE is already gelling at me. Let's try to do something instead of rendering the header. I'm going to render my component and see what happens. I'm going to click save. And it gives me a blank page. If I open my console, I will see that I have an error. I'm going to add this. Add adjacent JSX elements must be wrapped in an enclosing tag. There is an assumption by react that an element can only return one root component. And in this case, I have a h2 and I have a section side by side adjacent to each other. And that goes against pre-access expectations. What can you fix this? One way would be to have a wrapping element, for example, a deep, but having elements doing nothing other than complying with react expectation is not semantic markup. And we should strive to have semantic markup in our applications. So to accommodate for this, the React team provides a special component that is called react fragment. When rendered to the page, it doesn't produce any HTML markup. It is just like an empty shell, again, that when you need to return adjacent components, you wrap both of them or as many as you have in the React element component. Excuse me, the React fragment component. Now, we have seen something already here, but if I look at my console, I get some errors. And this is what I had described before, invalid on property class. Did you mean class name? So we can already see that the framework itself is being super useful. It is not only identifying the error, but also giving me the solution. The problem is that, as I mentioned, class is a reserved keyword in the language. So I actually need to use class name. By changing that and clicking save, those words are gone. And now I have, you know, my working application. I want to mention something brief about the React fragment component. It has an alternative syntax, which is like this, those opening and closing ankle brackets. And that is to start. And at the very end, you put a slash like if it were a self-closing track. I highly recommend that you avoid this. Even though it is valid syntax, it is kind of confusing. Someone else on your team might come to this code and think, hey, did they really forgot to specify the tag to use? And there is no need to be fancy and apply all the shortcuts or the extra syntax. It is better to have readable code. And your feature self is going to thank you for that when you come a year later trying to fix a bug. So in general, aim for readability instead of just trying to apply every possible cool trick. So good so far. We're going to restore our header. And in order to do this, we're going to add a new component. In this case, the component name is going to be rating up. And as you can see, I am using a react fragment because I want to return side by side my header and my candidate list. And now I take the component name, add it to the renderer, click save. And that's it. Again, getting the result from the very beginning, but now everything is being rendered by the react application. So far, you know, it is nice to know all about this, but it's not that impressive, right? We are just moving code from an HTML file to a JavaScript file. So what can we do? One of the benefits of components is that they are reusable. So for example, I'm going to create a new component called candidate. I'm going to put it here. And as you remember, I need to return something. And what is it that I'm going to return? I'm going to return the markup for the react candidate. And now what I can do is actually use the component itself. Okay, now that I have the component, what I'm going, sorry, I put it in the wrong place should be down here. Now that I have the component, I can reuse it as many times as I want. So let's say that I want to render three times the same component. That's what I get three times react as an option. But okay, good, I can reuse component, but that is not super useful because I am rendering the exact same thing over and over. It would be nice if we could make the components dynamic and that is what we're going to do next. They are allowed to receive something that is called properties. The way that properties work is like this. When you call the component, you pass the properties as if they were HTML attributes, name, year, image URL. Now, the things that you pass here are going to become properties in an object passed to the function. So the function is going to receive an object. In this case, I'm going to call that object props, but it's common. And in here, I am going to have instead of rendering the hard coded name, I'm going to say props.name. The name here corresponds to the attribute like value that I have here. Then I do something similar for the year. And something similar for the source. Notice that the properties that I pass to the element do not need to match one to one to the HTML attributes. Like in this case, the image tag has a SRC attribute, but the property that is received, it is called image underscore URL. So they don't have to be the same. One thing that I want to mention, every time that we access an angle bracket like this, it understands that hey, I need to switch from reading this file as JavaScript to reading the file as JSX. So the syntax is different. But when it encounters an opening curly bracket, it switches back to JavaScript. So what we have inside the curly brackets is JavaScript. And in this particular case, it's a JavaScript expression that is going to be interpreted and printed to the HTML in this case. In particular, the name attribute of the props property. Because this is just JavaScript, you can actually do clever things like this, for example, you can, for the attribute, you can have a template literal. So something like this for a second. That is called template literal. And what we're going to do is take the same name and add a space and a logo, and this is going to be used as my attribute, because we all know that accessibility should be, you know, considered when creating an application. Now that we have here, I'm going to save. And we will see that my first element renders properly, it has the framework name, the year and the image. And if I were to look for the attribute, it will also be there. But we have this, you know, undefined logo released in without a year and no framework. The reason is because now our component expects some properties to be passed to it. But when I render it down below, there are two instances where I don't do it. So I just need to update my, my call to the components to include that information. So for each of them view an angular, I pass year and image URL. And because I have this, I can safely remove the, the markup from below. Save. And now we come back to a working example. So what have we just done. We created a component and this time we passed properties to the component. Those properties are sent as if they were regular HTML attributes. And when the component receives them is going to be an object. But like the first argument to the function is going to be an object and whatever name we use there we use inside the function. So in addition to the curly brackets in JSX, let's react, know that what comes next is JavaScript. It is no longer JSX, but JavaScript. So we can have JavaScript expressions. And in this case, again, accessing the properties. And in this case, using a template. Now, we might want to have some safety guards around this. Because last time we, we got some undefined logo text on the screen because we were calling the, we were calling the components without the necessary, the required properties. So there are different approaches to work around this. One of them is using a library called prop types. So I'm switching back to my HTML to include the library. In this case, I have it again in my local code, and it is called prop types. When I have this prop size library, but I can use the following. After my component, I can have this. So the component name, remember capitalization is important. I have a capital letter here dot prop types. And then I assign an object to that. And in this particular case, I say that I want to have a name, a year and an image URL. I'm going to switch this to a string for now. The final example switches this to a number. But for now I'm going to switch to a string. So what do prop types do for you? For one, it allows you to specify what properties are expected to be received, like the name, year, name, year and image URL. This corresponds to what we have here. Also, what type of data is expected. In this case, all of them are strings, even though this is a year, but see that there are quotes around that. So ultimately JavaScript is going to consider this string. As I mentioned before, the final example has a different approach. So you can actually specify, for example, a number. And you can tell if the properties required or not by appending dot is required at the very end. So by doing so, if I were to come back to my example and remove some of these, let's say the image URL, the year and the name, if I click save. The page itself, you know, is just going to hide some of the things. But if I go to the console, you will see that I get errors. In particular, it says, well, a warning warning, failed prop type, the pro image URL is might as required, but its value is undefined. So it is already checking for missing properties. One thing that I want to point out about this prop types library is that the errors are only going to be logged to the console when you are working on the development target to put it that way. You can configure, as I said before, for example, Webpack to create a bundle that is meant to use in production. And when that is the case, a prop type won't do anything. This is mostly like to help yourself while developing, to have some safeguards. But when you produce a production bundle for the application, the prop type library will not lock anything to the console because you don't want those messages to leak to your production application. This is mostly as a development tool. Another thing that I want to mention is that if you need more sophisticated type checking, you can use TypeScript, for example. In this case, we're not going to get into that. Ideally, you learn concepts in isolation to understand what they are responsible for, and TypeScript is its own presentation. So for now, we're going to stick to prop types. And as we approach the end of the session, I want to fix the mistakes that I introduced by having all the components that are required there. I am back to my state from before and the errors are gone. Okay, one thing that I want to switch back for now we have mentioned components, how you can pass properties to them, how can you have dynamic elements in your components. I want to give a short overview of the final application so you have a sense of what other things are possible. And for that, I am going to once again load the final version with the buttons. One of the things that we wanted to simulate in this final version in the full version is calling an external API. So we have a function called fetch data that is supposed to mimic that. You call an API and you get a JSON response. That's something that we have here. Now, what do you do when you need to interact with an external API? There are many things, but for this particular example, I want to introduce the concept of something that is called react hooks. So there are many hooks. One of them is called use effect. So when I call use effect, it works in this case as an anonymous function. And inside the function, I am calling my fetch data function from before. So this is trying to simulate my external API call. For anything that has a side effect, it is recommended to use the use effect hook. So in this particular case, I call the API, I store the data in a constant, and then I apply some functions. These functions are going to be responsible for, in my particular case, sorting the application based on the number of votes. Mauricio, I'm giving you your five minute notice. Okay. Thank you very much. And in addition to that, once we have that data, we come to the bottom and we use the data to call a regular map function in JavaScript. And we are rendering the same candidate component from before, but instead of having it hard coded, now it is dynamic. So if my API returns two or three or 10 elements, all of them are going to be mapped. And the last thing to mention here is that the numbers are stored in a placeholder called a state that each component has. Again, there is a hook for that called use a state to manage your application state. Now I would like to switch to the presentation again. The demo went for the most part well. So that was good. In the slide deck, there are more information for your reference. I would like to thank the organizers for the opportunity to present and invite you to check that sessions that are coming in about 15 minutes. And there is also a coffee break so make sure to check the program for what's next. I'm from Indonesia, I go by dinner con online. I am from Nicaragua, beautiful tropical paradise in Central America. I work with a character doing Drupal react Python WordPress. If you like what you learned today, I prepared a course on the topic you can visit that website for more information and everything the code example is open source. If you don't get a course you can check the full application and as you saw there are step by step instructions on how to set it up. Thank you very much. That is my to the handle my email does light deck is the first link below and a feedback form with five anonymous questions if you would like to provide feedback, it would be great. So thank you very much for joining me today. Are there any questions. I haven't seen any questions a couple comments and you address them immediately afterwards so. Okay, excellent. Well, I hope that you enjoy the rest of your conference. And thank you very much for learning with us today.