Basic concepts of React

1. Library vs. Framework in JS:

In library we can call functions based on our necessity but in framework we are bound by set by the rules of framework, we can’t control the flow of work.

2. Document Object Model(DOM) in JS:

When a site is loaded on browser, it makes a DOM of that site. DOM treats the whole HTML page like tree of objects, which is helpful to make html dynamic. With help of DOM concept js can access and change all the html elements, attributes, listen to event change and also change the css styles of a web page.

3. React.js:

React is a popular js library. It creates virtual DOM for manipulate the actual DOM. It is component based simple way to create interactive UI’s. Also acts with state change. With react we can change, add, update and delete any DOM node very easily.

4. JavaScript XML (JSX) in React:

Developer can easily write HTML in js using JSX. It doesn’t require createElement() or appendChild() methods.

const element = <h1>Hello World</h1>;

ReactDOM.render(element, document.getElementById(‘root);

In UI output will be Hello World

JSX made easier to write HTML in react. We can write expressions, variables, props, dynamic element using curly braces. A large block of HTML can be written using JSX. Also JSX is very useful for conditional rendering components. Closing is very important in JSX otherwise it will throw an error.

5. defaultProps in React:

defaultProps used in Class component. If any property vslue is not defined for any class component, the value set in default props can be used. But not for null property.

class Header extends React.Component {

// …

}

Header.defaultProps = {

color: ‘red’

};

If props.color = ‘yellow’ is provided header section’s color will be yellow if not it will be red from defaultProps.

6. PropTypes in React:

In react we use components, in components attributes or known as props are used like HTML tag.

<Button color=’red’ size={20}>

Here in Button components color and size are props, anything other than string must be in {}.

If a developer using other developer made component, than that developer sometimes need to know what props are required and also the correct type for that component. To solve this PropTypes is a solution, it defines type and which props are required. To get this work on a site we can install npm install --save prop-types package.

7. Optimizing performance in React:

By ensuring components receive only necessary props, we can speed up react performance. Functional components are a help of that process. Also use of production build we can optimize performance of ract site.

8. Conditional Rendering:

Rendering components based on logic makes easier to code for developers. Using if else or ternary operator, developer can set logic for rendering.

9. Benefits of Component:

With components writing code and editing gets easier. It is helpful for creating larger sites. Writing meaningful name for components is a good practice for a developer.

10.Hooks in react:

Hooks allows us to use react features without having to write class. Hooks don’t work inside classes. Hooks doesn’t require this for binding event handlers. Hooks ensure reuse of components.