Getting Started with KendoReact: Video Tutorial

In this engaging video course, you will learn how to quickly start working with the KendoReact UI library, how to implement and customize components, and how to take advantage of the powerful React UI components available in KendoReact. 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.

Headbanner_Kendo_VideoLP

Let's begin!

1: What can KendoReact do for you?

If you are still wondering if the KendoReact 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):

KendoReact components page (where you can also download the free trial)

KendoReact React components built specifically for React

Roadmap (What's next in KendoReact)

Styling – KendoReact themes

Accessibility

2: Creating Robust React Applications with KendoReact

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 KendoReact DropDownList, NumericTextBox and Grid components, install them into our project and take a look at an easy way to style them.

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

Now that you’ve seen how to incorporate KendoReact components into your React project, we’ll get started with implementing the KendoReact 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 KendoReact built-in themes.

4: Customizing KendoReact UI Components

With our working React application now ready, we can delve further into the KendoReact 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 KendoReact, we’ll look into what else we can create with this versatile 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 as we’re sure you are ready to begin your next React app with KendoReact.

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.

Headbanner_Kendo_VideoLP

What’s Next?

Now that you’ve learned a bit about using the KendoReact components in a real application, give it a try yourself! Download your free 30-day KendoReact 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 KendoReact components.

Get a Free 30-day Trial