React

React is one of the most popular JS frameworks out right now. I haven't tried React yet because of the same reason that I suspect others also haven't, markup mixed with JS code. Everything I learnt said that separating UI from logic is the best way to code. So when I first heard of React and the way it did things I was skeptical of its success. But its continuous popularity intrigues me and is what prompted me to finally try it out. That and also the fact that there is React Native for developing native applications using JS.

React Native

React Native is a project from Facebook that allows developers to create native apps using JS code. This is really powerful. The other big competitor doing the same thing is NativeScript using Angular 2. However, React brings its unique approach to component creation into this project as well.

I will get started learning React using React Native. I have an app project in planning stages. I was looking for native performance, single code base for both Android and iOS, and easy interfacing with native platform libraries. I had tried Angular and Angular 2 already, and it just seemed like a lot to take in all at once. But I stuck with it and learnt it. Now I want to learn something I haven't tried yet. I had already created an app using Qt and QML that worked on both platforms. Because of all this, I didn't want to use Qt again or use NativeScript. So React Native became the natural choice.

Research so far

When I began my research into learning React, I had already heard somethings about React. Like using Redux with React to manage state. Reading more about state at the React Native docs page, I was more confused as to why we need Redux for state management. Then I went to the Redux home page which lead me to this blog post talking about how Redux might not be needed for every project. Reading the explanation, I understood somewhat of what Redux is used for. I don't need to use it for my app but probably will learn it for a later project.

Another confusion I had was around JSX. Mainly I wondered what it was. It turns out that JSX is the markup that is used in the JS code. That markup is just syntactical sugar on JS code. I was surprised and pleased to read this. I also understood how they could use the same methodologies and concepts with React and React Native. Under React Native the JSX code uses native platform UI elements in the background. Whereas, with React on the web it uses HTML. Learning more about JSX it is now clear why the React team used this technology.

One misconception I had before I started researching React is comparing it to Angular. From what I've read online, there is really is no comparison between Angular and React. Where Angular provides the functionality of all the letters in MVC, React is only meant for V or at most VC. It can have some C functionality in the same file, like smaller button actions. But more complex actions and functionality would have to separated out.

What's Next

Since I'm starting with React Native, it will put React's “learn once, write anywhere” philosophy to the test. I'll see if I can use React comfortably after learning React Native.

As I start writing the app I will blog about my progress, pitfalls, or interesting things I've encountered during development. Hopefully, this and future posts will be helpful and useful reading for all.