Demystifying React essentials
Many people argue that React is not a beginner friendly framework due to its complexity. Their criteria for judging is usually based on certain myths that freely roam around React ecosystem. In this short article, we will discuss and demystify five common myths that are associated with React. So let's start our short journey!
Myth one: React is a framework
In the first sentence of this article, I said that React is a framework. I was wrong. According to Facebook, "React is a JavaScript library for building user interfaces." - a library, not a framework. So what's the difference? Frameworks like Angular or Ember.js are all-around solutions for building web applications. Unlike React, they provide many features out of the box. What distinguishes React from the rest is its ability to handle the view layer of the application. A React application is made out of components that in theory should be pure functions - meaning that they return the same view for the given input. That being said, React in its purest form shouldn't care about where and how the data comes to the view.
Myth two: React can’t be used as a <script> tag
Well, it can, but it shouldn't. Theoretically, you can load React in the <script> tag, but it is not considered as a good practice unless you are just testing out a few things and exploring the library for the very first time. If you want to, you can do it by including React and React-DOM packages. Including React is an obvious step and including React-DOM means you want your React application to run inside the browser (hint: React can run on other platforms as well).
Myth three: React is hard to set up
This is a tough one. Setting everything up from scratch to a production level stage isn't the easiest task - especially if your application is a complex one. We have seen that including React as script tag isn't the best solution either. Luckily for you, there is a tool to help you get up and running with some pretty neat stuff - I am talking about create-react-app CLI. Official command line interface lets you create React applications with no build configuration. To create one, you only have to run this command from your terminal: create-react-app
Myth four: If you want JSX, you need Webpack
Simply put, JSX is a syntax extension that lets you write HTML like code inside JavaScript files. Since React is a view library it makes total sense to describe our UI with HTML - that's the reason why we use JSX. We already made it clear that starting React application is easier than ever with create-react-app CLI and, as we mentioned, JSX works out of the box with it as well. Many people find JSX confusing, and wonder whether they need Webpack for it or not. The answer is no. JSX gets converted into JavaScript with a small help of Babel - a JavaScript compiler that lets you use the next-generation syntax!
Myth five: Redux is mandatory for dealing with an application state
No, it is not. Should you use it? - It depends. Redux is a tool for managing application state. If you’re learning React, don’t mix Redux with your first application - learn to think the React way. According to Dan Abramov (creator of Redux), you should only add Redux when you feel that something is wrong with your application's state. In that way, you will clearly understand why it is better to have a single source of truth for your data instead of storing everything inside components’ state. Many people fall into the trap of adding Redux way too early to their application when it doesn't solve any problems and adds an extra layer of complexity. Don't be one of them.
At the end of the day, learning React might not be that hard if you remove all the unnecessary clutter that you think is mandatory for writing your first application. If you're still struggling with learning React, I suggest spending more time with Vanilla JavaScript (especially ES6 syntax) and learning how it works. Once you get fluent with Vanilla JS, it won't take you much time to write your first React application - my colleague learned React and built production ready application at the 48-hour hackathon!
