In this short tutorial, learn how to install, create and style a React app quickly with Kendo UI.
I am extremely excited to announce our new wrappers for React.js! To help you get started I'm going to walk through how to get setup and create a React application with a date picker. Here's what we'll be covering:
create-react-app
Datepicker
componentFirst, we need to create a React app with the aptly named create-react-app
library by first installing the module with the -g
flag to install it globally.
npm install create-react-app -g
Now, we can head to the directory where we want our project to live. Since we globally installed create-react-app
we can just run create-react-app <project name here>
.
create-react-app get-going-kendoui-react
In order to track our changes and have a good place to get back to if things go awry, we'll add git to version control our project by going into the project directory and running git init
. Then we add all the new files by running git add .
and assign a remote repo on Github.com with the command git remote add origin <url to repo>
. I had already created an empty repository on GitHub, you can check out how to do that here or do it on GitLab. Once we have our repo set up we can make a commit for these files, git commit
, edit the commit message, then push our changes to the repo on GitHub, git push origin master
.
Yay, we have a safety net! The project listed here is also going to be our example project that we can follow along with each code change we make in this post. At the end of each section that we change some code, look for the 🐙 emoji to find the link to the commit and see what was changed.
For instance:
🐙 Link to creating a react app commit.
Alright, now we're cooking with gas! There are a few libraries that will help us build our robust, React app, so let's use npm to install those now. First, we install the Kendo UI library by running
npm i @progress/kendo-ui
Since we're using the latest version of npm
(v5.5.1
at the time of this post), we don't need the --save
flag to make sure this module is saved as one of our dependencies, npm
does that by default.
Now, on to one of my favorite helpers of all: Kendo UI default themes!! CSS is hard, thankfully Kendo UI has theme libraries to help take care of making things look good. Today, we'll be using the Kendo UI Material theme library (you can find all the variables for customizing here). To install it we just need to use npm:
npm i @progress/kendo-theme-material
To include the styling in our application we just need to edit the src/App.js
file. Inside there we'll delete some old styling and import the Kendo UI Material theme files.
🐙 Link to the installing the helpers & adding styling commit.
On to the easy part: adding a date picker! I know, not usually the easy part, but that's why Kendo UI is so handy. Here we're adding the DatePicker but these are the same main steps we will take with any Kendo UI component:
Here we go 😃 First, we use npm to install the Kendo UI.
npm i @progress/kendo-dateinputs-react-wrapper
Once we have that installed we can open up the main src/App.js
file to add our DatePicker component. You can see here when we import the component we specifically asked for the DatePicker
. The kendo-dateinputs-react-wrapper
module also includes the Calendar, DateInput, DateTimePicker and TimePicker components, but we only need the DatePicker
today. The next piece we want to import is the kendo-ui
library that we installed earlier. Once we have all our pieces imported we can add what we need to the actual template part of the App.js
file.
In the template we first add a header that we'll use to prompt the user. Then we can open up the DatePicker
component and start assigning some of the component's attributes:
value
: The default value inside the DatePicker's text box before the user chooses a date.min
: The minimum date the value can be set to.max
: The maximum date the value can be set to.format
: The way you would like the date to be displayed.🐙 Link to the adding Kendo UI components commit.
All the styling for the DatePicker component has (thankfully) been handled with the inclusion of the Kendo UI Material theme. Just to add a little extra I've added a background image, assigned a font-family
and added some margins.
Now that we've added our component and a little more styling, let's take a look at what we have. To run the React application locally we can just run npm start
from the directory our project is in. If we take a look at the project's package.json
file we can see that the script for npm start
is
... "scripts": { "start": "react-scripts start", ...
This is one of the scripts in the create-react-app
package react-scripts
. Feel free to dig in more here. Basically, this script will run the app in development mode where you can preview it at http://localhost:3000
, making it so you can see linting errors in the console and, if you keep it running, it will reload the page if you make any changes.
✨Ta-da✨ It's a lovely date picker! You can see here that the Material styling has been placed on our date picker and all we had to do was import the style files in the main src/App.js
file. Notice that when a date is picked the text field is updated, this is the default reaction to the component's change
event. You can check out more about the DatePicker
's events here.
🐙 Link to the commit for adding a lil' more stylin'.
You did it! If you followed along you now have a running React app using a Kendo UI DatePicker component. Now you can check out all the other components and see which ones work best for you. Here are some other resources that will help you with your next steps too!
Resources:
Always feel free to reach out to us on Twitter @KendoUI. Thanks so much for coding with me, I can't wait to see all the awesome projects you create! 👋😃
Tara Z. Manicsic is a lifelong student, teacher, and maker. She has spent her career using JavaScript on both back-end and front-end to create applications. A Developer Advocate for Progress, Google Developer Expert, and international technical speaker, she focuses on conveying the codebase she has learned. She also works in her community launching & directing the Cincinnati Chapter of Women Who Code and the Cincinnati branch of NodeSchool.