Fundamental React.js

React is the most popular front-end JavaScript library in the field of web development. It is used by large, established companies and newly-minted startups alike (Netflix, Airbnb, Instagram, and the New York Times, to name a few). React brings many advantages to the table, making it a better choice than other frameworks like Angular.js.

1. What is React?

React is a JavaScript library created for building fast and interactive user interfaces for web and mobile applications. It is an open-source, component-based, front-end library responsible only for the application’s view layer. In Model View Controller (MVC) architecture, the view layer is responsible for how the app looks and feels. React was created by Jordan Walke, a software engineer at Facebook.

2. Why React?

React’s popularity today has eclipsed that of all other front-end development frameworks. Here is why:

• Easy creation of dynamic applications: React makes it easier to create dynamic web applications because it requires less coding and offers more functionality, as opposed to JavaScript, where coding often gets complex very quickly.
• Improved performance: React uses Virtual DOM, thereby creating web applications faster. Virtual DOM compares the components’ previous states and updates only the items in the Real DOM that were changed, instead of updating all of the components again, as conventional web applications do.
• Reusable components: Components are the building blocks of any React application, and a single app usually consists of multiple components. These components have their logic and controls, and they can be reused throughout the application, which in turn dramatically reduces the application’s development time.
• Unidirectional data flow: React follows a unidirectional data flow. This means that when designing a React app, developers often nest child components within parent components. Since the data flows in a single direction, it becomes easier to debug errors and know where a problem occurs in an application at the moment in question.
• Small learning curve: React is easy to learn, as it mostly combines basic HTML and JavaScript concepts with some beneficial additions. Still, as is the case with other tools and frameworks, you have to spend some time to get a proper understanding of React’s library.
• It can be used for the development of both web and mobile apps: We already know that React is used for the development of web applications, but that’s not all it can do. There is a framework called React Native, derived from React itself, that is hugely popular and is used for creating beautiful mobile applications. So, in reality, React can be used for making both web and mobile applications.
• Dedicated tools for easy debugging: Facebook has released a Chrome extension that can be used to debug React applications. This makes the process of debugging React web applications faster and easier.

The above reasons more than justify the popularity of the React library and why it is being adopted by a large number of organizations and businesses. Now let’s familiarize ourselves with React’s features.

3. Types of components-

1. functional component

• Below, JavaScript function is functional component, because it accepts a single “props” object argument with data and returns a React element.

function HelloReact(props) {
		return <h1>Hello, {props.name}</h1>;
	}

2. class component

• Component is created using an ES6 class.

class HelloReact extends React.Component {
  render() {
	return <h1>Hello, {this.props.name}</h1>;
  }
}

3. Stateful/smart component

• Component using state is known as stateful i.e. state that gets initialized in the constructor.

class _Statful extends React.Component {
	constructor(props) {
		super(props);
        state = {...};
	}
		render(){
	    ...
	}
}

4. stateless/dumb component

• Components don’t have state are referred as stateless
• Stateless component is either function or a class(but unless you need to use a life cycle hook in your components, you should go for stateless functional components).

const _Stateless = props =>{
	return {
		....
	}
}

5. Pure Component

• Purecomponent is guaranteed to return the same result given the same props and state.
• React.PureComponent is used to create Pure Component
• Functional component is a good example because, given an input, you know what will be rendered.
• Class components can be pure too if their props and state are immutable.

4. Props

• We can intialize props in constructor

class HelloReact extends React.Component{
    constructor(props){
     super(props);
   } 
}

• Props is an input to component which are immutable.
• Props are read-only, when you declare component you never changes its own props.
• Props are used to pass data from parent to child or by the component itself.

5. DefaultProps

• We can add default props to component.

HelloReact.defaultProps = {
   headerProp: "Header from props...",
   contentProp:"Content from props..."
}

6. Props validation

• We can add validation on props as well.
• For that we need to import “PropTypes” from ‘prop-types’.

HelloReact.propTypes = {
  name: PropTypes.string, //name must be type string
  age: PropTypes.number, // age must be type number
  propArray: PropTypes.array.isRequired, // propArray is required, else gives error
  displayUserData: PropTypes.func  // it must be function
};

7. State

• We can intialize state in constructor.

class HelloReact extends React.Component{
    constructor(props){
     super(props);
     this.state = {name: '', age: ''};
   }
}

• State is used to keep track of information between any renders.
• Components data will be stored in component’s State which can be modified based on user action or other action.
• When a component state is changed React will re-render the component to the browser.

Ways to update state

1. this.setState({…})
2. this.setState(function(prevState, props){…})
3. this.setState(()=>{…})

8. JSX (Javascript Syntax eXtension)

• JSX mainly used to create UI.
• JSX is neither HTML nor string.

const ele = <h1>Hello, world!</h1>;

• JSX produces React “elements” which will be then rendered to the DOM.
• JSX brings full power of Javascript(rendering).

9. JSX Expression

• We can put any valid JavaScript expression inside the curly braces in JSX. After compilation, JSX expressions become regular JavaScript.
• We can assign JSX to variable, we can pass/accepts JSX as arguments, we can return JSX from functions, we can use JSX inside for/if or any loops.

var name = "neaz"; //declared name variable
var displayName = <h1>Hi, {name}</h1>; //created variable and assigned JSX with expression name
ReactDOM.render(
  displayName, // rendered displayName
  document.getElementById('root')
);

10. Virtual DOM

React keeps a lightweight representation of the “real” DOM in the memory, and that is known as the “virtual” DOM (VDOM). Manipulating real DOM is much slower than manipulating VDOM because nothing gets drawn on the screen. When the state of an object changes, VDOM changes only that object in the real DOM instead of updating all of the objects.

It may all seem a bit overwhelming for now, so let’s first understand what DOM is, and then we’ll go through how VDOM and real DOM interact with each other.

• What is the Document Object Model (DOM)?

DOM (Document Object Model) treats an XML or HTML document as a tree structure in which each node is an object representing a part of the document.

• How do Virtual DOM and React DOM interact with each other
• When the state of an object changes in a React application, VDOM gets updated. It then compares its previous state and then updates only those objects in the real DOM instead of updating all of the objects. This makes things move fast, especially when compared to other front-end technologies that have to update each object even if only a single object changes in the web application.