React/ReactJS: Introduction
ReactJS is an open source JavaScript library created by Facebook for building user interfaces. It was developed by Jordan Walke, a Software Engineer at Facebook, and was first released on March, 2015.
Below we outline some of the key concepts and features prominent in ReactJS —
- Components — The fundamental reusable isolated blocks of code which are actually either JS functions or ES6 classes.
- Flux — An adaptation of Facebook's application architecture that utilizes unidirectional data flow from parent to child components.
-
JSX — A syntax extension to JS akin to XML. In ReactJS , the whole JSX is compiled into
React.createElement()function calls by Babel, which in turn outputs an object to be rendered by React into DOM. - Virtual DOM — A virtual light-weight abstraction of all the objects of the real DOM where the “diffing” algorithm is applied to update only the modified/updated parts in the actual DOM. In ReactJS, the actual DOM is not directly manipulated.
A basic understanding of HTML, CSS and JavaScript is a prerequisite to work with ReactJS.
Instagram, Yahoo Mail, WhatsApp Web are few examples of websites built using ReactJS.
Basics/Essentials
- Introduction
- First ReactJS App
- Change Port Number
- Environment Variables
- Add React/ReactJS to HTML
- JSX
- Components & Props
- componentWillMount() v/ componentDidMount()
- Event Handlers
- Props v/ State
- Passing Props (w/ Methods) to a Functional Child Component
- Update an Array State
- Router
- Refs
- HTTP Requests
- Dynamic Select/Option
- defaultValue v/ value