Rahat
React! Understanding the Fundamentals
Ok, so React is basically is a JavaScript library! But what is a library ?
Library VS Frameworks
We, Programmers ofter use the term ‘library’ and ‘frameworks,’ but what are these actually?
The technical difference between a framework and a library is that they control your coding differently. When you use a library, you are in charge of your application. You choose when and where to call the library. Whereas when you use a framework, the framework is in charge of the application. It provides you with some rules and guidelines that you have to follow to work with them.
So React is a library that helps us create composable, Interactive user interfaces. It is also Declarative, Component-Based, Easy to learn, and easy to use everywhere by just learning once.
Let’s learn some core React Features.
JSX
Fundamentally, JSX provides syntactic sugar for the React.createElement(component, props, ...children) function.
In case you’re wondering, JSX stands for JavaScript XML.
For example
<Button color="red" shadowSize={4}>
Click Me
</Button>Transforms into,
React.createElement(
Button,
{color: 'red', shadowSize: 4},
'Click Me'
)As you can see, JSX really makes coding react really simple and easy to write.
JSX is meant to look a lot like HTML syntax and describe UIs, which React transforms into DOM elements by compiling it with Babel.
Thank’s to JSX; we can now easily write fewer lines of code which we might have to write traditionally with React. That’s why one of the biggest features of React is JSX.
Components
Another cool feature of React is its components. A component is basically a Class or Functional Ui function which holds code that helps by erasing duplications from our codes, thus makes it easy to maintain.
Example:
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
</header>
</div>
);
}export default AppAbove is a functional component named APP, which returns some JSX. The return statement is the place where It will store all the UI markup of the component, which will later be rendered into the DOM.
Virtual DOM
The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by the ReactDOM library.
This basically means React works like a virtual DOM in the browser, where it keeps track of all our application states and then only render elements that change or needs re-rendering to the real browser DOM. This way, it keeps app performance really high.
https://miro.medium.com/max/60/1*cxYM-BFdvy6q0etoWCsFaA.png?q=20
Virtual DOM
One Way Data Flow
One of the good react concept is that It only allows one-way data flow, Which basically means all the data in React Can only slide downwards,
For instance, let’s imagine you have a component that renders another child component of its own.
function Parent() {
return (
<Child> </Child>
);
}Now you need some data from your parent component to show to the child component. How would you do that?
The answer is simple. You can pass the data directly to the Child component.
function Parent() {
return (
<Child data={data} > </Child>
);
}Which then can be accessible by the Child component as props.
But, You can never pass any data upwards to the flow. For example, to the parent component.
States
One of the most useful and powerful features of React is that It can handle states of an application made with React.
The state is basically a JavaScript variable where you can store some data, which React can manage in many ways.
One of the easiest ways to declare a state is by using Hooks, Specifically the useState() Hook.
const [state, setState] = useState(initialValue)In the above example, we can see the structure of declaring a state in React. The useState() function returns two objects, the first one is the state itself, and the second one is the function for changing the state.
Note: we can set an initial value for the use state function in the function's parentheses.
Hooks
Hooks in React are a new addition to the library in version 16.8. They let you use state and other React features without writing a class.
In the old React version, we had to write class-based components to use some useful and powerful features of React. And writing class-based components requires a lot of boilerplate codes and makes our codes cluttered easily.
In React version 16.8, React introduced hooks. There is a total of 10 built-in React hooks. They are :
useStateuseEffectuseContextuseReduceruseCallbackuseMemouseRefuseImperativeHandleuseLayoutEffectuseDebugValue
An Example:
const [state, setState] = useState(initialState);useEffect(
() => {
//Run some code here return () => {
Return some data if needed;
};
},
[dependency array],
);We can also create a custom hook if we want to 😉
Rahat
I am Rayhan Hossain Rahat. I am a Web Developer.