Introduction to React.js - Part 1

JavaScript and JavaScript libraries (brief explanation)

It is widely held and frequently advised that learners learn the fundamentals of any skill in order to gain a proper understanding of the concepts involved in the learning process, as is the case with JavaScript and React.js.

JavaScript is a scripting language used to create and control dynamic web contents, such as animations and slideshows, in order to reduce the unnecessary process and additional time involved in coding from scratch, JavaScript libraries (e.g React.js) and frameworks (e.g Vue.js and Angular.js) were introduced.

Although libraries and frameworks make common problems easier to solve, it is important to note that they have a critical technical difference, which is known as the inversion of control. The idea behind the concept is that libraries give you more control over the flow of your application, whereas frameworks do not. It is now clear that libraries give engineers more freedom during development.

So, JavaScript libraries are simply collections of pre-written codes that can be used to perform JavaScript tasks and also prevent code repetition (i.e. they are reusable codes), saving the stress associated with coding from scratch.

What is React.js

React.js is a free frontend, lightweight, and open-source JavaScript library for building user interfaces, it is built using JSX (JavaScript extension), which is a combination of JavaScript and XML. In React, elements are created with JSX, then JavaScript is used to render them on the browser. It is considered a JavaScript library and not a framework because of its flexibility.

Brief history of React.js

In order to address problems with code maintenance, Facebook software engineer Jordan Walke created React.js in 2011.

Facebook ads were becoming more popular and difficult to manage, so Facebook increased the number of engineers working on the product to manage the increased number of features that come with it, which subsequently led to a larger code base, which slowed the company down because it was difficult to manage all the updates, Jordan Walke built the Fax.Js prototype of React.

It was first used in the Facebook newsfeed in 2011, and Instagram later adopted it. React evolved over time, and Facebook made it open source in 2013.

React Native, a popular JavaScript-based mobile application framework was first released in 2015 to facilitate the development of Android and iOS applications.

##Features of React.js

React.js has grown in popularity as the best JavaScript library among web developers since its release in 2011, and it is currently the most used library in the frontend ecosystem.

Some of React's key features include:

• JSX

JSX is an abbreviation for JavaScript XML, a JavaScript syntax extension that extends ECMAScript (European Computer Manufacturers Association Script) so that XML or HTML texts can coexist with JavaScript or React codes. Transpilers like babel use the syntax to convert HTML text found in javaScript files into standard JavaScript Objects that a JavaScript engine can parse.

• Virtual DOM

The virtual DOM is a copy of the original DOM object; unlike vanilla JavaScript, which updates the DOM whenever we make changes to our web applications, React.js uses the virtual DOM to make the application faster and ensure there is no memory wastage by ensuring that new modifications are rendered in the virtual DOM, then it checks the previous changes in the original DOM and compares it to the recent changes; after the comparison, the real DOM will then be updated.

• Components

One of the primary goals of React.js is to ensure code reusability, and the use of components is a fantastic feature that allows this to happen. Every React application is made up of components, and they make building user interfaces much easier. There are two kinds of components in React: functional components and class components.

• Unidirectional Data Flow

React.js is built to support unidirectional data flow, which means that components should only receive data in one direction, i.e. child components should only receive data from parent components, and parent components should only pass data to their children.

• Simplicity

React employs JSX to make the application easy to code and understand; this ease of use also makes our code reusable.

Advantages of React.js

• It is Fast

React.js makes use of the virtual DOM to speed up rendering and improve the overall user experience. It also makes applications lighter, resulting in improved performance.

• Reusable Components

Each component in a React.js application is reusable; it is the heart of all React applications; they can be nested, allowing the creation of a complex application constructed from small building blocks.

• Performance

React.js was created in response to performance issues at Facebook; it provides a good user experience for web apps despite changes in the DOM.

• Declarative

React allows you to describe the final state of the user interface; it focuses on what the program should accomplish rather than specifying all of the details of how the program should achieve the result.

• Easy to Learn

React has a very low learning curve and is more focused than many other frameworks or libraries. Because of its simplicity, we can build and maintain web applications faster.

Because of its simplicity, learners can quickly pick it up and begin building projects after thoroughly understanding the tutorials and documentation.

• SEO Friendly

The page-load time is one of the factors that affect Search Engine Optimization rankings on Google and other browsers, and because React applications have a very high rendering speed, they have a lower page-load time, so they rank higher than other web apps built with other technologies.

• Community

With over 157000 stars on GitHub and over 250000 questions on StackOverflow, React.js has one of the highest community support. There are many contents on several platforms that can help solve React-related issues, such as Youtube, Quora, and Reddit, among others.

Why learn React

If you still have reservations about learning React, that's fine; however, in today's world, where developers must create complex web applications and user interfaces in record time, learning it is highly recommended due to the ease of development that comes with it.

React has many benefits, and because of its importance, many organizations and developers are promoting its learning and development; as a result, React has gained the most popularity since its release in 2011.

Conclusions

I hope I was able to convince you to learn React, trust me, you would definitely love it from the first time you picked it up and ask yourself why you didn't start it earlier, that's how I felt at least and I'm sure you would feel the same.

I can't wait to write more about what I have learned and share my frontend development journey guys.

Ja ne,

Happy Coding.