Web developers are always implementing the same UI parts in every project.
Things like navigation, authentication, user menu, header, footer and so on.
Here at DeveExpress, we understand that you're interested in working on business logic rather
than developing navigation menus over and over.
We always strive to make your development more productive.
And that's why we came up with our Application Templates.
Using them is quick and easy.
You get responsive web applications with theming out of the box.
These Templates are available for Angular, React, and Vue.
In this video I'll show you how to set up an app for React.
Before we get started, let me show you the app.
It has a few sample pages you can navigate through using the navigation menu.
And You can collapse the menu if you want.
Here's the user menu.
If we log out, we can see a complete set of authentication forms.
I can sign into the application.
The email I've used is now displayed in the user menu.
If I forgot my credentials there is a Reset Password form.
Let's go back and try to create a new account.
Nope.
This should be at test.com Three zeros as password.
Oops, I did it again.
I guess I mistyped the last symbol.
Ok, we're good.
For this video we do not have a connection to a real authentication endpoint.
You can learn more about this by watching our video on authentication.
Once it is published, it will appear in the upper right corner.
Our app is responsive, so it has mobile and tablet layout as well.
Even our complex UI widgets like the DataGrid are optimized for mobile devices.
Some columns are now hidden.
Let's see what happens when I switch back to the mobile layout.
Almost all columns are gone, but you can still see all the information for a particular record
by tapping the ellipsis on the right.
OK.
Let's create an application like this.
Add a page.
And change the theme color.
I'm using Visual Studio Code and its integrated terminal.
I have DevExtreme CLI tools already installed on my system, if you don't - execute this
command.
Or you can use npx to call the CLI commands without global installation.
Let's create a new react application called "Hello world".
Next, choose one of two side navigation layouts.
The main difference is where the application title is placed.
The application was successfully generated.
There is the hello-world folder, so I'm launching terminal in it.
I'm using the yarn start command to launch the application.
It looks the same as the one you saw earlier in this video except for the orange color.
Let's add a new view.
Ok.
Root views are located in the Pages folder.
Here is our new page . It's rather simple.
Next, we're going to change the color theme.
To do this, go to the Themes folder and edit these two json files inside.
I'm going to use another theme provided by DevExtreme, so I change the baseTheme field
to material.blue.dark and material.blue.light respectively.
After that I rebuilt the theme using yarn build-themes command.
And Here it is.
In addition to the built-in themes, you can create your own using our theme-builder tool.
We'll have a video for this appear in the upper right corner when it is published.
I hope you've enjoyed this quick look at how to set up an application using our application
templates.
If you have any questions, please comment below.
If you like this video, give us a thumbs up.
And don't forget to subscribe and ring the bell to get notified anytime we release new
content.
Thanks for watching and thankyou for choosing devexpress