Week 04

React JS

React is a javascript library for building user interfaces. Its maintains by Facebook. Original author of react is Jordan Walke. React was initially released in 29th May 2013.

React is use as one of the base in the developing Single page applications and Mobile Applications. React is only concerned with rendering data to DOM. React applications usually requires the use of additional libraries for state management and routing.

Notable Features

Components

• React code is made using entities called components. Components can be rendered to a specific element in the DOM using React DOM library.

Functional Components

• Declared with function that returns some JSX.

Class-based Components

• Declared using classes, they also know as "stateful" components

Virtual DOM

• React creates an in-memory data structure case, computes the resulting differences and then update the browser's displayed DOM efficiently. 

Life Cycle Methods

Life cycle methods are hooks that allow execution of code at set points during a component's lifetime.

• shouldComponentUpdate - Allow to prevent unnecessary re-rendering of a component by returning if a render is not required.
• componentDidMount - This method called once the component has mounted. Commonly use trigger data loading from a remote source via API.
• componentWillUnmount - This method called before the component turn down or unmounted. This is commonly used to clear resource dependencies.
• render - This method will call every time the component state is updated.

Props and State

Props are variable passed to it by its parent component. State is variable but directly initialized and managed by component. State can be initialized by props. Props can be used to set set the internal state based on a prop value in the constructor. Props are also used to allow child components to access methods in the parent component. Props are read only and states is read and write enabled. State is used to keep data which can updated.

References:

https://en.wikipedia.org/wiki/React_(web_framework)

https://flaviocopes.com/react-state-vs-props/