Getting Started with React

Wiki History

React was created by Jordan Walke, a software engineer at Facebook, who released an early prototype of React called “FaxJS”. He was influenced by XHP an HTML component library for PHP . It was first deployed on Facebook’s News Feed in 2011 and later on Instagram in 2012. It was open-sourced at JSConf US in May 2013.

What is React ?

According to React official documentation —

“ React is A JavaScript library for building user interfaces ”

So , basically it is a component based library which is used to build User Interfaces ( UI ). The site that you are currently using itself is build using React . Surprised , Huh !

But , what are Components ?

Let me explain by taking the example of this site’s Home Page .

Components in Medium Website

Components can be thought of like as fragments or building blocks for website . For Ex : Navigation Bar , Footer , Body section . Components too can be composed of sub-components .

Body section ( component ) can also have many sub-sections (sub-components) like —

  • Recent Posts (Top-Left)
  • Latest Post (Top-Right)
  • Trending Section (Bottom)

as shown in the above picture .

Why to use React to build websites ?

So, to answer this question , we will look at the main advantages of using React :

Speed

React based sites are way too faster as compared to traditional sites. This is because rather than rendering the whole page again ( as in traditional sites ) , React only renders the changes . What that means is whenever a DOM(Document Object Model) is rendered on the browser , React generates a copy of that DOM which in technical terms is known as Virtual DOM . So whenever some actions are performed on a website like clicking button , scrolling, hovering etc a new copy of DOM is generated and compared with the virtual DOM . React finds the components that were changed and only render them again rather then rendering the whole page . This small optimization makes big difference .

Re usability

As you might have already guessed , React Components are reusable . Lets understand it better with an example . Ex : As we have seen in almost every website a navigation bar is always there at top . So , whether we are at website’s about page , contact page or Home page ,we will always be requiring navigation bar . So before introduction of React the traditional sites contain a lot of redundant code . Redundant in the sense that every time we require navigation bar on a page a programmer needed to hard-code it . So this is where React makes best use of Components which are flexible (can be easily modified) and if we want to make some changes in the navigation bar rather than going to each and every place to edit the code we can simply edit the component corresponding to that display item ( in our case it’s the navigation bar ) and changes can be made easily across large scale websites .

It was just a brief overview .There are many things to explore yet . You can find more about React in its official documentation .

Thanks for Reading . Have a Nice Day :)