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.