 So, let us talk about what a headless CMS is, so how many of you guys know already what a headless CMS is, all right. So, what is it? Can you give me my mic? You can say your name. I am sorry, yeah I am a headless CMS. So, headless CMS is basically like you can have WordPress as a backend and front end can be anything you can have, yeah or you can have any of what from WordPress if you want, you can have your custom engine written front end. Absolutely, yeah, yeah, I have a request for Sahil. Okay, so let me demonstrate that to you with this robot. So, let's say this is our app and let's say the body of this robot is a backend and the head is a front end. So, this is a useful architecture assembly if you want for WordPress or Brutal, that's how it looks like. You have a backend and then you have a front end. What is it? You do something crazy and the job is head off. So, what are we doing over here? We are separating your backend from the front end. So, you have a separate front end, you have a backend. Now, this thing is called decoupled CMS and you can connect your backend with the front end with the help of APIs. So, this API should be the rest API, you can have GraphQL. So, you can actually get the data. So, basically your backend is serving as front end. You are going to provide the front end to the front end and you can access that to the help of APIs. If you only have backend, that is called headless CMS. Why is it headless? Because you don't have head. It's just content. So, for example, you can use WordPress as just the content system and when you talk about front end, you can have your front end engine, you can have it in React, you can have it in View, you can have it in Laravel. So, it actually opens a new world of headless possibilities for you when you actually pick up the head. So, that means you can deliver it anywhere and you can connect it with the help of APIs. So, if you talk about the difference, the decoupled CMS is proactive and the headless CMS is reactive. So, decoupled CMS, it prepares the front end for presentation and pushes it to the relatively environment and the headless CMS just manages content, just sits there and wait for you to provide with apps for it and then you can have your front end engine if you want. So, basically when you talk about decoupled CMS, it is something where we know what a front end is going to be. So, when we have decided, okay, we are going to put up front end in React. So, that's when you'll be decoupled CMS. When we talk about headless CMS, which means it doesn't have any head, it's not decided, you can have it in any of the forms anymore. So, why do you think headless CMS is getting popularity? So, let's look at the Google Trends. So, if you look at Google Trends in the last 10 years, you will notice that in the year 2015, there has been a trend that is between it for headless CMS. So, why do you think headless CMS? So, who can tell me that why do you think headless CMS will be beneficial for us? Yes? My thought for headless CMS is that because now the platform is not the best of web. Now, people are moving from web, then to mobile devices, Android devices, DAB and everything. So, when you are developing a monthly-quad platform, you cannot have like multiple back-end services for everything. You couldn't have one back-end and multiple front-end. That is one of the reasons for being the headless CMS is getting popularity. Absolutely. Thank you very much. So, that is such a nice factor. I am not here just to talk. So, let's talk together. We are here to learn something and it's ok if you are wrong. I am sure this is always the first time for everyone to learn. So, it's ok. You can give wrong answers. It's completely fine. So, basically it talks about separation of concerns. It allows you to use JavaScript UI libraries like JAG or Vue or Angular to build your teams. And these libraries allow you to create a visual user experience and help deliver a better performance. So, first is the flexibility you can have your front-end in JAG or Vue. So, it basically opens the world of new possibilities. It also talks about security. Why do you think headless CMS front-end will be secure? The thing is that when you have your JavaScript application, you are accessing all of the content wirelessly which means that you won't be able to get a world of your data because for them it's just pure HTML and CSS with the data. It's also future proof. So, for example, you built an application with the headless CMS today and you built it in React. Tomorrow you have a better requirement and client wants to move on a different architecture altogether. You can actually make that. Easy customization in the front-end which means back-end developer and front-end developers can work separately. So, the front-end developer can say, oh, we have got this particular data you provide to me in form of JSON and I can just use that in the front-end application. They won't actually have to wait. Unlike in WordPress, you know that you have PHP, you have JavaScript, you have X-ray, you have all the optical. And, definitely, it will be possible by the pretty as well. So, the benefits of using headless CMS versus performance with headless CMS, we can use model libraries, you have security and scalability, and future proof as well. So, if you built a front-end in JavaScript, how do you think it will affect our site's SEO? So, you guys have worked with React, right? I would say many hands who have worked with React. So, how can you work with createData? One, two, three, four, nice, okay? So, in createData, what happens? When you build an application, we take the entire front-end and we put it inside of a div with an ideal proof. However, have you ever tried checking the page source of that? What do you get inside of it? It's just empty, which means that all of the execution, all of the rendering happens in the browser when the JavaScript is executed. The page comes empty from the server. So, that is not really good. So, how do we actually solve that? So, let's talk about that. Now, if you know how indexing works on a browser-powered application with Google, okay? So, that's something new for me to talk about. So, Google basically has two ways of indexing. So, in the first wave, it draws the page, it touches the SSR content, and it's going to go ahead do the indexing of your page whenever you have a person like an S-changer. And then again, it's going to rerun the indexing and just new links to the product. So, that's the first way of indexing. However, for JavaScript-powered application, because you have an empty S-changer and all of the rendering happens in the front-end, the rendering takes place when the resource are available. So, when the Google bots come in and they find that the S-changer is empty, so they wait for some time. They will wait for some rendering to happen when the elements are created with JavaScript. However, if it finds that those elements are not available, it's going to go off, and it's going to return back after some time to do the indexing again. So, for JavaScript-powered applications, the indexing can happen whenever the Google bot resources are available, they're strong. So, how long do you think the second wave of indexing happens? So, I'm going to give you some of the choices. I would say that the indexing happens after a few seconds. That's the first option. The second option is it happens after one day and third is it happens after one week. So, how many of you say the second wave of indexing happens in a few seconds? Let's do that. Okay, 1, 2, 3, 4, 5, nice. After one day, after one week. So, what about the rest of the group? When do you think indexing will happen? Never. Okay. So, guys, let me tell you. I've played it today. All of the answers are incorrect. Sorry, I want to give away the answer. We don't know. The answer is right here. It says, right in 10 seconds, when the resources becomes available. Because Google bot resources are limited. Okay, so whenever the resources are available, it's gone back. It may come back after a few days or a week or a month. We don't know about that. So, that's why there's a concern that you know what happens to if I build my application with 380, I have. When Google comes in, it doesn't finally find content, it finds empty as well. What do we do about it? So, we here to discuss about that. So, Google bot has a resource available to process the content. We discuss this. So, now there's something called server-side rendering and client-side rendering. So, let's say, what should we have to do? You have a PHP code, a database project. All of that happens in PHP server. And then you access the URL the first time. That you have the page load. At that time, you will have an HTML that is generated by the server with all of the code, all of the data. So, Google is happy that you got the HTML and you got the content. The second time, of course on the home page you will have links like about and contact us. So, let's say the user hits the second link. So, second URL, again the same process happens. And you got the third time also. So, this is not really good. Why? Because every time the user hits the URL, what happens? The page re-loads. So, not a very good experience because all of the DOMs are removed and then a fresh page is loaded which means you have to access the server again, get all the data so the experience is not really good. Now, I am sure that you must have seen mobile apps which are native apps. What happens in native apps? You click it and you straight away it works. So, after we achieve that kind of experience. Now, this is called server-side rendering. Now, there is something called client-side rendering. So, we came up with something called client-side rendering where all of the code and the logic happens inside the server. You have inside the server you have to use the user hits the URL it sends an empty HTML and then example you are using a react then it is going to execute that react, it is going to download the JavaScript, execute react, build all of the elements and then the page will be shown. And if there is some data that you want to fetch from REST API etc., you can access the API and get the data and show that content to the users. It doesn't go to the server. So, the request doesn't go to the server. You have some client-side rendering which means that you have all of the content access with the help of REST API and it will be shown. So, the server will not take it for other request. So, it feels like a native application because user hits the URL and straight into it there is no page reload that happens. This is what is called client-side rendering. So, let's do a recap. Now, in server-side rendering page is viewable. So, when the page loads it's viewable because you already have a channel coming from the server. Then the JavaScript is loaded this is definitely how it happens in WordPress. And then the page becomes viewable and intractable. So, ensure user can actually see what the content. Many cannot interact with it. Many cannot have those JavaScript interactions. But at least you can see in the page. So, that's good for us. And then you have an antibody. Then the JavaScript is loaded and then finally it becomes the page because viewable is intractable. So, is that good or bad? So, the good part of SSR is the page is viewable and intractable. So, you can actually see the page. So, you will see your content. The bad thing is that on every view request the page gets reloaded. It's not a good experience for the user. So, client-side rendering the good part is that the client can do the navigation just like in any other apps. The bad part is that you have any estimates which is not good for what? SQ. Absolutely. I'm glad you guys are understanding everything. Cutting that may be a good job. Okay. So, what if we can take the best of both worlds? We can combine these two. So, if you want to combine these two what you want to take? You want to take this part? Out of SSR what you want to take out of the SSR? You guys tell me. Which means I'm going to cross all of this out of these two I'm going to build something together where I just take the page viewable and intractable out of SSR and then I take the client-side navigation and this will be called SSR plus CSR. Okay. So, we take the best of both worlds and we build an application with server-side rendering and client-side rendering as well. So, let's see how to do that. So, what we are going to do is that we can have more server where JavaScript can be executed and the estimate pages are built from the server itself. So, when the client sees your application, he will at least hear the business department and then finally we have to choose the client and we do the client-side rendering which means the pages are intractable and also they can connect with the API and get all of the data. Let's talk about building JavaScript teams with WordPress. So, now since we understand that using JavaScript on the front-end is going to give us performance, capability accessibility and ease of building, let's talk about why do we use JavaScript team for WordPress? Why is it WordPress? So, first thing is that using modern tasks and engaging experience as we discussed with CSR, rendering happens to be utilized as a server. So, it feels like a native app just for the Java code and JavaScript to your HTTP can be different to maintain. Which means that you want to build the JavaScript application if you want to keep everything in PHP then it will be different to manage both of them together. So, if we separate them like I will not make it complete in JavaScript then it will be easy for us to make it. Now, what is the problem using JavaScript teams? So, let's say we have a KSP server which is our charred schedule of WordPress. We have KSP team, we have HTML and then browser can render your SQL as JavaScript. But if I want to run JavaScript team into KSP server, can KSP server run JavaScript? No, right? So, which means just to keep an HTML and some JavaScript file we have to wait for the browser to execute it. So, what we can do is we can have Node.js server which is able to run JavaScript and then we can have the content already available and then we can have the client head with whatever the client side rendering that we spoke about. Now, so everything is good we all understand we can do server side rendering and have a better experience because usually we will be able to see the content but how do they actually do it? So, if you had to do it yourself this is all the code you would like. Again, there is more to it but I am not sure what to explain everything over here this is just to let you know that if you want to do it yourself, this is how you do it in real. So, what is the other way if I don't want to write all of the codes? Well, the other way is that we can use JavaScript frameworks. So, can some of you tell me about some JavaScript frameworks names? So, one I do know is Gatsby. How many of you guys have ordered Gatsby? Okay, any of you? Any other frameworks? Sorry? Electron? Okay. Next year's, next year's? Okay, great. What else? Brassel? What else? Guys, we have friend Kitty. What are you going to talk about? Okay. All right. So, choice the name of the JavaScript framework. Brassel is your Gatsby. Now, let's understand which one to take for. Because right now we have so many options available to build our things, choose our framework but how do we know what to choose it from? There is so much to learn in this world, right? But sometimes we are not able to decide what is going to be beneficial for us. So, that's why we have to talk about Gatsby to choose the framework that is best suitable for this. So, again, Gatsby is a reactor framework. It already provides SSR out of the box which means you don't have to write out what the server-side is already handled by the port. Then it's a static-side generator. Who knows what a static-side generator is? Okay. So, it seems that a lot of these concepts are new to you guys which means that I've got a lot of work to do. That's great. So, a static-side generator basically means that all of your files are generated statically at the build time and they are already available when the user access your particular environment. So, if the user access your website the things are already generated beforehand at the build time. So, it is good because the things are already available and it's going to be ready fast. News for general use works with if you know GraphQL. How many of you know GraphQL? Okay, one? You know GraphQL? Awesome. Works. Okay. So, I mean it's not good right then if you don't know GraphQL you won't be able to work with Gatsby but GraphQL is really good if you learn it there are a lot of things that you can do with it. Then some of you guys said next year, so yes, that's on the list again, reactor framework offer SSR out of the box it's also serverless. Serverless means that server doesn't mean that it doesn't have any server it's just that you don't have to manage your server on your own you are going to use somebody else's server which is going to be useful because if there is not a lot of traffic on your site then you don't need to spend too much on that it will scale automatically. So, if there is more traffic there are going to be more servers available to handle that traffic. So, you don't have to worry about anything to handle this. You will use another connection to the rest of the app then you have Friendly which you are going to talk about today it's also a reactor framework offer SSR out of the box ready for serverless as well focus on WordPress and also WordPress out of the box then if you want to work with Vue, then you can use NUX as well So, let's talk about Friendly So, quantity again is the framework that we provide is the open source framework rather the wordless teams based on react here. So, all of the frameworks that we saw quantity is the one who is completely focused on wordless. If you want to work where in the reacting in wordless you can use quantity and the best part is that it is very easy to use. It does not require the special configuration or special setup you do not really having a lot of technical knowledge to use it. If you want to have your website in react and if you want to give your users a native like experience, fast experience all you have to do is just store it with couple of commands and then you can just mention your wordless site URL which will be better than address and then you automatically fetch all of the content using the rest of the API. So, with minimal coding required you can use the framework. So, how does it actually work? So, you have WordPress which is your bottom editor at the back end. It accesses the data with the help of rest API and in the front end you have your react team which runs the Node.js server. And then it produces the actionable content and will be supported later on it should be coming in future as well. So, how does SSI and CSI work in practically? So, let us take a look to play the video. Okay, so you have front end and let us say that this is a user and they access the first URL it goes and access the data from the back end using server-side front end it accesses the data and produces that and sends that in the browser. The second time when the user gets the new URL it will go out to the client-side front end and just get all of the data using the rest of the API on the back end. If you use WordPress dashboard for bottom management which means all we are going to do is just use our WordPress as a bottom management system. All of those questions will happen in react within front end. Auto-update on the content on the front end will not happen to the user. So, one of the key differences between Gatsby and front end is that when you are using Gatsby and if you update some content like if you add a new post you have to go and create it. Which however in front end even if you add a new post to WordPress dashboard it will automatically be updated in the front end. So, when you have used Node.js server so like we discussed that we can run JavaScript with Node.js server so that's what it uses and you should be capable of generating AMP pages with the same React 4 and CSS. So, you use it, it's the first React framework 100% focused on WordPress. It was in that development as we discussed extensibility. Why extensibility? Because of course you might guys might be thinking that I've got lots of plugins in WordPress. So, how does that work in front end? So, with front end you will have some of the packages available and you can also build your own packages. So, if some of the features are not supported like from clients which are not supported you can build your own packages in front end as well just for that. Of course, it's very, very technically it also offers code splitting. So, who knows what code splitting is? Code splitting is basically when you are actually batching JavaScript for first time you do not affect the complete JavaScript you can score in the JavaScript in terms that is actually a code splitting. Okay, great. Let's clap for Kyle. Guys, I want more hands, I want more people to say answer it's okay, I guess one corrects completely fine. Okay, so, when you use this webpack to do the code splitting like I said code splitting means that you may not necessarily want to load all of the codes. For example, on home page you only want a certain amount of code for your application to work you don't want to load everything and make the package size last year because more package size is going to take more time to load. So, that's what it does out of the box. That's what you have to handle all of this on your own. 100% Lighthouse code. Lighthouse code is what you know, right? If you place your hand to that, Lighthouse code? You don't know. You don't know? Okay. So, Lighthouse is basically if you go to your Chrome browser if you do an inspect element and hit on the application or network an application I think and audit, sorry. If you hit on audit then you can click on plan audits and actually does the auditing of your site tells you what is your site's performance, what is the payload speed and what are the things you need to improve for accessibility and things like that. So, you can achieve up to 100% Lighthouse code with Funtory basically having a past website. I've built a Funtory 2019 team so there are many different teams available. There's a mask team that it comes with many super water you can use and I've also created a team package for 2019 team. You can just install it and it's ready to use. You guys know about the 2019 meeting right on WordPress, right? So, that's part of that. You can have that in there. So, it's going to be super fast. I've also built a contact form that is packaged. So, you must be wondering what happens to my contact forms what if I have a query form or a contact form that I want to use how that works in the app. Like I said, the quantity is extensible. You can instantiate it by creating packages for the things that you want it to support. So, I've created a package for Funtory 2019 7 which you can install it and whenever you create a form in your WordPress dashboard, that form will automatically be showing here on Funtory. You just have to mention the page where you want that form to be listed. How do you think Google Formers will work? What does that look like? Okay, you're suggesting? Okay. You're suggesting? So, what does Google Formers do? What do you think you're going to do? I think if I mention the Juarez and everything they give hours of jobs listed. But you have Google Formers also, right? How do you do that? So, at RTM, we have been doing something called a WGD coupled. So, this is not Funtory, by the way. It is used in next year's framework. And it is used in GraphQL to access the data using the GraphQL plugin. And you can see that the Juarez store is in react. And one of the best things is that it's also worst offline. So, this is going to give you a good user experience because, let's say, you go on an airplane because some products are not shopping. And then, even if you go offline, most of you are going to select a product, just keep them ready. And if you're going to spend a lot of time you can just place them on. That's the best time for you, isn't it? Okay? Great. If you can check it out, it will be in this framework. Okay. Now, we're going to talk about installation instead of I don't know, I thought we'd write it down. So, if you guys want to go along, I'm assuming you have more layers already installed. If you don't have it installed, I think you can install it now. You can just look at how things are done. It's pretty simple to use. It just comes with the months. Also, if you have WordPress installed, if you don't have WordPress installed, it's completely fine. If you have the WordPress site posted somewhere, you just keep the Juarez for that WordPress. Boom. So, let's start. So, you can go to primitive.org. There's a documentation available as well. I'll set it up. So, the first thing you'll do is run this command. For nvx, primitive, create... I'll just check it by internet. So, it's going to install the primitive CLI and also create a primitive application. And the name of that application is going to be myApp. And you just go into that particular app. So, we just try to multiple the months together. Once that is done, then we're going to open that into a browser. Some of the settings are available as well. So, you have the settings page where you can mention your site URL. Here it says test.punitive.io. So, here you can mention your own site URL. And then let this WJSON be there. The way it is, because that is to access your data with the help of rest in here. It's just one command. So, you can say it's installing all of the dependencies and it's doing the mass things. The mass things comes by default. If you would like to learn WordPress, you can go to forintech.com. So, this is a website that I'm waiting. And here you have different graphs available. You have some free courses if you want to learn the app. If you want to learn Gutenberg or Laravel, it does that thing. So, I kind of give all of the lessons absolutely free. And these are all available on the internet as well. So, this is done. So, let's take a look. You have the name of the package which is my app. And you can run these scripts. So, how I can do is just do quantity. Just do empty front-end. And here you have the development servers for us where our JavaScript application will be hosted. So, it will be hosted on those 3000. And here you will be able to see your WordPress content in React using Bundy. So, if you go to Bundy.NET, this is the place where you will mention your site URL. So, for example, if my site URL is xbudgy.com, my WordPress site, I will just go into here. And these are going to be your pages. WordPress pages. So, let's say you have a home page. You have nature, vocabulary. You have travel. You have about this. So, just need to mention your WordPress site URL over here. And automatically, you want to search all of the content. So, you can see that this is the WordPress content coming from the rest API. So, you have home page, you have nature. You have travel. So, all of this. Okay, so let's take a look what's happening over here. So, this is the settings. You can change the title of your site. So, you can put, let's say, campoche, React workshop. And if you save it, and if you check over here, you can see the title has changed now. Anyone's got their WordPress website? What's it somewhere? You can use it. You want to show it. Especially the content from there. Anyone wants to try? Their WordPress website, where they have blocks? Someone is raising hand? Yes. Okay. Okay. What's the URL? I'll go over here as you know. What is it? I'll check it. I'll check it. Okay. Okay. Yes. Yes. Sorry. Okay. I'll go over here as you know. Now, let's try that first. I may have to restart the server. Is this the one? Yeah. So, guys, can you see? All I have to do is just change the site URL. It's all ready. So, this is a mass theme which is pre-built. And you can see that it has got the title. It's got when it was published. And it's got the content. You click on it. It takes you to that single page as well. And it's got the slides also. And it's showing the slides already. Now, I don't have to do anything. All I have to do is just put my WordPress site URL. And I can have my React applications in the class. Is that good? Yes. Great. But now, because I feel that's pretty boring to explain the code and all of that. I think we can keep that later for later. I'm sure you're going to be interested in how to host this site. We all know about how to host my WordPress site. But how to host this particular site? So, the best part is that quantity has recently written some documentation. I will host it on Z now. So, we'll just come into that. So, all we have to do is just sign up on Z.co. I'm going to sign up, so I'm going to do it. And then, you just need to create a file called now.json to the root of your project. This is the configuration file. So, now.json on the space that you have. And you can just name this whatever you want to give. So, this will be the name that it is showing in the domain. And that's it. Then you need to log in with your npm account. So, I'm just going to stop the server for now. I'll just log in. Ask you for your email. And then, it sends you an email for verification. Just to ensure that it's new and not someone else is trying to host it on your behalf. Just go to your email and confirm that it's you. You can see I've received an email over here. I'm just going to verify it. The only way to verify it over here, automatically, it's going to give a message that it's been verified. So, country is verified. Let's wait for it. Email address confirmed. And now you can see ready authentication token and everything is done. All I have to do is just run one simple command and it's deployed. npm is now. And that's it. So, you can see that's the name I've given. Quantity word can. That's the name I've given over here. I guess as well. So, now it's been uploaded. So, what it's going to do is it's going to build all of the JavaScript for you. So, all of the files are going to be built. And then it's going to push back the server. Then it's going to give you a URL that your website will be available. That can be accessed publicly. You can either choose the way you want. If you want, if you have a particular domain, you can also use that domain. Of course, there will be some charts for it. But you can use your own domain as well. So, this is my account, basically. It's on sale. While you guys have uploaded, I'm just going to take you through this particular directory as to what is there inside of it. So, the main thing is your packages. This is the directory where your local packages reside. And no module is the directory where your other packages reside. So, you have this mask thing. So, this is my thing, basically. Now, it has also got a package called JSON with all of the information here. And it is dependent on this National Event to React and how the dependency is there. If you go to source, this is your main file. So, how many queries are comfortable with React? Just one, two, three. Okay. The rest of you have no problem with React. You have at least a basic idea of what React is. Yeah. So, React is basically a JavaScript library. And it is super fast. The reason why it's fast is because it uses a constant called virtual DOM. Now, you know that DOM query is quite expensive. So, what it does is instead of doing a direct DOM query, it creates two copies of the DOM, which are called a virtual DOM. Virtual DOM is nothing but it's an object, a JavaScript object. And whenever there's a change in the UI, for example, if you click a button and some content changes on the website, then it's going to go ahead and compare that those changes between those two copies. So, it's not going to compare to the real DOM. If it finds there's a change, it's going to go ahead and update the real DOM. Otherwise, it won't update it. So, if it wants to do a direct DOM query, it makes it really fast. So, in fact, you have, like, components. So, these are your components. So, you have this mass theme. It takes some configuration, like the name of the package, the roots. So, if you create a React app, you work for it. You already know that it has a different idea of root where the injects are mounted. So, this is that root particularly. And you can have multiple packages being inserted here. Then you have the state. So, people who work with React, they know that there's something called state available. Now, state allows you to manage the data within your application or components. So, priority has its own state that you can use between multiple components. And then again, you have got some configuration, like theme, manual, etc. I hope our product is already applied after the point now. So, if you open your check-ins, and this URL is rather active, so anyone wants to check-in can do that. And your side is like, oh, it's so easy for people to regret. Okay, great. Let's look at the performance. So, this is what I was talking about there. So, this is basically your Lighthouse. Or you have Lighthouse available somewhere else. Like, you have to go on a separate site to check for the order. So, who is now provided that input in your inspector element? Order tab. If you just do the orders. Lighthouse is coming up. Just getting all the information is checking what the best practice is. You have accessibility. You have SEO. So, I just want to check all of that for you. So, you guys are aware that if you download the website and it takes more than three seconds to load, what do you do? You just leave that website. You try to go on another website. So, this is why performance matters. Why? We all are here for this. We want a website to be lost. And if, unless you've had experience, if you've had any experience, why use this? Okay, let it go for now. So, let's continue with the... Then we have this library. So, this is the library available which is called HTML to React. What it does is, because the content of the WordPress is coming in HTML, meaning to convert it to React. So, what HTML to React is going to do is it's going to convert that into React. For example, you have a processor available. So, whenever it finds an image, it's going to convert that into an image to React to performance. Okay, I think it's not going to be able to just do it again. Okay, then we have particular components available here. So, this is the theme that we are using. So, if I go to the index.js. Okay. So, this is our theme, basically. You've got all of the data that is being shown over here. So, if I go to also, you have state available inside of the country. So, you can check. Can't take out state. So, inside of the state, you have different things available. For example, you have a router. So, depending on which page you have on this link will change. So, this theme automatically updates your URL. If you want to splash it out, then this will probably be splashed out. Then you have the source where again all of this data is available. You have post available. You can see all of this content is coming from the rest area. And you don't have to worry about the rest area. You just have to mention your site URL and country is going to all of the things for you. Which is accessing the data and work as data with the rest area. So, you can see, you have all of it here. You have hate, hatred, media, meta. All of this is in no case a format. Now, it's in another format. And you just look it through here with all of that information. Where you put all of the meta information. And this is something it's using from the configuration that you have defined earlier. So, this number you have defined all of these details here in the settings. So, you just pick up that data from there. If you change the information here, it will be dynamically changing over here as well. What styles? How do you think styles will be applied in your current application? The questions will come to your mind. Can I use the normal styles or CSS? How are you going to work this? Well, the answer is yes, you can. However, the productivity doesn't have a different way. Gravity uses something more emotional. So, what it does is it goes and combines everything into one style and puts style into the next section. And it goes ahead and displays the styles that have been used. So, because we don't want to un-explicit all the styles that have not been used. So, it does a lot of performance management there. So, here you have something called global variables. So, if you have the styles that you want it to be applied globally, you can just add it here. And then, if you use a concept called CSS and JS, how do you feel about CSS and JS? What is it? How do you define it? CSS and JS is where... What's your name? Umar. Umar. You are able to Ah, use CSS In JS object. Okay. In curly bridges. And it's not exactly like CSS, but, um, it does work like that. So, what's the thing about that? And then you have to figure out have I used this classic somewhere else and then you have a prefix of namespace before that to make sure it is in class. I have it with most of you who are development. She is the best basically would allow you to add CSS to that particular element only so it doesn't leak out of its scope. So if I will show you something here. Look at this. For example I have head container element. So head container is basically applied here. What this will do is basically write in style like this. That will only be applied to that particular element. It's not going to be applied anywhere else. So it's going to go that way. And once you use CSS and JS. It automatically takes you to the performance as well. You can't handle that. Let's do the order here. Okay so that style. What about low-ranking? How do you think that will work? What else? We have to build a team. We have to use our Google Analytics plugins. How do we do that? We have to react to the front end. We have to think about it. So my front end isn't react. Everything is there in the front end. So where do you think you will put all this Google Analytics code? How many of you say that in the WordPress site, How many of you say that? How many of you say that it will be going there in JavaScript application? Also, that's what I'm trying to say. So your Google Analytics code is going to go over here somewhere. Wherever you want to put the header, for example. So because Analytics is going to happen here. When your front end is here, it's going to happen now. So if your front end is here, it's going to happen now. So whatever you want to do with the front end, you have to put it over here. Also, I think this is not looking great right now because it's not working. So we need to do that here. Also, do you guys have any questions? No questions? No. One question. Particle. This means kind of, how do you say that? Actually, no. I would say that because you're just supposed to provide one site well. But if you have Particle site, there's an option in Particle that you can handle and have Particle sites, something that you should have. But if you want to look for Particle site, probably you can do something like last year, probably something like Gatsby, which allows you to have resources. Any other questions? No. Yes? Yes. Any other questions? A couple of years. So at the moment, we're going to have anything like that. But yes, if we want to go ahead and create some package, we can create a package for that as well. But that thing, just how the network is going to be. Okay guys, thank you very much.