Sunday, August 21, 2016

Trying out ReactJS

This week I tried ReactJS. I was super exited to learn React with it's one way data-bindings. As I learned from couple of videos, React can be used with or without Babel ( a compiler) .

 I chose to use Babel as it gives a cleaner syntax.I found that much to my dismay, setting up Babel with Webpack was hard. I copied configs from over the net and finally succeed in setting up Babel + Webpack + React.

Finally I tried a sample project(link) to learn react. I ended up with hitting on obstacles after obstacles. One which I found very annoying was that when React failed it gave no errors, no display. Maybe chrome does provide errors but Firefox certainly didn't. Another snag was that Firefox react-Dev tools add-on has a memory leak which I found out after Firefox consumed 2GB ram and system got stuck.

I foolishly stumbled upon the dark because of ajax. Ajax requests updated the state objects after rendering but because I used mutable objects, React didn't recognize the change and re-render. I had to use jquery because I didn't want to try too many things at once .

Anyway I finished my project at last and I am satisfied with it. The code is a jumbled mess certainly but it works well enough. I haven't learned flux or redux or router or other things related to react, so I have a lot to learn. I think the React syntax is easy to learn and because it's javascript easy to implement. In my opinion I like React better than Angular from the looks of it.

Yesterday I tried for a SASS+Babel + React + Dev-server webpack config. And it was worse than just trying for react. As webpack only recognize javascript entry files I have to include a require statement in js to import css or sass. Though I got it to work after a couple of hours.

1 comment:

  1. ReactJS is definitely easy to learn than any other JavaScript languages, and Redux & Flux are important concepts that Flux is a general framework for laying out how data flows and state changes in your application. Redux is one implementation of the concept of flux.

    Best Regards,
    CourseIng -ReactJS Online Training in Hyderabad

    ReplyDelete