React JS Topics For Beginners

ReactJS is the most popular JavaScript library, not a JavaScript framework. This is a component-based JavaScript library that is to build single-page applications. React was first introduced in 2011 by the Facebook developer and Facebook was the first React-based web apps. Nowadays react is also popular for client-side and server-side language. So gradually react online resource is increasing to create a website more interactive. Let’s learn some important topics about ReactJS.

1. Virtual DOM

This is the more core feature of React. Actually, virtual DOM works like tree structures. If you create any website using vanilla JavaScript, HTML, CSS every time, if you change anything full website will re-render. But this is really bad for a large dynamic website re-render means it takes too much time to load. So gradually website performance and user engagement will go down.

React developers solve this problem by virtual DOM. In React application, if any change happening it will not fully re-render the web apps. It will only re-render the changed elements. So, this will save much time and increase user interaction in that web apps.

2. React Hook

Hooks are totally new features in react 16.8 version. Hooks is special function in react component. React hooks can not be used in class components. Every hooks name is start with the word “use”. This is the hook name

useState and useEffect

hook is declared as like this way:

useEffect(() => {
effect
return () => {
cleanup
}
}, [input])

3. Spread attributes

This is ES6 spread attributes for ReactJS. If you want to pass full data from one component to another component this spread operator helps properly to send full data by using ( … ) three dots. For example:

function data() {
const props = {firstName: 'Abdul', lastName: 'Hannan'};
return <Greeting {...props} />;
}

So here you can se I am sending all props objects to <Greeting> components through spread attributes this means (… ) three dots.

4. JSX in React

JSX allows writing any form of HTML code in React JS. It was introduced in ES6. So in the same javascript file, you can write HTML and javascript code. Without any doubt JSX allows to transform HTML into React elements for example:

const reactElement = <h1>I Love React</h1>;
ReactDOM.render(reactElement, document.getElementById('root'));

5. React performance optimize

If we think about web apps optimization. As a React Developer our first priority is website performance optimization that means speedup our website and how our website is performing in search engine. So, we can optimize react apps in numerous ways. First, we must use the minified Production Build react apps.

You can check this React developer tools for chrome extension tools. If you open any react web apps then click on the react icon top of the extension page, if you see this message with blue icon “This page is using the production build of React” that is perfect or if you see red icon with this message “This page is using the development build of React” that app is not perfectly optimized so in this way you will find lots of optimization solution for web apps. Just click here.

6. Components

Components are the most helpful elements in react JS. You can split webpage UI into different components. Currently, components are familiar as classes. React components are reusable you can use one component on a different webpage. Component example:

function Component(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Hannan" />;
ReactDOM.render(
element,
document.getElementById('root')
);

7. default props

default props are known as property of react component which is used to set a default value for the props argument in reactJS. Default props is used for undefined props. But it is not defined or null props. Example:

class Button extends React.Component {
}
Button.defaultProps = {
color: 'purple'
};

8. React render

Actually react render method is used to render all react components into virtual DOM. First time react element rendered into the container, then it was updated to react render. Example:

ReactDOM.render(element, container[, callback])

9. Declarative

Declarative use to write components in reactJS. For example we can explain this in very easiest way:

<select value={this.state.value} onChange={this.handleChange}>
{givenarray.map(element => <option value={element.value}>
{element.text}
</option>)}
</select>

Here a select example is given, you can see here we do not use for loop to create mapped collection.

10. Conditional rendering

Conditional rendering actually works with conditional logic. Conditional rendering always works with one part if the logic met the first condition it will not go to the next condition. Example:

React.createClass({
initalState () {
return {
hideTodos: true
}
},