ReactJS 101 (Part 1)
This is the start of a five part series on learning React. Let’s start with understanding what React is. React is a front-end JavaScript library developed by Facebook. It follows the component based approach which helps in building reusable UI components. It is used for developing complex and interactive web and mobile UI. Even though it was open-sourced only in 2015, it has one of the largest communities supporting it. Pretty cool, right?
So, you may be wondering… what are some features of React? Here are three:
- It uses the virtual DOM instead of the real DOM
- It uses server-side rendering
- It follows uni-directional data flow or data binding
With these features, we should also discuss the major advantages of React. React increases the application’s performance and can be conveniently used on the client as well as server side. React also uses JSX. Because of JSX, the code’s readability increases. Additionally, React is easy to integrate with other frameworks like Meteor, Angular, etc. Lastly, using React, writing UI test cases become extremely easy.
On the other hand, there are also some limitations. React is just a library, not a full-blown framework. Additionally, its library is very large and takes time to understand, making it especially difficult for noice programmers to understand. Lastly, coding gets complex as it uses inline templating and JSX.
Now, we’ve discussed some advantages and limitations to React. It’s important to understanding both it’s pros and cons when deciding whether or not it is the right front-end library for you.
So we mentioned JSX a few times above, but what exactly is JSX? JSX is shorthand for JavaScript XML. This is a type of file used by React which utilizes the expressiveness of JavaScript along with HTML like template syntax. This makes the HTML file really easy to understand. This file makes applications robust and boosts its performance.
Additionally, you can embed any JavaScript expression in JSX by wrapping it in curly braces. After compilation, JSX expressions become regular JavaScript objects. This means that you can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions. Even though React does not require JSX, it is the recommended way of describing our UI in React app.
It is important to note that browsers can only read JavaScript objects but JSX is not a regular JavaSCript object. Thus, to enable a browser to read JSX, first, we need to transform JSX file into a JavaScript object using JSX transformers like Babel and then pass it to the browser.
This was just a quick introduction to React. We will continue learning more about React in the next blog.
