React Concepts in my note

React: is a JavaScript library for building user interface. It’s not exactly a framework.

DOM: is “Document Object Model”. It’s the browsers’ programming interface for HTML and XML documents that treat them as tree structures.

When we tell React to render a tree of elements in the browser, it first generates a virtual representation of that tree and keeps it around in memory for later. Then it’ll proceed to perform the DOM operations that will make the tree show up in the browser.

Key Features of React:

• JSX: it’s an HTML and XML like syntax used by ReactJs.
• ReactJs is made up of multiple components. A component can be reusable.
• One-way data-binding gives you better control throughout the application.
• Virtual DOM works like one-way data binding. It checks the representation of previous DOM and new DOM and then only update the actual changes on the real DOM.

ReactDOM.render: is basically the entry point for React application into the browser’s DOM. It has two arguments:

• WHAT to render to the browser. This is always a React element.
• WHERE to render that React element in the browser.

React element: is a VIRTUAL element describing a DOM element. It’s what the React.createElement API methods return.

JSX Expression: we can include JavaScript expression using a pair of curly brackets anywhere within JSX.

const name = “Araf”;

const element = <h1> hello!, {name}</h1>;

ReactDOM.render(

element,

document.getElementById(‘root)

);

Creating Components using Class: React support creating components through JavaScript class syntax.

Create a Laptop component:

class Laptop extends React.Component {

render() {

return <h2> This is a Car. </h2>

}

}

Display a Laptop component:

ReactDOM.render(<Laptop/>, document.getElementById(‘root’));

Hooks: Hooks are a new addition in react 16.8. They let us use state and other React features without writing a class.

• useState.
• useEffect
• useContext
• useReducer

Rules of Hooks:

• Only call hook at the top level.
• Only call hook from React Function Component.

Virtual DOM: is only a virtual representation of the real DOM. Every time the state of our application changes, the virtual DOM gets updated instead of the real DOM. It’s much faster and efficient.

How it’s work:

• When state changes occur, the virtual DOM updated and the previous and current version of virtual DOM is compared which is call ‘diffing’.
• Then the virtual DOM sends a batch update of the changes to the real DOM to update UI.

Props in JSX: we can pass any JavaScript expression as a props by surrounding it with {}.

<MyComponent foo={1 + 2 + 3} />

For MyComponet the value of props.foo will be 6 because the expression 1 + 2 + 3 gets evaluated.

defaultProps: can be defined as a property on the component class itself to set the default props for the class. This is used for undefined props but not for null props.

class CustomButton extends React.Component {

// …

}

CustomButton.defaultProps = {

color: “blue”

}

If props.color is not provided, it will be set by default to ‘blue’.

Prop-types: runtime type checking for React props and similar objects. PropTypes was originally exposed as part of the React core module and is commonly used with React components. This package is compatible with React 15.3.0 and higher.

React will automatically check the propTypes you set on the component, but if you are using PropTypes without React then you may want to manually call PropTypes.checkPropTypes.

• JSX: when you looking at React examples you have probably seen JSX but React code can be written in plain JavaScript also.
• Declarative: In React we use declarative style to write our components.
• Data goes down: In React data goes down the tree of components.
• Event goes up.
• Keep the state small.