Skip the Setup and Start Coding With KendoReact Templates for Create React App

The KendoReact team has created four templates in Create React App for you to use. Read on to learn more!

If you’re anything like me, then you find all the setup at the start of a new project to be one of the most tedious parts of the whole process. The idea of starting a greenfield project is wonderful: brand new codebase, no legacy issues, no bugs (yet)—the world is your oyster! So to take all that energy and excitement, only to sit down and … run npm installs and configure dependencies for 30 minutes? Ugh, no thank you.

That’s where the KendoReact templates for Create React App (CRA) come in. CRA is one of the fastest and easiest ways to spin up a new React app; it’s my go-to for getting things up and running in only a few minutes. There’s only one way it could be even more convenient—if it could also handle KendoReact installation and configuration as well! Well, just in case the title of this article hasn’t tipped you off yet, I have great news: it can.

CRA allows developers to provide custom templates through the --template option. The KendoReact team has taken advantage of that awesome feature and created four different templates for you to use, depending on your preferred tech stack:

• cra-template-kendo: A basic template that sets up a new React application with KendoReact already installed and ready to use!
• cra-template-kendo-sass: Enables KendoReact in your new React application, as well as adding sass support.
• cra-template-kendo-typescript: Enables KendoReact in your new React application, as well as adding typescript support.
• cra-template-kendo-typescript-sass: The best of both worlds—KendoReact with both typescript and sass.

Using these templates is as easy as pasting the following into your terminal:

npx create-react-app my-react-app --template cra-template-kendo

Just swap out the my-react-app with the name of your new application, and the cra-template-kendo for any of the above templates (if you’re looking for that extended typescript and/or sass support). Then, sit back—grab a coffee, have an office chair sword fight, or scroll your social media feed of choice for a few minutes while CRA does its magic.

When you come back, you’ll have a shiny brand new React app with KendoReact (and maybe also typescript and sass) installed and configured, ready for you to start coding. You can go ahead and import any KendoReact components you need to start building—it just works!

The friendly Kendoka who greets you upon the successful build of a new React app using Create React App + KendoReact templates.

If you’re looking to go even further down the “Wow That Was Unbelievably Easy” path, make sure you check out the ThemeBuilder, too. ThemeBuilder is a WYSIWYG editor for all of our Kendo UI components, allowing developers or designers to dive deep and customize the details of each component—without touching any CSS or Sass. It exports a CSS (or sass) file that you can literally drag and drop over into that new React app you just set up. And, just like that, you’ve got a new React app, using your preferred tech stack, set up for your component library, with the styles already configured. As you add new components, they’ll automatically be styled to match your design.

Just like that, hours of dev time just … done! One line in the terminal, and you’ve got a React app ready for you to start actually building; no need to waste your time on the boring setup routine. Give it a shot, and see just how much time you can save!