The Beauty of React
The popularity of the JS framework, and why you should learn it
Introduction
React is just awesome (sorry Angular and Vue)! If you don’t know what React.js is, it is a JavaScript front-end framework — well technically it’s a library — developed by Facebook themselves. React allows users to dynamically render content, query APIs, load animations, and much more. It is a widely loved library, a fact supported by its whopping 5.7 million users.
What is a Front-End Framework?
Although vanilla HTML, CSS, and JavaScript are great, they can sometimes be frustrating and boring. With HTML, files can sometimes be over 1000 lines long, and there is almost always code repetition. Therefore, front-end frameworks were created. Front-end frameworks allow users to easily render dynamic content such as variables, manage the state of an application, eliminate code repetition, and so much more.
About React
As mentioned above, React.js is a JavaScript front-end framework used to develop web applications. It essentially replaces the need to write vanilla HTML and JavaScript. You would still need to write CSS, but there are plenty of React UI Libraries such as Material-UI and Semantic UI. In addition, React provides support for tailwind and bootstrap, along with CSS pre-processors such as SCSS.
React is a component-based framework, which means that you would define components in React that would manage state and perform their own functions. You can reuse these components to build more complex UIs, and also eliminate code repetition. In the old React versions, components were class-based, meaning that they were defined in classes. Below is an image showing a class-based component.
In the newer versions of React, functional components have been the more common way to write components. Below is an image showcasing how functional components are written.
These functions/classes are exported from files and can be imported in other files and used within other components. Components are rendered on the web application with ReactDOM.render() function.
ReactDOM renders components onto the web application. To generate a React app, make sure that you have Node.js installed on your machine as well as the npm or yarn package manager. As of this article’s published date, the command to generate a React application is:
npx create-react-app@5.0.0 <app-name> <--template typescript>As mentioned before, React can dynamically render variables on the web application as seen below.
All JavaScript code within JSX is wrapped in curly brackets. This includes variables. JSX just allows users to put HTML code into JavaScript. It is just an extension of React, and has a slightly different syntax than HTML.
Benefits of Using React
Now that we have gone over what React is, and some very basic syntax, let’s discuss the benefits of using React. First of all, React supports TypeScript. If you don’t know what TypeScript is, or why it is so beneficial, please read my article explaining why you should learn TypeScript immediately.
Additionally, as stated previously, React is component-based which means that you can reuse components multiple times. This allows for better code readability, more abstraction, and less code repetition, in contrast with HTML where code is repeated on numerous occasions.
React comes with React-Native, which is a framework for building mobile applications. Therefore, if you are not into web development, but rather mobile development, then React-Native is a great option. Both React and React-Native are developed by Facebook and have the same syntax (with a few exceptions).
Finally, React.js has THE LARGEST community out of all the JavaScript front-end frameworks. It even surpassed jQuery, which is considered by all to be the King of JavaScript frameworks, as the most used framework. A lot of developers have designed frameworks on top of React, such as Next.js, and even created UI Libraries to help with animations and styling. A larger community and more use cases in real-life applications mean that there are more job opportunities. Netflix, Airbnb, UberEats, and Revoteen, are just a few companies that use React for their web application. In addition to everything else, React also has a very low learning curve due to its simple and elegant syntax. React’s vast community will guide you along the way as you learn React, and many common errors that you might encounter will already be answered online.
Conclusion
We talked about what front-end frameworks are, and we dove deeper into why React is such an amazing framework. It is loved by numerous developers and if you can, start learning it now! There are many React.js developer roles out there, and by learning React, you have a chance of landing that position. In addition, if you like CSS and design, and you already have experience with JavaScript, then consider building the next React UI library! There are infinite possibilities of what you can accomplish with React, and that is what makes it such an awesome framework!
Write your mind, or read others’. Visit The Academically Driven!
Email: theacademicallydriven@gmail.com
Instagram: @theacademicallydriven
Facebook: @theacademicallydriven
LinkedIn: The Academically Driven
Twitter: @AcademicallyThe
