Core Concept of React JS

react js core concept

Today we will see 10 core concept of react. let’s get started.

what is react?

React is a JavaScript library. It helps us to build fast, user friendly web applications. we can also create mobile app with react native. it’s not a framework. react is declarative. react saves our time to build app and make the app more efficient. because it uses virtual DOM which we will cover later.

JSX- html in JavaScript

JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React. In vanila JavaScript to create a element we have to write document.createElement and appent id in a parent element with appendChild() . But in react with jsx we don’t have to do that.

see the code bellow

<div className="container" />
//this will compile the code like bellow
React.createElement(
  'div',
  {className: 'container'}
)

React Component

In simple language, React component is JavaScript function. If we say in a simple language, react component is everything which render in the browser. Component name must start with a capital latter. for component, codes become more reusable .

import React from 'react';
const TestComponent = () => {
return (
<div>
    <p>this is a component</p>
</div>
);
};
export default TestComponent;

Expressions in JSX

In react component we have to write javascript code in html code. then we use curly braces. for that the component become dynamic.

import React from 'react';
const TestComponent = (props) => {
return (
<div>
    <p>this is a component</p>
    <p>the name of the student is {props.name}</p>
</div>
);
};
export default TestComponent;

useState() hook

everything changes in a website calls a state. for example in facebook if you like a post the number of likes will increase by one. in a ecomerce website if you add something in cart the product count in the cart will increase. these are states. we can easily handle those state change with useState Hook.

const [studentCount, setStudentCount] = useState(12)

here studentCount is the state and setStudentCount is a function which will be used to set the new value of the state. and 12 is the default value of the state.

useEffect() hook

useEffect hook takes two parameter. First one is a callback function and second one is a dependence array. the function called first when the coomponent is mounted. after that it will call the function if the dependence array in modified. if the dependence array is not declraed the the useEffect will call the functin for an infinite time.So you must declare at least an empty array.

useEffect(()=>{
    fetch('https://jsonplaceholder.typicode.com/users')
        .then(res=>res.json())
        .then(data=>console.log(data))
},[])

Virtual DOM

when something change in website react create a virtual DOM and store in device memory. then it compare the real dom and virtual dom . and updates only that part which has been changed. as a result the site becomes very fast.

Conditional rendering

conditional rendering means to render something in the DOM on a condition . if the condition is true react will render the element. else ract will render other element. follow the code bellow.w can do that with ternary oparator.

import React from 'react';
const practice = () => {
return (
<div>
{
    isMailValid?<p>Email is valid</p>:<p>Email is not valid</p>
}
</div>
);
};
export default practice;

Optimizing Performance of react app

to optimize the performance of react app you can do some work. you can use single page production build. also code spliting will make the app faster.

Responding to user events

in vanila javascript we had to do lost of work to add a eventlistenter.

const button = docuement.getElementById('btn');
button.addEventListener('click',clickHandeler)

but in react we can do that very easily.

import React from 'react';
const practice = () => {
return (
<div>
<button onClick={clickHandeler}>click me</button>
</div>
);
};
export default practice;

that was 10 fundamental thing about react. hope you liked it. thank you for reading.