Category: JavaScript

Adding ReactJS components to an existing jQuery front-end

For a ZF2 project I’ve been using a traditional approach where the server-side renders the HTML. For interactive views and AJAX stuff I’ve been using jQuery, but as we all know this can get messy as soon as the views are becoming more complex. I had been playing with ReactJS already, but until now I’ve never used it in a live application. I’m planning to slowly replace some components of the views with React components. My current project structure looks like this (typical for ZF2): The main challenge I’m expecting to walk into is getting Babel and Webpack setup so my ES6 code will be converted to ES5 and my JSX is automatically converted into native JavaScript (Babel) and creating one .js file with my React code and its dependencies (Webpack). Since I don’t want to throw my existing front-end code structure overboard I need to have them play nice side-by-side. My first idea is to just create a separate folder to hold my React sources. I’ve created this folder in the root of my project folder and named it reactjs. I don’t want to put it in the public folder, since the sources shouldn’t be accessible.   First I ...

(Read more...)