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!
Kathryn Grayson Nanz is a developer advocate at Progress with a passion for React, UI and design and sharing with the community. She started her career as a graphic designer and was told by her Creative Director to never let anyone find out she could code because she’d be stuck doing it forever. She ignored his warning and has never been happier. You can find her writing, blogging, streaming and tweeting about React, design, UI and more. You can find her at @kathryngrayson on Twitter.