Extending The Car App
I showed in my earlier article how to code a small app with ReactJS and callbacks. Let's extend that app a little to turn it into a good cornerstone for demonstrating Kendo integration with jQuery. The app will have two primary modes: one that is displayed when the user is not logged in and one that is displayed when the user is inside the app. When the user is logged out they must be provided with LoginView and when they are logged in they shall see the actual app, which I am going to call ManagementView. We'll modify our car app accordingly. The App component shall serve as a switch between these primary modes:Note that render-function contains a very simple html snippet which is mainly a Bootstrap wrapper around the actual view component. In render-function, the state of the app is checked. if the user is logged in then the view component is initialized as ManagementView but otherwise as LoginView. At this point the App doesn't need to know anything else than whether the user has been authenticated and must be let in and whether they request to be logged out so the app can switch to LoginView mode. Therefore I couple LoginView's actíon fireLoginSuccess with callback handleLoginSuccess and ManagementView's action fireExitRequest with handleExitRequest. These handlers swap the App's state between logged in and logged out by updating loggedIn state accordingly. Now let's have a look at ManagementView component: A look at ManagementView's render function reveals the most of its purpose. It holds two components, a Navigation component and a view component. The view component is generated using createViewComponent method. In that method a decision is being made: if the user has already selected a car model ( this.state.selectedCarModel is true ) then the view component will be instantiated as a CarDetailView that displays some information specific to that very car. But if there is no car model selected then the view component will be instantiated as a CarFilterList. CarFilterList will allow the user to select a car.
Modularity Through Callbacks
This ReactJS app uses a simple callback technique to enable communication between components. It is a straightforward way to implement intercomponental communication and it's relatively simple to follow as well. Yet it has some caveats that justify a different approach called Redux. I will address the Redux way later on explaining in detail how it compares with a callback based approach.
Navigation view is pretty simple. But remarkable is here however that I injected click handlers to buttons using jQuery inside componentDidMount function. ComponentDidMount is an ideal intervention point for jQuery injection because it is invoked when ReactJS has already done its job and generated the actual DOM structure. That is the point where you can do further modifications to the DOM structure. ReactJS won't see this further manipulation. Many libraries are designed to be used together with jQuery and at this point it is safe to apply them without causing any complications inside React engine.See the Navigation component in action! Just click the cars on the list and you'll see how the back button works:
While this vanilla data service implementation serves well enough our demo app, please consider achieving business-grade data integrity and have a look at my article about Redux.