Getting Started with Kendo UI and React: Video Tutorial

In this engaging video course, you will learn how to quickly start working with the Kendo UI library for React, how to implement and customize components, and how to take advantage of the powerful React UI components available in Kendo UI. There are 6 short videos in this series, in which Tara will explain everything you need to know using the right mix of expertise and a sense of humor.


Let's begin!

1: What can Kendo UI for React do for you?

If you are still wondering if the Kendo UI React components are right for your project, watch this quickstart video to get your questions answered. This UI component library was built from the ground up specifically for React projects. We’ll look into what this means for your development process, including quick spin-up time, out-of-the-box accessibility compliance, styling, internationalization and more.

Useful links (in order of appearance):

Kendo UI React components page (where you can also download the free trial)

Kendo UI for React - component wrappers and React implementations (build specifically for React)

Roadmap (What's next in Kendo UI for React)

Styling – Kendo UI themes


2: Creating Robust React Applications with Kendo UI

To really understand just how easy it is to create with React and Kendo UI, we’ll start building out a project by first using `create-react-app`. We’ll check out the Kendo UI DropDownList, NumericTextBox and Grid components, install them into our project and take a look at an easy way to style them.

3: Adding a Kendo UI Grid, Dropdown List and More to React

Now that you’ve seen how to incorporate Kendo UI components into your React project, we’ll get started with implementing the Kendo UI Grid, Dropdown List, Inputs and Buttons, and peek inside some of their features. We’ll quickly build out an interactive React application taking advantage of the Kendo UI built-in themes.

4: Customizing Kendo UI Components for React

With our working React application now ready, we can delve further into the Kendo UI components. We will customize the components we added in the last getting started video, the Grid, NumericTextBox, DropDownList and Buttons, and discuss all the functionality available at your fingertips once you are wielding these powerful components.

5: Working with React’s Kendo UI Wrappers

Although there are great benefits in using components specifically built for React, the Kendo UI React wrapper components also have a lot to offer you. Inside of our current project, we’ll walk through the steps of adding a React wrapper component (a Chart), binding it with the user-generated data in our app and visualizing this data in a pie chart.

Useful links:

Kendo UI for React Charts component (part of the wrappers library)

6: What Else Can You Do with Kendo UI & React: Grids, Uploads and More

Now that we have a great React project built with Kendo UI, we’ll look into what else we can create with the Kendo UI library. We will also explore great ways to take your React app to the next level by making it a Progressive Web App (spoiler: you’ve already built one!). Finally, you’ll be ordained with additional resources to continue your journey with Kendo UI & React as we’re sure you are ready to begin your next React app with Kendo UI.

About the presenter:

Tara Manicsic
Progress Developer Relations

Tara is a life-long student, teacher and maker. She has spent the majority of her career using JavaScript on both the backend and frontend to create applications. In her free time, she works in her community to educate and learn from other developers. Tara launched the Cincinnati Chapter of Women Who Code and Co-Chairs the Cincinnati branch of NodeSchool. Beyond code, she likes to make things with other materials (wool, solder, clay, etc.) and hike any mountain she can get to.


What’s Next?

Now that you’ve learned a bit about using the Kendo UI React components in a real application, give it a try yourself! Download your free 30-day Kendo UI trial that includes the code, documentation and even support during your trial period. See how easy it is to meet your deadline while improving your app’s user experience with the power of Kendo UI components.

Get a Free 30-day Trial