What is React.js?
React.js is a front-end Javascript library used to build graphical interfaces. Thanks to its component and state based structure, designing dynamic applications is a breeze. This ease helped build its high demand in the front-end development market. It is recognized and used by large companies Facebook, Netflix, and Uber to build some of their applications. It being open sourced and built by a renowned company like Facebook helps maintain its success with frequent improvements.
What is a Javascript library?
A library is a collection of functions and other bits of reusable code. If you've used jQuery, then you should already be familiar with the concept of a library. You called on functions from the jQuery library to execute a desired task. Using a reputable library makes development many times faster and easier than having to come up with the required complex code on your own. You could certainly make any web page without React.js, but using React.js for large projects can make parts many times faster to write.
Usable anywhere
If you need to learn one technology to design an interface for many platforms, React is definitely a great option. You can use React to create Android applications, iOS applications, Windows applications, MacOS applications, and website applications. I learned React.js for fun and verified that all of this is very much possible and fairly easy. Note that I said React, not React.js. Though you would end up learning React in the process of working with the React.js library. You would need to learn additional aspects when switching between platforms, but using React is generally much faster than learning the native IDE and language.
What is JSX?
const element = <p>Hello World!</p>
If you're a competent beginning web developer, you probably think this line is weird. You know you can't simply store HTML in a JavaScript variable; Usually you'd be storing a DOM node. It is actually JSX that you see. The acronym, JSX, stands for JavaScript XML. JSX and HTML are very much comparable, but you will see the differences when learning more about React.js. JSX is an XML syntax extension to JavaScript, but also comes with the capabilities of ES6.
Rendering
With plain HTML, you'd simply write HTML in the document body to display something on screen. The route is a bit different with React. You would have to select an element using Javascript and call the render method from the ReactDOM library.
<div id="app"></div>
<script type="text/babel">
ReactDOM.render(
<p>Hello World!</p>,
document.getElementById("app"));
</script>
As you can see, there is an empty div element. Once the JavaScript code is executed, "Hello World!" will render onto the screen inside of the previously empty div element. With the displayed HTML being controlled by JavaScript, it is many times faster to create a dynamic page(page with data that changes).
Should I learn React?
The answer is easily yes. If you're a dedicated UI developer with the desire to learn several relevant skills, many times yes. React is a wonderful tool for your belt. As aforementioned, it can be used on many platforms. The technology is in high demand as a skill. Creating a complex and dynamic app can be fast. It is reliable and easy to read. The list goes on.
Problems/cons of using React
- There is a huge learning curve when coming from plain old HTML, CSS, and Javascript web page development. I wouldn't say it is hard, but you could spend a longer amount of time than desired to become a competent React developer. There is many aspects to learn.
- Search engine optimization gets complicated. Most search engines are not adept to reading HTML through Javascript. Some search engines simply refuse to render React because of the required processing power in bulk. Google has made some decent efforts in crawling React.js rendered pages, but it is short of great. You will need to look into server side rendering for React, which is where it gets complicated for reliable React SEO.
- React is fairly young. Naturally, this means not all questions have been asked and found by Google to index on Google search. You would need to dig through documentation to find your answer. Really that last part isn't a problem, but I know a lot of people who have a hard time with documentation.