PrimeReact Crash Course 2022 | React JS Libraries | React Tutorial 2022

hey guys welcome back this is naveen from ui brains technologies so last few videos of our reactions so i have explained about reactions concepts and apps and projects so the important part is for all these react this example we have discussed as of now we were using bootstrap as a front-end library okay when you closely observe i will be writing the front-end design by using a bootstrap library because which is very common for any angular view or react but now it's time to understand the specific library which is only given for the reactions of course there are a lot of libraries which is which are given for developing only react.js applications okay those are the front-end libraries which only use it for react.js application which is like uh prime react and material ui and design uh semantic ui like lot of other libraries are there so going forward we will also have a look at all the different libraries but now in this video i'm going to explain you uh one very important react.js library that is prime reactor so prime react is a subsidiary of prime faces so when prime faces was started they have given a front-end library for java technology so which is prime faces use it for java server faces jsf latter they have given three different set of libraries for various single page application front-end libraries those are like angular react and view so they have provided different set of libraries for angular is prime ng and for vue.js they have given prime view and for react gs they have given prime react so now in this video we are going to understand a prime react so in the entire video what is my plan is what is prime react what are all the important concepts of prime react and its components overview and we'll just have a look how the components looks like and also how to configure those primary ad components with our react.js application and also we will discuss few examples and applications which we can implement using react.js concepts with prime react library so now let's get started so now this is the official website for prime faces so prime faces.org slash prime react so here you can see all its advantages and its important features as given on the front end page so which is having template support and which is having 80 plus ui components like buttons sliders uh data tables and image gallery like multiple components as given and it's prime blocks it's like the margins paddings grid system and flex boxes and all this and it also have its own icon library so they are having 200 plus icons and they also given some css utilities for changing the styles and colors of your entire webpage and they also provided and a tool for team design so how can you design your themes for your projects and this is all about the next generation react.js ui library okay so this is a home page and here uh there are a lot of components it has given you can just have a look at the showcases see see uh this is the form fields you can easily understand the form fields and there are some radio buttons and this is for displaying a cards so cards with image and its text and the button and we also have the slider and we also have few other contact cards and we have chats and we have tabs and we also have the spin uh the progress bars and we have a switch and we have a uh group buff buttons and we also have nice menu items with the tree kind of menu items and we all we also have the calendar and see this is a nice data table with all the filters and sorting and all and we also have its blocks it's like a grid system flexbox and all the concepts and we also have a theme design so which color you want and you can just configure uh out of the box and so that all these customized colors will get implement for your application and they also given the pre-built templates so which will be helpful for you to develop any complex application using react.js okay and these are all the companies who are already using uh prime react so like intel uh bmw ebay ford and amazon american express and all okay and these are all the features okay which is having a great community of uh developers of prime react and which is having mobile support and which also support the typescript okay so this is all about the primary act if you want to see the in detail components you can just click on components and here they explain how to set up a primary act and if you drag to here they have explained about the components like form components calendar okay cascade select and check boxes and chips okay and there are some color pickers and drop downs there are some drop downs editor okay you can have editor and the input groups just like your bootstrap input groups and which is having like input text box numbers and number fields okay key filters list boxes okay it's like a list of items and all these are all belongs to the form components and buttons they have given a large collection of buttons like secondary such as info warning just like your bootstrap buttons and we also have text buttons outline buttons rounded buttons with icons and all and it also supports the very important formic library which is specially used for form validations of reactions which is inbuilt for the primary act okay and which also provides lot of data components for example is a data table yeah this is the data table for search selection and everything okay and we also have some panels like accordions okay and some list of cards and some dividers for text divider and the field sets okay and also panels splitters cold panel tab views you can go switch between the tabs and toolbars okay these are the toolbars okay and also we have confirmed dialog boxes yeah this is the confirmation dialog box and we also have a side sidebar's tool tips okay it's like you can keep a hover and you can find the tool tips and you have file upload functionality okay and some menu items like tab menu menu bar okay and also which is provided great support for chats so you have to add a you know interesting chats here and we have pie chart dog nut and bar chart line chat like lot of chats inbuilt and we have media components like a carousel gallery okay so image galleries okay and some miscellaneous like avatar badges block ui skeleton and captcha which is also inbuilt here okay so like that which is i can prefer this because which is having a lot more components when compared to regular bootstrap so and which is specifically designed only for react-based base applications okay so now it's time to start with how to create a project and how to configure this library with your reactors application so now let's start so now to create a react js project so what i do is i will select a folder okay so this is my temporary folder i regularly use for youtube videos uh here i have to create a project so generally how you create a project is you have to just create a regular react this projects so that will be npx create react app and your application name so my application name will be um prime react crash course okay that's my application name so let me create this application exactly at this particular location so i'll copy this stem i open a command line in this i switch to that address so i colon now here i'm going to paste this particular command and just press enter okay so this will create a regular react this project and once it is created then i'll tell you how to configure a prime reacts with your regular reactors now the project has created for us so now what i'm going to do is i'll go inside the folder that is my folder is here so i'll copy the path and i'm going to load to the editor so i'll paste it and um crash codes okay okay okay all right now it is loading i think first time right so it takes some time um okay so once it is loaded so to create i mean to how can we configure the prime react with your react.js application is very simple generally when we are installing bootstraps we have to install bootstrap and we'll configure right same like that we have to install the prime react specific library so this is the uh page you can easily understand just click on getting started so where you have two things prime react and prime icon so prime react is the basic components of prime react and it also provides some icons library that is prime icons along with these two there is one separate library which is given called prime flex so which is inside here you can go with prime flex version 3 that's a new version so that is prime flex here so prime flex generally we they have categorized it they have given a separate category for margins and grid system and flex boxes so for all this they have given a separate set of library that is called prime flex okay so you have to install a prime flex using this command so i brought all the commands together that is primary act prime icons and primeplex okay so this the these three we have to install first so i i have loaded the project okay now we have to install these three so instead of installing i mean instead of executing these three commands what you have to do is npm install all together you right here okay prime icons and also the prime flex okay so if you write like this all the three gets installed in one shot okay so just copy this path go here and i go to terminal and i say paste enter so you must have proper internet connection for downloading all these libraries so this will this doesn't take much time which will install uh i mean which will download very in very less time yeah all these things has been installed for us okay after you would have done with the installation the next step will be you have to configure a set of css files for styles and all okay that you can find here only see yeah these are the style sheets so first one prime react dot min dot css that is required and prime icon dot cs is required on top of that there is one theme dot css you have to add so which supports lot of themes uh libraries for us like blue theme bootstrap dark theme like that you can find them here okay this is blue theme purple theme uh and indigo d purple okay tile wind so like a lot of uh themes it is supporting so you can choose any one of the theme so i just generally use this regular theme called uh not lara light i'm gonna use uh bushra for light blue theme okay this one okay so i'm gonna add not a lot of light i just add this okay so now i just say import prime reacts yes this one okay so where do we need to add these things is very simple you go inside src folder in that you can find index.js so here you have to add all the files of css so prime reacts configuration okay here so i'll just simply copy all this and i'll paste here okay so make sure you have one theme one core css one icons and your flex so this is for icons and this is for flex okay so that's it you are completely done with the setup of prime reactor okay so meanwhile let me start the application so npm start is a command to start your regular reactors application so let's see how it works now i am going to open a browser so it is still starting okay it is started yeah this is the regular uh react.js front-end page right so this is coming from app.js file okay so now what my plan is i close this i'll go to app.js and here i'll delete the header tag okay and also delete the svg and let's make a proper functional component of react.js so import reacts from react and then you have to say let's app is equal to a regular arrow function okay ah that's fine and i say here h2 app component okay so now when you see here you get the app component okay and here this app component is add up with all the regulars it is added with styles so when you go inside app.css we have predefined styles i don't need any of these styles it is like this okay so that's fine and also in your index.css it was using some other font family i don't want to use any of this font family i'm gonna use my own font family okay so for that regularly what we are going to do is we'll go with google fonts and in this we can find you're looking for ubuntu font so i can find the import statement so i'll just get the import i go to my css i'll add the import statement here okay and after that you need to add a font family so let's copy the font family and add a font family here so that automatically it will apply with your ubuntu font super so now we are connected with you have configured with a primary act and also your own font okay because prime react doesn't have its own font so it it allows you to create your own font okay so if you want to identify if you wanted to check is that really configured or not so they have given some simple example uh import dialog and you can just add a dialog okay so let's see how it works so in my app component itself don't worry we are going to understand all different components also but just for time being i'll write like this import dialog so from primary act dialog so i'll add one dialog component so everything is component only so generally when you're using bootstrap you have lot of classes but the tags which you are using is regular html tags only input tag button tag all div tags like regular input tag regular html tags but here it is specifically designed for react js so everything is one component so button is one component slider is one component card is one component like everything is component okay it's a reactions component so like dialog also one reacts this component okay so when i go here okay you okay fine is showing some error cannot resolve okay one small issue here is this dialog is there now so only this you know some javascript specific uh components are using one one more package that is called react transition group okay i think this is not pain installed for us copy yeah so you do one thing you do one thing just say npm install and install that as well react transition group it's a separate package which is internally using for prime react so i think we have to install that as well okay in addition let's say npm install react transition group as well okay so i'll make it here okay so these things you understand by going by going with the you know start developing of your application so now it is successful everything green there is no dialogue okay okay fine uh not sure why not display okay at least we just look for some buttons i think this will be very easy for us right yeah button so button how can we use this it's a button component okay just for time being only just for understanding later we will make a lot of lot of examples imports button components and when i add when i add button okay if i just add a button see you get a button okay and here for this button you have a label so when i add a label let's say hello hello is my label that directly which you want to display on a button so what happens you get hello there and if you want to specify some icons see they have given like this so let me give some icon for this so you get the check icon and if you want to make the check at the right so you can add an extra attribute right so that you get it is on the right side okay and we also have loading button click events and we also have some classes okay for example if i add a class name if i add a class name p button secondary p button secondary just like your bootstrap class so you will be getting a secondary button okay so like that you have lot of other buttons too okay for example see you have other buttons such as info warning and danger just like your bootstrap okay so fine so now we have confirmed that our application of react.js is perfectly configured with prime react okay and also our google font so now it's time to develop few components using reactives concept so now my plan here is i don't want this all this so i go to app.js and i clear all the things not required okay and i can remove it and let me configure the prettier because it will arrange my code properly so prettier just for gold arrangements okay for example if i make something like this and i say it it adjusts properly it does that is prettier okay now on my app component i wanted to create one nice nav bar okay because just for ah understanding what concept we are going to discuss okay so for now but if you see in the list of components there is something called um menu bar okay this menu bar is looks like a navbar okay i have to get this one so how to get the menu bar is like this menu bar so my plan here is let me import menu bar from primary app menu bar and here i say menu bar so if i had a menu bar you will get see the dark color menu bar has come and if you want to change its color if you want to change its color you have a class names so bg blue yeah like this busy blue and some numbers some how much thickness you want you can write see i got the blue color navbar and on this i want to write some text there is something called start as a property you write welcome so that you get welcome inside of it and if you want to add some uh padding and all you have some p p three you get some padding okay and if you want to increase the font and all so you also have h something like text excel no no no yeah text to 4xl like that okay it's quite bigger so let's say like text three excel you get 3xl okay and if you want to have text white just say text white okay but this will be your nav bar so what my plan here is i'll say prime reactive crash course so this my heading is primary crash co that will be your number which also have lot of options will see them later okay so i just have a navbar ready so now it's time to create our own component so the very first component i'm going to explain you is i create new directory called components yeah in this i'm going to create one component that is called counter counter dot jsx okay so let's make a regular component react from react okay and let's counter is equal to a function in this written something that is your jsx let's say h2 counter and here i'll say export default counter okay so now let me configure this counter with the app under my menu bar so let's say counter yeah so up to here you all knows right perfect now here in the counter you if you want to create anything on the design first you have to know the grid system okay so how how small portion of the page you have to occupy for your component you have to uh know the grid system so where is the grid system in this is is a part in the prime plexus so in the prime flex you have uh you know position so that index flex box grid yes when you click on a grid system they have given some classes grid column like call one call to like that if you want to even know see there's a class called grid and in that three columns like this three column layouts okay any of your custom column you can make so they have not given any component for this just given a class so my plan here is in this i'll write one division with a class called grid okay in that i'll give one more division i just need only this uh you know four column layout so what i have to do give call call come on four okay four column layout for example if i write a paragraph with some blur m30 tab let's say is it really occupy for four column yes it occupied for four column uh for example if i say something called just two it occupies only two column layout if i say something called six half of the page it occupies okay so i'll just need for four columns just make four it is like this that's fine now inside of this four column i have to create a nice card in that i'll make the buttons so how can you make a card for card for card you can look inside here you can find a card somewhere if you don't find a card you can search also okay i found a card so for card yeah these are examples of cards okay and for card you have to import this card itself is a component but generally for bootstrap we have it what uh card card header card body this this class has no components just here is everything is a component okay so card and for card you can write some content so let me do that now so import card okay so here i say one card so let me check yes i got one simple card but this card margin you know there are some margin classes also i'll tell you m just like bootstrap there are margin classes here they say m2 m3 see margin has come and we also have some shadow classes shadow file okay you get some eye shadow so you got a nice card okay so inside of this card instead of this card i need to have some content so first thing is h3 some counter i have some counter and also i need to have some buttons how to make the buttons here here you can have a button so like this type of buttons i need so what i have to do actually i have selected this to laura i need to select it to blue okay because this is the theme we are using okay that's why these type of buttons will get okay so button i have to import now what i have to do is import button so primary add button has come now i'll say here button and we learn label right so label they say increment increment so you get the increments button if you want to make different color you can give the class name p button success okay you get the success button and one more i need this is for decrement and this is p button warning okay success and warning if you want to give some space between them there are some classes m r margin right two okay nice and this counter if you want to make a bigger text as we understand here class name text hyphen for excel okay that's fine and if you don't want to have the extra padding just say p zero okay and also just say m margin zero okay that's fine now this counter i mean this okay just keep imagine margin bottom two come on okay let's keep it yeah for this counter i need to make implementation so what i do is and even for the card right you can add some background bg black you know it's like this so i'm just showing you how can you implement react prime react okay fine so up to here is prime tr now the functionality is regular concepts okay so what i do is i create a state let something is equal to use use state in this uh something like count value is zero and now i'll say state and set state okay and this count i want to display here so what i do expression state that count automatically it will display as a 0. now what my plan if i click on increment it should increment the number if i click on decrement it should decrement the number so for that reason i create two functions one increment is equal to a function okay so what this will do is it will sit so set state where dot dot state and the count value will be state dodge count plus 1 simple so for decrements i'll say decrement state dot count minus 1 okay if you don't want to get into negative values it is greater than or equal to 0 then state dot count minus 1 otherwise 0 okay just condition i don't want to go inside negative values okay so now just call these functions let's say on click is equal to increment and here on click is equal to decrements okay now check i refresh yeah increments is working decrement is also working very simple right okay so we made a simple counter example now in the next example will see a forms example so now let us make another example so my plan here is i will comment out this and i go to component i create one component that is called greet greed.jsx i made a mistake uh refactor with greed.jsx okay so let's make the component design import react from react reacts okay so let's greet is equal to a function in this written something that is my jsx let's say h2 great and let's say export default greater okay now i have to configure it in app let's say greater greater okay and now check i have a great so what is this great is i want to explain you a concept of forms and also one interesting component called toast toast message see when successful i get some toast info i get some doors like this okay i want to display this message as well so both forms and this one okay let's see this is interesting um yeah here i'll take a grid with a class what grid okay in that i'll take some column so division with a class called some call 3 i'll just call four in that one card let's say card import from prime card okay okay this card is having the class bg black alpha 20 and let's check okay and some margin m4 okay and you want some shadow not required that's fine inside i want to have one input input field so let's take a form input text i want so input text if you go here just say input you have lot of inputs text is a text box okay how you make input text is like this okay so i say input text from prime input text okay if i add input text you get the text box okay and in the text box i'll say the placeholder i say the placeholder is let's say message okay along with this i need to have nice button so for button what is that capital button component so button component input from react button slash i just add a label something called greater okay and i just need i need some green color button so i'll give the class name uh p button success okay and you have to give some space between them let's see ml margin left to okay that's fine now what my plan is i'm gonna end type some text and i click on grid so that i have to display uh the toast message with the greetings okay so first let me bind this data how do i do i have to create a state so i say let something is equal to use state okay in this in this i'll say uh let's say msg that's empty okay this is my state and set state okay now this message i want to bind to my input you simply have your binders just like regular adjust uh reactors concept so value state dot message okay and say on change you can write a separate function or you can write here only so set state where dot dot state and message will be message will be even targets dot value okay this is a regular binding okay if you want to see the binding you will write a pretag expression a state dot message see it is binded properly okay that's fine next step next step when i click on this button i want to catch this text and display in the toast click on this button is a function so let's greet is equal to a function okay so this will does as of now alert state dot message state dot message okay i have to call this function when i click on my button i go to button on click is equal to great okay when i click on this button it's called this function that's will display an alert as of now so when i click uh refresh i type something and click on this i got some alert with a message i don't want the alert i want to display the toast message toast message this one so how you get a dose this you have to install i mean you have to import it so let's make import statement photos import toast from prime react okay and then you have to create the toast variable where i create somewhere after the card but here but here this toast is looking for a variable that is just a reference so for example let toast is equal to use rep of null okay i refer one variable called toast and that i refer in my tools okay that is just those configuration but when will you display the toast when i click on this button so how you display toasters see they have given like this toast.current.show cvrt and all so i have to make that in here so does that current dot show this element dot show up with cvrt success the successful message and what is the summary and what is the detail summary success message and detail will be my um my greet message so hobby access state dot message okay this will be visible okay now let's check refresh so i say good morning and click on grid okay it got form submitted and the page got refreshed i'll do one thing event i'll say even dot prevents default okay so i can make it now i say good morning and click on grid yes success message good morning and after three seconds it will lapse okay so interesting example on primary app so now we also take few more examples so as of now what we are understand is local state management with components so now let's it's time to get data from server so how can you connect to the backend server fetch data and connect with your application okay so what i do is i'll comment the grids okay and if you want to get data from server you have to install another package npm install axios okay using this you can able to call your you can make the http calls to the backend server so this is supposed to be installed yep it's done yeah so my plan here is uh i am i have um i have a website called random user api it's a free api so here in this random user api you have to make a request for this particular path so that you will be getting a person details like this so i have what my plan is from my react this application my component i have to send a jax request for this part and i should receive the details from the backend and display them and how how you're going to display is there is an interesting call data table it's like a table format okay so this is the data table i want to display all those three cards in this particular table format okay you can make a data table like this which all the fields and columns okay this is not just regular table which contains a lot of dynamic information so we're gonna see this one now okay so for that in components i create one component that is called user list okay so let's say import react from react and i'll say let's use a list is equal to a function okay return something that is jsx let's say h2 user list okay let's say export default user list this is quite simple okay now i also want to create one service for fetching data so let's say services in that i have one javascript that is user user service i say here export class user service in this i say static get all users okay so here i import axios here written axios dot get request with the path so what is the path for me is yeah this one api api question mark results is equal to 50. so if you don't add results you get only one percent data if you add 50 50 percent theta will come okay that way so i have a service now i go to user less here i'll say let some state is equal to u state okay in this i have few variables loading false and users is empty and error message is null okay and i declare a state and set state okay fine and i'll make you use effect hook for fetching data from server so this is a function and an array yep here can we make this is asynchronous so that i can make try catch okay so here let response is equal to average user service dot get all users okay you get the response and this response if i say you know console.log of response response dot data you can see that now what type of response we'll get from the component so i i think i have not connected that oh i have not connected userless okay if i inspect console you have an object results yeah results actually contain the array of data okay let me fetch the results so let something called results is equal to my response on data let me fetch results from the data and this results i have to set it to my users so such state where dot dot state and loading becomes false and uh users will be my results okay and if you want to have this set state for loading spinner loading becomes true okay before i fetch data and if you have some error set state where dot dot state and error message is my error that's all now you're going to receive a users now let me print the users as a pre tag expression json dot stringify of users sorry state dot users so what you're gonna get is all the user's information okay so this all uses information all users information if you want to know a proper order you can go online search for json validator okay so you just space your results and validate you get the proper alignments copy go with here okay you got data that's changed to json okay you have proper data and this particular data i have to display in a data table format so let's see that now okay i write one grid the class name is grid in that one division the class name is column in that i have to display data table okay so how you display data table is you have to import data table so let's import data table and let's add a data table okay for data table you have to specify something called yeah you have to provide the value products so for me value is state dot users okay fine but you didn't get any data table okay because you are not provide any column see here you have to provide a column and what is the field and what is the header okay so field is a sense field is a sense in your data what is a field is the name dot title name dot first what is the field you want to display and the heading is your own it can be anything okay so let's make a column fielder so in this i'll say column which input from prime reaction okay so column i say header say something called serial number so what happened you got serial number but no data so how you get the data is column field field for example email i say because oh email because in my data email is a direct property okay i added field is email and header is email i'll take okay so what happened you got all the person's emails it's not that straightforward because email is straightforward you have added okay for example i have one more column one more column here i'll say uh field and a header okay so what is your field i won't display some serial number okay where is the serial number see in this entire data serial number is login dot uuid so for example field i say login dot uuid okay so the field you get your uid but i don't want to display this much bigger number last two five digits i want so what you do last to five digits only i wanted so how can you make that you can't say dot something else it won't allow so for that reason you have an option what is that is you can have a separate function this is very important display serial number okay display serial number is a function so this function able to receive the row data row data is a sense each and every object of user individual object so in this i want to return row data the individual user object dot dot login dot uuid so this will give you complete id i want what substring 0 comma 5 just 5 characters ok now i i want to i want to uh have a connection here so here what you do is body is display serial number so what happens you get c phi character has come same way if you want to display the name also column field that is just name field okay so name field uh so name field header is name so if i give name field you got some error because you got multiple properties inside name is not just a variable value it is contain some object so what my plan is instead let display name is equal to again a function this will have a row data so return row data dot name dot first for example if i write like this and i say here body display name so what happen all the person's first name has come but i want to have full name so what you do simply cut this you write some a span tag expression like this row data dot name dot title dot again rowdata.name.first and also lastly rowdata.name.class now we get all the data okay so now that is perfect name has come i want display uh person image also okay so how we display image that is interesting here you add one more column so field what is the field is uh you have a field called picture dot thumbnail okay so picture you have to make actually double quotes dot thumbnail okay and header is header is image so if i just add like this you only get the image address but i won't display the actual image tag so for that yes you have to write a separate function display image so you receive each row data okay written i have display image so image stack so src will be row data dot picture dot thumbnail picture dot thumbnail and display here the body element will be display image so what happens you get all the pictures okay this way and i won't display h is again what after name and i display age column field i guess the field is dob dot h i say d o b dot h and let's say header let's say h so what happens we get the h but i want to have ears y is extra what i do again you have to write let display h a function written here you receive the row data so here row data dot dob dot age okay plus some yes something like this you get uh yeah you have to make a body field display h simple reward yes okay and i won't display the location and city and country so city and country you have okay so location.city location dot state country city state country i'll make this is direct variables so no special formatting required so direct variable you can write it let's say column let's say header location dot city and the header will be i made a mistake let's take double quotes location dot city and the field oh it is a field okay and the header header is city so you get the city and the same way state country and here it is state and it is country okay fine so we have displayed all the person's data and that to getting from server okay so don't feel uh complex because every library will have their own functionality it's a complete dynamic data table that's why we have to write in this way in bootstrap we just write you know table rows and column but here it is like this you know one interesting feature i tell you here if you want to apply some sorting okay if you want to apply sorting in bootstrap it's quite complex but here is dead easy for serial number if you want to have a sortable just add an extra attribute called sortable that's it simple if you just add an attribute called sortable see it's become sortable you can sort it functionality is working okay it's quite simple right so if i add a sortable for all every field is become assortable see all the fields has become sortable we can sort come on no options available yeah got data let's have some double sortable sortable sortable okay you can sort city okay you can sort country you can sort age you can sort name you can start image serial number like this so sorting is dead easy okay so hope you understand how to implement a prime react in your application going forward we also understand few more examples and few more applications and projects using prime prime reacts okay but only thing is you have to follow the documentation okay everything is written here okay so everything is written here you just have to follow the documentation you can just click on a class source you get the complete class uh class component structure hooks is the functional component and typescript okay everything has given for us so only thing you need to have some time just have a look at this library and you can start implementing your own applications okay hope you got that's clear so thank you so much for joining me with this uh new framework of react.js it's a front-end library so now we'll meet in the next video with another reactions library

Channel: UiBrains Technologies

Views: 15,639

Keywords: ui development, ui technologies, uibrains, naveen saggam, ui training, web development, angular, react js, online training

Id: 0dLOSJhc1UA

Length: 60min 34sec (3634 seconds)

Published: Fri Mar 04 2022