Build a Better UI with React Webinar Recap_870x220

We recap the news from the latest Kendo UI and React webinar and answer the questions we couldn't get to live. Missed the webinar? Check out the replay below.

Last week, we hosted the webinar on Kendo UI and React, which highlighted how to use the Kendo UI React library in a React application. This blog post summarizes the event and provides answers to the questions that were asked by attendees.

Webinar Recording

If you were unable to join us for the live webinar, don’t worry: we’ve posted the recording to the Kendo UI channel on YouTube.

Prize Winner

It’s a bit of a tradition for us to give away prizes to attendees who ask the best questions. This time is no different. The winner this time around will receive Bose Wireless Headphones!

Questions and Answers

Q: Can I use it with .net?

A: Yes - Check out Kendo UI for ASP.NET MVC

Q: How do we customize our own theme?

A: Check out our theme builder, and then choose to either import a theme or pick a pre-made one and you can customize it.

Q: Is the Kendo UI library fully compatible with React 16?

A: Yes, our components are compatible with the latest release of React.

Q: What is the purpose of selecting individual components for import? Does it reduce the size of the Kendo library?

A: This reduces your build size by only bringing in the components you've selected.

Q: Do the React wrappers use jQuery?

A: The @KendoUI React wrappers are based on the jQuery suite. Native React components are in our short term roadmap.

Q: Where do you recommend starting out with react?

A: @reactjs has some great getting started guides.

Q: Those imports seem a bit verbose unless I've missed something? I'm more used to: import { x, y, z } from 'kendoui'

A: For Kendo UI in this demo I went ahead and brought it all in. For the other modules I was more selective and only imported the parts I needed.

Q: Are hot code reloading and time-travel debugging supported?

A: Yes! You can still take advantage of hot code reloading and time-travel debugging.

Q: Are there other options to install other than NPM?

A: There is, you can use CDN instead. Check out the info here.

Q: So to understand, the #KendoUIlibraries for #React include all the regular components that I'm used to?

A: That's right! All of the same components but within React! We’re still working on wrapping a few remaining ones, but they’re mostly there and the rest will be available shortly.

Q: What's the license for your product?

A: Here's a little more information about our license: https://www.telerik.com/purchase/kendo-ui

Q: Is it possible you switch from React/Vue to Web Components in the future since it's based on existing web standards ?

A: For now the setup for these components is pretty different. We do offer wrapper support for both under the same license for if you switch.

We hope you enjoyed the webinar! Feel free to let us know if you have any questions we didn't address, and if you haven't tried it yet, you can get started right here.

Transcript

Prefer reading a transcript to watching a video? We've got you covered as usual—check out the full transcript below:

               Hey everyone. Thank you for joining us today. I'm very excited to be leading our webinar on how to build a better UI with React and Kendo UI. To start things off, let me introduce myself. My name is Tara Manicsic, and I'm a developer advocate for Progress. I work with the Kendo UI team to help bring information about the awesome things that they're coming out with; like what we're talking about today, the Kendo UI library support for React.

                I'm very excited to walk you through kind of getting ready to start your project for React, and get in your Kendo UI components so you could build your React apps much faster and more robust with our React wrappers. During the webinar, or even after, when you're building your own React app with our Kendo UI components, you may have some questions. Please feel free, if you have any questions or any comments, to hit us up on Twitter, at #HeyKendoUI. We'll be happy to answer any questions you have, but on top of that, we will be rewarding one of you curious listeners with these Bose SoundLink around ear wireless headphones. A lot to say, but it's just because these headphones are awesome. Get your questions  in there. We love to hear them. We love to get your feedback and give you any answers to any questions that you may have. We'd also love to give you these headphones.

                Without further ado, let's jump in. I want to start by taking you to the Kendo UI support for React website. If you're familiar with Kendo UI, you know that we are very passionate about delivering great UI components that suit your needs. That's why we support jQuery, Angular, and now React and View. With one license, you can get support for all four. If your framework path changes, as sometimes it does, your UI library doesn't have to. You can check out the road map to see what's coming down the line, and see what components we currently have available here. We also offer awesome technical support, and lots of other great sources.

                One resource I find super handy are our demos. You can check out these components plus the different iterations on how to implement them across different libraries. There are great code examples and if you want to dig in more, you can click 'edit this example' and open it up and plunker.

                Let's jump right in by creating a React app. We'll head to a directory our project can live in and globally install Create React app using NPM. Create React app is an awesome command line tool that lets you spin up a React app without worrying about your build configurations; which can be quite a tedious process. Looks like our NPM needs updated, and since it's always a good idea to keep it up-to-date, I'll do that now.

                Now that we have Create React app installed globally, we just need to use it to create a project by typing 'Create React app' and our project name. Once that is all built, we can head into the directory and see what we've got. The first thing we can do is run NPM start. This script is running React script start. When we head over to local host 3000, we can see there our sample React app is running exactly how it's supposed to. Yay.

                If we look inside our source directory, we can see we have our main app file's style and JavaScript, as well as the main project files index JS and index CSS. Before we start making any edits, though, let's actually go back to the terminal and run Git Init to make this a Git directory so we have version control. Then, we'll run Git Remote Add Origin and add our project directory on Git hub to put our code. Using GST or Git Status, you can see, we just have the new files that Create React app gave us. We'll push those up to the repository so that we have a nice place to go back if everything blows up in our face.

                [5:00] Now that we're all set, let's add some Kendo components. The first one we'll add is the buttons wrappers. You can install these all on a single line, but I want to walk  us through each one as we install them. The button is pretty self explanatory, but the next component we're adding is date inputs. That has a little more to it. Today, we'll be making a little form just to wrap our minds around just how easy it is to implement Kendo UI components into our React apps. We'll be adding a date picker from the date inputs module, but that also comes with a calendar, date input, date time picker, and a time picker component.

                Next for the form, we'll be adding the inputs module. ... Like the date inputs module, this comes with mass text box slider and numeric text box, which is the one we'll use today. I also wanted to install the chart module. Chart doesn't really have anything to do with the form that we're building, per se; but it's so ridiculously fast and easy to add a chart into your app, I had to show it off. You may want to add a chart to everything you build after this. Obviously I did. ... Second to last, we add the Kendo UI base library to make sure that everything runs and works swimmingly. ...

                Last but definitely not least, we are installing the Kendo UI default theme. I love having this default theme. I'm rubbish at styling, because CSS is hard. This default library does all the work of styling the components for you. I find it to be such a relief. ... While we're on the topic of styling, I want to remind you about the progress theme builder that you can use with your Kendo UI components. I am a big, big fan of this builder. You can start with your own theme, ... or our default theme, or bootstrap. Then, customize as your heart desires. You can look through all the components, make sure they're coming out the way you want them. ... When you're ready, you can hit the download button and get a nice bundle of style sheets. ... It just makes styling and customizations less of a stress. ...

                All right, who's ready to jump into code? I am. Here's a glimpse of what our project directory looks like. ... We're going to spend most of our time in the source directory today building up our app. Before we do that, let's open up our index.html file inside the public directory ... to add our bundle.js script inside some script tags. This file will contain the bundled scripts for our app, including our Kendo UI for React widgets. ... Okay. We'll close out that script tag and save and move on.

                Next, we'll open back up the file directory to move to the file that we will spend most of our time on today: the  js file. We don't need the logo anymore, so we'll get rid of that import. We'll start importing what we need from our Kendo UI libraries. ... First, we start with the main Kendo UI library. Then we can import the styling we need for our components by importing the default styling module. It's amazing how many times I have typed the word 'default,' yet the U always thinks it needs to go first. I'll get it one of these days. ...

                [10:00] Next, I'll add our first component: the date picker. As you can see, I'm only pulling in the date picker from the date inputs module instead of bringing in the whole library; because we're only using the date picker today. You can do this with all of the components. ... I will warn you, I am adding some mistakes as we go through so we can see what errors look like when they're coming from different sections. They're not big ones and we'll fix them later; but just to give you a heads up. ...

                For now, let's move inside our app component. We're add our constructor passing in props, ... and inside there, we'll add super, also passing in props. This lets us access this .props inside of our constructor. Then, we're going to attach a property date time to this .state. We're going to use this on our date picker. Initially, we'll assign it to a new date. Then, in order to make sure that we have the right instance of this attached to our change on change method, we'll bind this dot on change to this inside of our constructor. Thank goodness this is never confusing.

                Next, we need to create the on change function and pass the event, or E to it. ... Inside there, we'll just console log the value that the event is sending ... and we'll also use that event trigger that lets us know there has been a change to set date, time, and state to that same value; which will be the value our user clicked in the date picker as we shall see. ... Oops. I jumped all around. All around and wrong. Silly fingers.

                Okay, we are now headed into the HTML. Adding Kendo UI components is pretty straightforward. First, let's get rid of all this old stuff. Then, we'll add a div that the date picker can go inside. This isn't necessary for the component. You could just plop it straight in there, but I figure it may be good for styling later on. ... Inside of that div, we add our component by just putting the name of the component; in this case, date picker. ...

                Inside angle brackets. We want to add some parameters to our date picker, though. First, we'll set the value to this dot date time, which if you recall, first gets set to a new date. Then, when on change is triggered, gets set to whatever the user picked. Next, we'll add a min date value that the calendar will go down to. ... We'll also set a max date value that we'll set to your birthday. I'm just seeing if you're paying attention. I'm just kidding; but that could be right. If so, happy birthday to you. ...

                Okay. Next, I set the format to how the value date is displayed. ... Then, bind the change event to our on change function. ... We'll close out the date picker perimeters, and also add its self closing tag. Since we have that start script running in the background, on save, our app refreshes and we can see there's an error locating our theme script. If I were to look at my node modules folder inside and inside at progress, I would see that the CSS file I'm looking for is inside the dist, or distributables folder. I'll change that up here.

                [15:00] Now, the build is fine. We don't have that warning in the terminal, but still something seems to be wrong. Aha, there is no on change function because the on change function isn't camel case that we built. ... We will go into our code and fix these mistakes. Remember that everyone makes mistakes, because 'pobody's nerfect.' ...

                Let's see what we have now. Viola. We has a date picker. If you go in and click the calendar button, you get a lovely styled calendar that lets you scroll over and click dates. Oh, but look here. It seems I have formatted the year wrong. I feel like next time, we'll do this like a kids' show where you have to shout out what's wrong with the page. Let's go back into our app.js, find the format, and add that extra Y to get all four numbers of our year. ... Save and head back. We see that we have a date sans extra Y. Yay. If we fiddle around in here, we see all the functionality we can get out of just a few lines of code. ...

                Now, since we have something working well, let's go ahead and commit what we've added. Using GST or Git Status again, we see only the app js has changed. Then, if we check with GD or Git, we can see we got rid of the old stuff and added our new date picker. Everything looks good, so let's use Git Add period to edit all. Double check that we still just have the source app.js. Then, make a totally mundane commit message. ... Use GD push and alias for Git Push origin master, and send it up to our repo. Then we'll run NPM start again to keep our application up. ...

                There is our date picker. Now, let's add a bunch more components so our simple form starts to take shape. Going back to app.js, we start by importing the components we need to add. Again, we'll only grab the ones we're using, not the whole module. ... First, we add a numeric text box. ... Then, we get to add the chart, which in this case, will be a bar chart. ... Finally, a button for submitting our form. For now, it will just be a decoration so we can see how it looks and how we implement it.

                Now that we have all the tools we need, let's get to molding our application to include all the things. ... First, we add a div for the numeric text box component. ... A little [00:19:00] hard to say. Then, just like our date picker, add the numeric text box container inside. ... Now, that's all set. We can add the numeric text boxes perimeters. For this one, we're thinking dollars and cents. We'll give the user the ability to have up to two decimals. ... The format will be C zero, which as we'll see eventually, is to give the dollar sign. Treat it like money. ...

                [20:00] Then, we have our min and max, which are pretty self explanatory. ... We'll cap our max out at 500, just because. Next, I want to turn rounding on, so that we can have a whole number. That will be set to 'true.' ... We'll add loading spinners just in case, by setting spinners to 'true,' as well. Finally, we'll set the default value to 22, because it's my favorite number. ...

                Okay, we have everything here that we need. As you can see, we have a pattern here with Kendo UI components.  You add the initial component by putting its name in angle brackets. Then, you have the ability to bind its events and perimeters. You can check out the API to see all the ways you can customize your Kendo UI components. We're just previewing a few here today. I'm noticing that my formatting is a little off, so I'll go ahead and fix that before we add our next component. ...

                Now this I think is pretty awesome. Are you ready to write a bunch of code to add a chart to our app? A chart that you could bind some data to get some data visualizations? Here we go. First, we add the chart component. Next, we needed to have the information to display so we bind series of two objects that each have a data property containing an array of numbers. In the future, you could bind this to live data, files of data, or even user input. Today, it's just static data. We didn't even have to use more than one line. Yes, I was joking. There is not that much code that we needed to write. This one isn't complicated, but I wanted to show you just how easy it was. ... Add a self closing tag and we're on to the next component.

                Last but not least, we have to add a button. If you've added a button before, this should look pretty familiar. We just have to add the button's open and closing tags, plus the button message. Which in this case, is 'check rates.' Let's go look at what we have here. We have everything here now on the page. It didn't take long at all to get some components on the screen, but now let's make them look half decent. Okay, again, I am no designer; but here are the next steps we take. ...

                First we'll add a header so everyone knows what we're doing here. ... Then, we'll put all of our date pickers inside of a div to style them together. ... Next, we'll add some tags to our [00:24:00] date picker so the user knows why they're even picking dates. ... We'll copy our current date picker to make a second one that will act as the check out date. ... Next, we pretty much do the same thing for the numeric text boxes. Putting them together in a div and also letting them have labels, so we know what they're for. ...

                [25:00] Well, we've got labels. Let's dig into the styling. First things first, and also, one of my favorite parts, we copy and paste the link tag from Google fonts to add it to our public index.html file. ...  That means it will be applied across the whole project. ... Then, in the main index.css file, like index.html, the styles you set here will be applied to your whole project. We'll set the font family to the new Google font we chose. ...  We'll also set the background images to pineapples, because who doesn't enjoy looking at pineapples? ... Like I said, I'm not a designer. ...

                Now we have a more attractive app, but let's do better with the form. To do so, we'll go into app.css. ... To do this, we'll go into app.css, which here controls the main component of our app. I'm just going to paste all the style I used, but it's basically spacing everything out. If we go back into our app.js file, it looks like we may have accidentally removed the reference to our app.css file. Let's bring it back so that our changes take effect. ... Oops. We are only up one directory. ...

                Here we have a decent readable clean form to take a look at some of our awesome components that we can now use with our React apps. Before I go, I'd like to show you one more nifty thing. Whenever you build a project with Create React app, ... it starts you on your way to a progressive web app. A progressive web app or PWA is basically a process of taking advantage of modern day technologies to help your web app perform better on mobile networks via smart phones and act similar to native apps when used on a smart phone.

                If you look in the public folder, there's a manifest.json. Where it is supported, this file lets you set perimeters that help browsers display your app on your user's phone to look like a native app by setting a home screen icon, and displaying in full screen view without the browser chrome [00:28:30] on the top and bottom. If you look at this manifest.json, we'll just change the name so we can see the change. If you hosted this and saved it on your home screen on your phone, the short name would be what was written below your icon; which you can also set here in the manifest.json. For now, we'll just see the data in the browser.

                There's a script to register a service worker, but that's a whole other fun topic we can cover another time. Now, if we look in dev tools at the application tab, we can see our updated manifest.json information. Basically, this means that with Kendo UI and React, using Create React app, you are on your way not only to a fast, robust, and awesome web application, but since you have the ability to also add and make it a more progressive web app more PWA, you are starting to get into the ... web side of giving your users a great application that works both well on their mobile device and on the web on their laptops. Kendo UI can just help you make that responsive awesome website even faster. Just a fun tidbit.

                [30:00] I hope you had a great time learning how easy it is to add Kendo UI components to your React apps. You can check out the docks for lots more examples and information on these components. This is a great resource as you're getting started, and also as you're marking your way through utilizing everything these components can bring to your project. Remember to ping us at HeyKendoUI to ask any questions and add yourself to the running for those awesome Bose headphones. I cannot wait to see what you create with Kendo UI components and React. Have a great day and thanks for coding with me.


John Willoughby
About the Author

John Willoughby

John Willoughby is a product marketing manager and a software developer based in the Boston area. He is passionate about helping to give other developers better tools which is why he loves working with Kendo UI.

Related Posts

Comments

Comments are disabled in preview mode.