 React, leading your community library for React. How many of you are using React? Yes, for this React phone, right? I'm not going to talk about all the popular single-bed application frameworks. So now we are going to see which component library we need to choose. Which framework we need to choose. Now we are going to see which component library we need to select in React port. I'm a founder of Gecko Tech and I'm an author for four books. I'm writing my fourth book on PrimeNG for Angular applications. Okay, I won't recommend it for Chris. And I'm a trainer as well. I'm a reviewer for a few books. And I open those contributors for prime pages and prime page extensions. That is for JSF. This is about me. Now we will start with the introduction of this Prime React. And what are the features? We are going to do that. And how to use that. And we will see a quick demo as well. Then at the end, we will see what are the new features in Prime React. Actually, I gave a talk on PrimeNG on Angular two months back. I escaped from Chris. Introduction. It is a sibling of prime pages. That is for JSF applications. If you know about Java, if you're from Java background, then you might know about JSF. And it is a sibling for PrimeNG also for Angular applications. It is started recently in 2017, three months back from Prime Tech company. And they are good in common libraries. They are creating common libraries for different technologies, not just for JSF. So they are doing it for Angular or React. And they are planning for Vue.js as well. And this initial version is all about recently on the three weeks back. And there are going to be so many components and many features in the future releases. Why we need to choose this Prime React? First of all, why we need to choose this year's common libraries? We can go with the plain single-page application framework site. But the thing is, if you want to develop large-scale applications, you don't want to develop from scratch, creating the components, custom components, and getting the components from different libraries. Because in React world, most of the components are scattered. I mean, maybe one or two components develop away some community. And they might be focused on particular technologies like rule material design or bootstrap. Or they might be related to a particular area like data table, tree table, and charts. But we don't have all these collection of components in single place. So you are going to get all these things in Prime React. So it's not only about components. There will be so many themes as well. So you can change the themes at any time. And you can get the templates also. As of now, there are around 40 components in this Prime React in the initial release itself. And they are planning for 70 more components, totally. And this is a purely open-source and under mid-license. So you don't have a problem with this license. And there are many customizable themes also. As of now, there are around 18 themes. So you don't need to worry much on these themes, like whether I need to use bootstrap or some other themes. So all these themes are already available. So if you want to use it for different clients, then you can switch that to different themes. So it won't impact your application. And you can get templates also from Prime React. So what are the common features you are going to use? So you can get it from templates. And there is a good community support for this Prime Tech. For JSEF and, I mean, this Prime Pages and PrimeNG. The same thing is applied for this Prime React also. And this showcase is very good. You can find all the documentation, examples. And if you want to develop any application, you can get it from the showcase. So you can implement them. So these are the advantages of Prime React compared to other libraries. Where Prime React stands in React World. Actually, all these components are pure native components. So you're not going to integrate with other external libraries. So you don't need to worry on that. And these are not limited to a particular area. As I mentioned earlier, this is not just for Google Material Design or this is not just for bootstrap. You can use it whatever external libraries you want to use. And this one is optimized for mobile also, not just for desktop. But this Prime React is mainly focused on web-based. It's not like for native, React native. And what are the technologies that you can see in this Prime React? You can find HTML5, CSS3, and SAS technologies. And accessibility support is much required for users. And you can find Google Material Design as well. And for images, I mean, for quick response on the inside of this Prime React, there are image sprites. So instead of using multiple images and making multiple requests, you can create a single image. So you can use it for across the application. So it will improve the performance. And there is support for font awesome icons also. So you can use whatever icons you want to use. And here it is preferred CSS over JS. So JS will take more time for execution and all. So wherever it is possible, CSS is replaced with this JS. And how to use this Prime React? This is very simple to use. Whatever the component you want to use it, just you need to import that particular module. For example, if you want to use data table, you can get it from Prime React data table specific module. So you don't need to import everything. And how you will use this component is just like any other React component. Just like in a HTML component, how you are going to use the same thing will apply here. Here we are using input text component. This is a basic input text. And for this input text, themes will come by default. So there will be one default theme. So you don't need to worry about the themes. For example, over on change and different events, the theme will change. So you don't need to worry on the CSS side. This is one of the templates from Prime React, the ultimate template. So if you want to have some common use cases, then you can go to the templates, list of the templates, and you can choose which one is right for you. And so there are so many component libraries, but at the same time we need to run your application without much configuration. So you should run within two minutes. You don't need to configure all the things. The same thing applies for Angular or whatever single-based applications. So even in React.js, especially for this Prime React, there is a CRA project. So you can get it from that GitHub repository. And there you can find one simple component, how to use that. And after that you can add all your components and you can develop your project. And we will go to the demo. Here I'm going to show you about GitHub Viewer. So if you want to see the GitHub user profile information and what are the GitHub repositories under your account, and if you want to add nodes for your account, how we are going to do. So this one we developed with this React and Prime React. We will go into this demo. Here we are going to access GitHub API. So for this we are using Axios. We are going to access GitHub API. Within this we are going to access user information and deposit information. So initially we are going to get this information based on the GitHub username. And we are going to provide through React route. And after that we need to create components. Initially we will start with user profile. So in this case I want to lay out all the user information in particular panel. So here I'm going to use field set. This is just like any other React component. There is no much consideration on this. So you just need to know what are the attributes you are going to provide for the component. So in this case for the title we are going to use this and toggleable. I want to expand and collapse. If you don't want to see the user information you can collapse that. And we are going to display all the information like username and email and who are the followers. So the entire information you can see with the help of this field set. And then how to get this repost. So here we are going to get all the repo links and the description of your repository. For this we are going to use data list component. So you will get list of all repositories with the help of value attribute. And with an item template you are going to define how you want to customize your display. I mean each repository. This repo template going to be used here. So here I am going to display the URL of the repository. GitHub repository and the description of that repository. So here we just need to get that repository list and we need to prepare the item template. So then we can design that entire repository information. So there are many other properties also like pagination, filter, all those things. So it depends on your requirement. And after that how to add nodes to your repository. You can add comments and all those things. Here also I am going to use this data list component to display all the list of nodes. So now we are going to see that demo. So if you want to split in particular GitHub account this is not the one. Here we can see that particular repository. On the left hand side you can see all the information like followers and location. So here we are using this field set component. So we can collapse it and expand it. There is a feature from primary act field set. And on the center side you can see the list of repositories. Each one with what are the repositories under this account. I am going to maximize. At the bottom you can find that pagination also. So you can navigate across all your repositories. And the right hand side also you can have nodes. Add all your nodes for that particular repository. So you can find this GitHub information with this GitHub viewer. So this repository is there in GitHub so you can check that. And if you want to add more features you can do that. And the next one is if the component library is good in different ways. We saw that already maturity and flexibility and so many things. So those things are not only enough. It is not enough for that. So we need a good documentation as well and showcase as well for any application framework or component library. Then only it will be used by many developers. And first you should know how to use that. And then only you can recommend any framework or component library. So the good thing about this primary act field is there is a good showcase. So you can see all the list of components and their features also. This is the same thing for PrimeVers and PrimeNG. There is a very good documentation. And so you can go to that in the PrimeVers website and you can find this showcase. I will just go to this showcase. So here you can find out all the list of categorized components input components and data components, charts. So this is a good thing about this PrimeReact. PrimeReact is initial stage only. It started two months back only. So you might get doubt like it's very new and how we are going to use that. But there is a good background from PrimeTech. There is a huge success in PrimeVers and PrimeNG. So they developed around 100 components in each of those libraries. So they are going to apply the same rule for this PrimeReact also. So their philosophy is same. So they are going to focus on the components. They already have all these themes and templates and everything in all these libraries. The only focus is on creating the components. And they already have some prototype and what are the components we need to develop. The same thing applies here also. And based on the community support also, they are going to create new components and new features also. And the next rule is there is more focus on data iteration components like data table, free table. So because most of the enterprise applications are using data components. And then apart from that, not only these components, there is a more focus on accessibility also because it is recommended by many clients. And there is a RTL support also, right to left support. So these are the future plans for the next release. And it is going to be on the next week actually. So at the end they are planning for 70 plus components. So you can go and look into that and then it is better to use for enterprise. Instead of going to the multiple libraries in ReactVolume, you can choose one and then you can implement your applications. Any questions? For React, do you want to focus? React, in React there are a few component libraries also like MetaView, React Bootstrap and React Toolbox. Actually, they existed for a long time. The thing is they mainly focus on a few things. They are limited to a particular area only. Either it will be on data components only, or either related to Bootstrap or material design. But they are not covering all the things. But if you take this prime React, it will be applied for all kinds of applications. That is the main advantage. When you look at the source of the components, are there properly tested in unit tests? Is there a test on it or not? So if you want to play around, do you know when you break them? Yeah. These components are well tested because they already work on these component libraries from seven years. So they are implementing the same thing for prime React also. So it's not a new company actually. They are working from long time. That wasn't exactly my question. So it's an open source line and so the source is available. When you look at the source, are the unit tests there or not? Yeah. I don't know as well as answer. Unit test? Yeah. It is done from the prime tech company but it is not available for the outside actually. I mean, for the community. They are testing all those things. Okay, thanks. So I think it was there before for all the kind of technologies. Is it exactly the same functionalities for React and what was for, you know, GSF? Yeah. So is it exactly the same components that you have or is it the one specific framework? Because all those components are chosen by the community actually. What are the frequently used components? Those are developing prime pages and prime ng. So the same component is going to be developed here also. At the same time, based on the community's request, new component is going to be created. So it's up to both. Okay, thank you.