 Our first speaker of the day is already here and get up for his presentation. A little interesting thing about him, even though he has been in websites and web development apps for more than nine years, he's also pursuing LLB. For those of you who do not know what LLB means, I'm saying this because I didn't know what it means. So you can find him into many talents and many avenues in the days to come. Also, this one right here is a big foodie and a big traveler. That means if you want to talk about websites, law, food or travel, he's a guy. Now to talk about thinking the reactive way for WordPress developers, I would like to welcome in the center stage Mr. Shakar Upadhyay Katiwada. Thank you, Shraddha. Some technical problems. We are a bit late but we will be continuing after this. How many of you have faced problems when you change the language or when you want to switch from one language to another? I see many hands going up. Yeah, everyone is overwhelmed, right? Everyone is anxious, everyone is stressed to look into the series of tutorials, series of documentation, going through the concepts that are new to you, going through the process that are new to you. So to make it a bit easier, I had chosen this topic, thinking the reactive way for WordPress developer where we will explore some terms, some buzzwords that are useful to get you started to modern JavaScript development and react. So I am Shakar Upadhyay Katiwada. I am senior web developer at ProShor and I have been working here since nine years. Previously I used to do PHP, now I am into front-end development using React. I am also the community sheriff for ProShor who helps linking ProShor to different communities. We organize meetups. We help communities and we send speakers like I am here. I am also a WordPress enthusiast. I have been using WordPress since 2013 and it has been a love since then. So why should you learn WordPress as a WP developer? There was a time when WordPress released a new feature called WP REST API that helped many developers to explore new ways. People are exploring React and people are exploring the APIs and building things with React and single-page applications. So this has sparked ignition to integrate WordPress to different single-page applications like React. Then came the Gutenberg editor that used the block pattern and block directory for building things that was also built on React. There is also something called full-site editing that you can use now. We also have workshop later. So you can use that which is also built based on React. And it's still in phase two and there are many phases to come. So many much more things that is coming till phase four. So you should be prepared. You should know what React is as a WordPress developer because it's being integrated to the core itself. So before starting React, what should I know? If you go to search the Internet, you will get some tutorials regarding like you will get to do app with create React app. But that will not help in your WordPress development because that is something different because WordPress has its own ecosystem, own pattern. So first thing you should know is that there is something called yes next that came after yes five. The JavaScript, the base of what React is based on. So you should know what arrow functions are or what you can do with array maps and filters right there. You should know basic concepts of things. And you should also know how front-end development works. We used to develop apps with one script written. We used to integrate HTML and boom, it used to work. But that is not the case. We now write source file that is compiled by another tool and that compiled version of that is used by us. That is consumed by us. So we should know that our front-end development workflow. I will be also showing a little workflow in my example. So before starting, so if you know the concepts of modern JavaScript, you should implement it and you should test it. So you should set up an environment to run it. You should first set up your node that will help. The node is a runtime that will help you run a JavaScript in your machine. So you should first install node. You can follow the documentation or use tool like NPM or Volta for making it easier. There is something called NPM that you should know concept about. It is a package manager. There is something called repository where all the dependencies are stored. So we should also have that and with NPM we can install dependencies or build things in modern JavaScript. So what are modules and dependencies then? Modules are smaller parts of the code. You can export a small function as a module or you can write the whole component as a module. So modules are the chunks that ultimately builds your applications. And dependencies are those that are stored in repositories like NPM, YAN, PNPM. That will help you to build it faster. There are various dependencies that helps us building in WordPress ecosystem. There are something called WordPress block editor, WordPress components or WordPress elements that helps us building our application or our React faster. There is something called bundler. Bundler means it helps to bundle everything into one file and the required assets to one file. There are various bundlers like webpack, beat, rollup. We will see how bundlers bundle the things in later. So there is something called transpiler. Before we used to code in one JavaScript file, we have worry about if that would run in another browser or not if it is supported or not. But the transpiler helps to transpile this ES next concept or new concepts to the old JavaScript that is understood by the browser. So the classes and arrow functions and everything will become converted to the one that browser understands. And finally the one that was in topic that came at last. There are various React concepts that you should know before going to React. The React documentation like is a great example. It explains various things about React. I personally recommend that. I will be talking about some things that are important while we are seeing the demo there. So I will be talking about this small concept like React DOM. React DOM is a virtual DOM created by React on top of HTML that helps to render and maintain the lifecycle of the components. So next thing is components. Components are the like there are pure components and other components. Components consist of various elements and states and effects that are combined with that component. So it is mixture of everything. Then other thing is props. Props is something passed to the child component that helps to understand what properties should be used from parent that can be used in child to show what we need to show. Next thing is state. State is a React object that helps us to define how the component will function. So according to the state change, our component should be made such that our state value changes the style of how component looks or how they will function or what they will display. So the new thing that came in React, that made the React much easier than it was before is called hooks. The hooks are something that helps to define states and everything inside one function and that can be reused in other two. So these are the basic concepts. There are many other concepts like state lifecycle or everything that you have to go through the documentation. This is just few of them that I'll be showing you in the code later. So let's see in action what the concepts are and how you can understand the concept better. First of all, this takes a long time so I have kept the screen shot of it. I am going to run a command called npx wordpress create block. I will be creating a block plugin that uses some template with example block. And after installing the block, let's see how the files and folder look like. So this is the block.json that we created. This defines what the block is and this json file, we usually, in modern Java script flow, we define the settings in json or any other format like we can define it in js2, exporting it as module, but the convenient way to do can be a json file. And it defines where the editor script starts from, where the editor style starts from and everything. But before going to that block.json, we need something to read that block.json and understand what to do. So package.json comes to the rescue. It defines what the plugin is about, where it is hosted in gate or everything and what dependency is it? Oh wow, only one dependency that must be easier to understand, but not that. If you go deep inside WordPress scripts that is below here, if we can see what the packages that the WordPress script use, then there are many dependencies that WordPress has simplified for you. Like I am scrolling from that time and the packages still don't end. So there are various packages that you require for your development that WordPress has made it easier so you don't have to go through the complex process of understanding everything. Because WordPress has simplified for you with the WP scripts. But we will be dissecting into WordPress script to understand the concept that I talked about before. So these are various dependencies that came up with WordPress script. You understood that there is something called packageization that hosts what dependencies we are using. The dependencies are then stored in node modules when we enter the command npm run install. So there is a folder called node modules that will be created that install the dependencies and dependencies of dependencies that handles the code. So it's a long list in node modules. We will not go inside that. Sorry. And let's go to another file. The main source code file is SRC. Usually every modern JavaScript you develop mostly they are hosted in folder called SRC and inside that we define various folders like components or maybe another files. So in our SRC too there is something called index.js. Index.js. We talked about modules before if you remember. Here is a dependency called WordPress blocks that we used from the WP script that has a module called register block type. This is a function. So register block type will help us to register that block with the name coming from block.json and the component of edit and the component that will help us to save it. So here we see the example of modules and dependencies that we talked about. This is how you identify that is a dependency and that is a module. So if you see right up here if it is dependency that is coming from node module we can directly write it as it is but if it is our local modules or local files we import it with dot slash and the file name. So you will be pointing it like this. Next thing is that we will see a component. Let's go inside it. So these are various components that are already provided by WordPress. So the buttons are there, text control are there and everything and there is also a hook used block props that will help to get properties of the blocks automatically. So we are seeing how hooks are used. Use block props is a hook that is provided by default and edit is a component since we return a JSX. This is a special type of HTML lookalike pattern that we use to build components in React. So this is JSX and we are building an edit component here and we are passing two props that I talked about attribute and set attribute are two props that are passed from a component called higher order component. We don't need to know about that component because it works itself. We don't have to worry about it. So that makes the process easier right. So we will be this is called, if you don't know modern JavaScript concept you will be shocked in things like this. This is called array destructuring. So this is a new concept that is in ESNEST that we haven't used yet. So array destructuring destructures and passes props with this in div easily. So this was bit difficult when you used to do older JavaScript. So understanding the JavaScript concept before is important before doing React. So we are building two components text control and button. So what text control is does is it gets the value from attribute message. So that is defined in block.json that there is attribute called message that we will be using and that is defined in edit.js and that will be on since it will set attribute. This is called a setter. So it will change the state of attributes and it will again send it by a props. So that is what happens. So we are like in on button click I have made the message empty. So that is how it functions. So let me show you this is something this is the good and pride box that we built. There is a text control there and we have a button called clear. So if we press clear the state of said attributes is changed to blank. So it becomes blank. And if we type something the state is again changed and the message is the state of attribute message is changed and we will be seeing it. Okay, we are seeing it. So these are the basic concepts that we look through like these are the things that we should understand before getting it into it and then I kept less on the code. So I showed you the example, this example, but the modern JavaScript realized on various CLI commands, CLI tools that we will be using. But where do you know that the command is available? We will be looking into package.json. So if you want to run that in development we just run the command npm run start that will be starting a server and it will be watching the changes and it will be reflecting it on the site. So this npm run start use uses webpack and it finds everything and bundles it. So where is the bundle code gone? There is a folder called build that keeps everything that is bundled. Like everything from src is bundled to build that is used by our plugin which is defined in this glutenpride.psp. So if you see the glutenpride.psp we will be registering the folder called the directory slash build with this function called register block type. So after building what we have made we will be registering it as plugin and we will be using it. So there is no hot reloading currently but I think that is in progress so you have to currently refresh it yourself in the page to see the changes. There is something called I said npm run start then there is something called npm run build which builds the final product with the minified version of the java script in the final. So start builds the development version and build builds the further version. So there are various command available like check engines checks if your machine meets the requirement or not check licenses does the checking of if your modules that you are using it is compatible with gpl license or not and there is something called formatter that is widely used in modern java script formatter does what formatter does is it brings your code into certain format that is more readable. You can use plugin like pre tier and everything in your editor yourself to do it automatically. So we have something called linter we have various linders like ES lint or style lint that will help you to check the standards that are in there. So there is testing tools and package tools everything available in CLI so you have to know how to run the commands in CLI and work with it to get into modern java script development. So with telling this showing you some code samples not flowing with you with more information I would like to end my talk and I will suggest you some readings after this you can go to block editor handbook where you can find more details on block directory, block pattern and FAC. You can go to FAC documentation to understand more concepts and advance concepts of React but first and foremost if you are not into frontend development or if you are new to java script I suggest you to go through the pathway called frontend developer course that is provided by MD and docs. It is a wonderful documentation. It is a wonderful pathway that will help you to grow as a frontend developer as a whole. And finally I would like to conclude everything thank you if you have any questions or anything please I am available. And if you are not having any questions you can connect me in Twitter or LinkedIn my username is SAKARUK that you can find and if you are not there all two you can email me there is my email in the bottom and if you also want to partner in some events or any community activity I am also the community sheriff of the organization so feel free to ping me. Thank you. Shraddha Do we have any questions for SAKARUK? I think not. I will ask one more time and then we will move on. Do we have any questions? We have one. Could you please pass the mic? It is always there. Thank you. So in WordPress as we know that there are a lot of dependencies similarly in React there are also a lot of dependencies. So my question is that as a React developer working with WordPress how can we optimize the speed of our site while using React with WordPress? That's a tough question. I think that we are not using much dependency rather than using this React that is we cannot optimize it as a whole but we can look the documentation thoroughly like we can use the components that are already available and not adding a layer in something like that and we can develop the things with the tools that are already available then using the new tools and I have not done much optimization in WordPress rather than that or in React rather than that so I suggest to choose wisely what you npm install or Thank you. I have one more question regarding source engine optimization. So normally with WordPress we have different plugins for SEO. While using WordPress with React how can we look at that SEO aspect of it? Currently it does not save as a React component so the editor that you editor in editor you use React to save the data that is ultimately generated as HTML so there is no React involved but with the advent of FSC there might be different I have not gone through it but currently the data you save through React is not used as React but it is used as HTML itself so you don't have to worry about it currently but after FSC the things might change but we are still in process of there is still HTML used but when the JSON comes in and when React comes in I have not looked into it. Thank you.