React

React, also known as React.js or ReactJS is a JavaScript library used for building user interfaces. It’s source and maintained by Meta (formerly Facebook) in collaboration, with a community of developers and companies. React is commonly employed in developing single page applications, mobile apps, and server rendered applications alongside frameworks like Next.js. 

Unlike frameworks that handle aspects of web development, React focuses specifically on UI design and component rendering to the DOM. To enhance functionality beyond UI design, React applications often incorporate libraries for tasks such as routing and client side operations. One key advantage of using React is its ability to update the parts of a page that have changed, reducing updates to unaltered DOM elements.

History

Jordan Walke, a software engineer working at Meta developed React. Initially called it “F Bolt” before renaming it to “FaxJS.” You can find the version of the project, in Jordan Walkes GitHub repository. The idea for React was inspired by XHP, an HTML component library designed for PHP.

In 2011, React made its debut on Facebook’s News Feed. Was later integrated into Instagram in 2012. The official release of the project occurred at JSConf US in May 2013 signifying a milestone in its growth and adoption.

React Native, which allows for Android, iOS, and UWP development using React was unveiled at Facebook’s React Conf in February 2015. Made open source in March of the same year.

On April 18 2017 Facebook introduced React Fiber, which introduced internal rendering algorithms that differed from the Stack algorithm. React Fiber has paved the way, for improvements and functionalities in the React library. While the programming syntax in React remains consistent there has been a shift in how that syntax’s executed. The previous rendering system, Stack encountered difficulties with changes as it struggled to handle animations simultaneously due to its sluggish nature. Conversely fiber breaks down animations into segments that can be processed across frames.

Likewise a webpage’s layout can be segmented into parts that can be independently managed and altered. “Fibers” represent JavaScript functions and virtual DOM objects that enable operations and updates leading to a display on the screen.

React 16.0 was made available to the public on September 26 2017.

On August 10 2020 the React team unveiled the release candidate for React v17.0 – for being a significant release without substantial alterations to the React developer facing API.

March 29 2022 saw the release of React 18 which brought forth a new concurrent renderer, automatic batching capabilities and support for server side rendering, with Suspense.

Let’s look at the history of React.js on a timeline.

2010: The First Signs of React

• Facebook incorporated xhp into its PHP framework and made it available to the public. Xhp enabled the development of composite components, a syntax that was later adopted in React.

2011: An early prototype of React

• Jordan Walke developed FaxJS, an initial version of React, which included implementing a search feature on Facebook.

2012: Something new started at Facebook

• Facebook encountered difficulties, with ad management, which led to the search for a solution. Jordan Walke took the lead in creating React as a prototype to tackle this challenge.
• Following Facebook’s acquisition of Instagram on April 9th there was an increasing interest from Instagram in incorporating Facebook’s technology. As a result, there was a movement to separate React, from Facebook and release it as source primarily championed by Pete Hunt.
• At the TechCrunch Disrupt event, in San Francisco from September 8th, to 12th Mark Zuckerberg acknowledged that a key mistake they made was putting faith in HTML5. He reassured users that Facebook is working on enhancing mobile user experiences.

2013: The Year of the Big Launch

• From May 29 to 31 JS ConfUS hosted an event where Jordan Walke presented React later releasing it as source. Interestingly there were doubts, about React among the audience perceiving it as a step. This perception stemmed from the fact that early adopters attended the conference while React aimed at attracting innovators. However, Reacts creators promptly addressed this issue by launching a ‘React tour’ to win over skeptics and gain supporters.
• By June 2 React (developed by Facebook) was accessible on JSFiddle. Subsequently on July 30 and August 19 React and JSX became available in Ruby on Rails and Python applications respectively.
• At JSConfEU 2013 on September 14 and 15 Pete Hunt delivered a speech urging a reevaluation of practices in the industry.
• Finally, on December 17 David Nolen introduced OM based on Reacts framework showcasing its strengths to adopters. This demonstration underscored how React surpasses existing options and bolstered its reputation, for capabilities.

2014: The Year of Expansion

• React slowly established its credibility. Started drawing in a group of users. In order to reach out to an audience the decision was made to move away, from solely showcasing Reacts technical advantages and instead focus on its reliability. This shift in strategy was intended to pique the interest of companies, like Netflix.
• In 2014 the #reactjsworldtour conferences were initiated to encourage community involvement and win over doubters.
• React Developer Tools became part of Chrome Developer Tools on January 2nd.
• The month of February saw the launch of Atom, a text editor, with flexibility.
• React London 2014 event took place from April 7th to 9th.
• In June ReactiveX.io was introduced, followed by React Hot Loaders release on July 13th allowing reloading of React components, without losing their state.
• On December 12th PlanOut was introduced as a language specifically designed for experiments.
• PlanOut version 0.5 was rolled out with a React based language editor that complies with Facebook’s standards.

2015: React is Stable

• In the part of 2015 Flipboard introduced React Canvas. That year Netflix also expressed interest, in React. Airbnb joined the trend. Began using React around that period well. 
• During a presentation at React.js Conf 2015 on January 28–29 Facebook presented the version of React Native. 
• In February Relay and GraphQL were introduced at the event. Facebook later announced on March 25 that they were making React Native for iOS available on GitHub. 
• Subsequently, Redux was launched by Dan Abramov and Andrew Clark on June 2. 
• The updated version of React Developer Tools was officially released on September 2 followed by the release of React Native for Android, on September 14.

2016: React gets mainstream

• In March Mobx was initially launched. 
• The React.js Conf 2016 was held in San Francisco on February 22–23 during which Isaac Salier Hellendag unveiled Draft.js. 
• React Storybook was introduced in March. ReactEurope 2016 took place on June 2–3. 
• The Error Code System, in React was introduced on July 11. 
• Blueprint, a React UI toolkit, for the web made its appearance in November.

2017: The year of further improvements

• In the beginning of 2017 Airbnb introduced their open source tool called React Sketch.app.
• React Fiber became publicly available at F8 2017 on April 19th of the year.
• During September React, Jest, Flow and Immutable.js underwent a relicensing process.
• Subsequently, on September 26th React 16 was released with features such, as error boundaries portals, fragments and the innovative Fiber architecture.
• By October Netflix had ceased its use of client side React.js.
• Finally an updated version of React (v16.2.0) was launched on November 28th with support, for fragments.

2018: What’s up with React now?

• Dan Abramov discussed topics beyond React 16 at the JSConf Iceland event held from March 1 to 2. 
• React 16.3.0 was officially released on March 29 2018.

React Native

React Native, a UI software framework created by Meta Platforms, Inc. is source. Enables developers to build apps, for multiple platforms like Android, iOS, Web, Windows and more. Companies such as Facebook, Microsoft and Shopify use this framework that merges React, with platform capabilities. Moreover React Native is also utilized in developing virtual reality apps for Oculus.

History

In 2012 Mark Zuckerberg admitted that Facebook’s mistake was relying heavily on HTML than native technologies. Choosing HTML5 for the version resulted in an app, with slow data retrieval. He promised users that Facebook would soon unveil a experience.

Within Facebook Jordan Walke developed a method for creating UI components for iOS using a background JavaScript process setting the groundwork, for the React web framework. They hosted a hackathon to tune this idea and facilitate the creation of native apps using this technology.

In 2015 after effort Facebook launched the iteration of Reacts JavaScript Configuration. During a presentation Christopher Chedeau revealed that Facebook had successfully integrated React Native into its Group App and Ads Manager App production environments.

Implementation

The fundamental ideas underlying React Native are quite similar, to those of React. The main distinction lies in how React Native handles the Document Object Model (DOM) compared to React. Unlike React React Native doesn’t directly modify the DOM using the Virtual DOM mechanism. Instead it functions in a process on the device and communicates with the platform through serialized data passed over an asynchronous bridge. This process involves interpreting JavaScript code provided by developers.

In React Native components act as wrappers for existing code. Interact with native APIs using a declarative UI approach that combines JavaScript functionality. Many contemporary React Native applications prefer TypeScript over JavaScript due to its type safety features.

While React Native’s styling syntax may resemble CSS it deviates from employing HTML or CSS. Instead it relies on messages, from the JavaScript thread to manipulate views.

Furthermore, React Native supports development for both Windows and macOS platforms, currently overseen by Microsoft.