Introduction to DevExtreme Data Grid With REACT NAME : NUWAN DANTHANARAYANA DESIGNATION : SOFTWARE ENGINEER What is React ? • React is a JavaScript library created by Facebook. • React is a tool for building UI components. React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”. What is DevExtreme ? • DevExtreme is a component suite for creating highly responsive web applications for touch devices and traditional desktops. • The suite includes 50+ UI components ready to use with, • React JS • jQuery • Angular • AngularJS • Knockout • ASP.NET MVC or ASP.NET Core • Data grid, interactive charts, data editors, navigation and multi-purpose widgets designed to look and behave harmoniously in any browser. Integration with 3rd-Party Libraries and Frameworks • DevExtreme supports integration with client-side technologies and server-side frameworks: • jQuery versions 2.1 - 2.2 and 3.x • Knockout versions 2.2.3 - 2.3.0 and 3.1+ • AngularJS versions 1.2+ • Angular versions 5 and later • Vue - versions 2.5.16 and later • React • DevExtreme React Components - versions 16.2 and later • DevExtreme Reactive Components for React - versions 16.8 and later • ASP.NET: ASP.NET MVC 5 / .NET Core 2.0 and later John Keells Group - Confidential How to Start ? • Create React App with NPM • npm create-react-app dev-grid • Install Reactstrap • npm install --save bootstrap • npm install --save reactstrap react react-dom • Install DevExtreme • npm install [email protected] --save --save-exact • npm install [email protected] --save --save-exact • Add styles • On App.cs John Keells Group - Confidential Import Components John Keells Group - Confidential Create Grid John Keells Group - Confidential Additional Attributes John Keells Group - Confidential Create Column John Keells Group - Confidential Create Custom Button Column John Keells Group - Confidential Create & Bind Data Set John Keells Group - Confidential Grid Events & Custom Events John Keells Group - Confidential John Keells Group - Confidential Thank you John Keells Group - Confidential.