Using React-Bootstrap frontend with Webpack and REST backend (django)

I’ve been toying with React in frontend web-dev as a hobby. It’s a very good abstraction in terms of controlling client-side state and doing a dependency based re-rendering. I’ve started a simple Todo application with a friend doing a backend and it is going pretty well so far. One mistake I made was trying to use latest stable React and Bootstrap 4 beta from CDNs. This was flying too close to the Sun and when trying to do anything dynamic (anything that requires bootstrap.js and therefore modifying DOM by anything other than React), it failed. The failure was Modal. While there exists a workaround, it’s for sure not a clean abstraction that a purist in me would like.

So I attempted to look at alternatives and I recalled using React-Bootstrap from the github project. Basically, it’s bootstrap components that are re-implemented using React framework. Unfortunately, it’s still in development towards 1.0.0 release and is based on stable Bootstrap v3. So I did what is most rational. I made an attempt to change to using React-Bootstrap components instead of using pure React and Bootstrap CSS. The Re-architecting surprisingly went well without much headache because most that I had to do was just replace the JSX components. Of course the CSS made the sites look difference and that was expected.

Initially, I created a project that was a generic copy of the React’s create-react-app, but using externalized npm components. I used the webpack it used to compile and emit the bundle.js file. I basically leveraged that to emit bundle.js from the bag of js files, and used that bundle.js file in the static folder under django root directory. It is definitely not a standalone webpack framework to compile just what I need since it was meant to be a standalone React, Express server, but for my purposes it did its job (there is a bug where webpack –watch fail with ENOENT but that’s just an annoyance). Someday I’ll create just a webpack project that makes the bundle.js file that I need to supply for frontend.

I switched from using CDN to using actual components in my js files. The pros and cons for this is pretty common sense so I won’t describe them here. The end result is that everything works as expected using React-Bootstrap components. It worked pretty much too well to my surprise (after some weird ES2015 things not working like Object Destructuring) and that bodes a good news to develop further without much headache down the road. Looking to make the best todo app!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s