Intro To React.js Library
What is react ?
React is Javascript library for building user interfaces (UIs). React is the V (View) in MVC.
React is declarative, efficient, and extremely flexible. What’s more, it works with the libraries and frameworks that you already know like jQuery’s UI plugin.
Why React ?
React is probably one of the best choices for building UI. Good design, support and community.
React was built to solve one problem: building large applications with data that changes over time. To simplify the process of building complex UIs.
How was the idea to develop React conceived ?
Short: Conceived at Facebook. Heavily used on products made by Facebook and Instagram. Built to simplify the process of building complex UIs.
The story of React started within the confines of Facebook. React was created by Jordan Walke, a software engineer at Facebook. Jordan deserves all the credit for creating React. He was influenced by XHP, a PHP-based component system that is still in use at Facebook, but also by functional programming ideas.
Pete Hunt wanted to use React at Instagram, so he helped to extract React from Facebook-specific code. This prepared React to be open sourced.
Later, Facebook put a team of engineers behind React and also received great contributions from the open source community. Significant contributors include Sebastian Markbåge and Ben Alpert, among many others. Source
Sites Using React
Facebook, Instagram, Dropbox, NETFLIX, Airbnb, PayPal and More.
Prerequisites to use react :
Javascript basics
- Declaring variables
- Creating and invoking functions
- DOM the Document Object Model (basically how Javascript Talks to the Browser)
ES2015
- Class syntax
- Arrow functions
- spread operator
To understand some of the concepts under which React operates.
- Declarative
React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Source
I.e React is the V (View) in MVC that is used to render views like HTML pages dynamically based on some Props/state, which is often in the form of data. React then updates the generated views whenever the original state changes.
Declarative views make your code more predictable and easier to debug.
- The virtual representation of views in memory
For the browser’s case, we write HTML using JavaScript in React relying on the power of JavaScript to generate HTML that depends on some data, rather than enhancing HTML to make it work with that data. Enhancing HTML is what other JavaScript frameworks usually do (for example, Angular.js extends HTML with features like loops, conditionals, and others). Source
- Component-Based
Build encapsulated components that manage their own state, then compose them to make complex UIs.Source
Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
- Learn Once, Write Anywhere
You can develop new features in React without rewriting existing code.
React can also render on the server using Node and power mobile apps using React Native.
In order to write your first react components you have to be familiar with some of the features react offers like How to:
- Write React components
- Render data to the page
- Communicate components i.e pass data from one component to another?
- Handle user events
- Capture user input
- Talk to remote servers.
Now that we know what React is and what you have to covre to write React first component. Let’s start exploring how to build things in the next article.
