Want To Know About React
Know Few Things about React, JSX, and Many More
1. React
React is a JavaScript library. It’s not a framework. So there are many more libraries that need to be used to create or form a complete solution within react. React is becoming more popular because of its capability to interact with UIs and provide what is asked. Most of the browsers support JavaScript, that’s why it is easier for a react application to load faster and in much efficient way.
Library vs Frameworks:
Both libraries and frameworks is collection of lots of codes made by other teams or developers. But there is a basic difference.
Ø In the case of the library you have to choose where to call it and use it. It is more flexible and doesn’t require loading a whole lot of codes. Using a library means you have full control on your application and a user can choose any library. The application flow is in your control. For library you have to decide from little things to bigger things like complete design structure. You can modify it whenever and wherever you want.
Ø But for frameworks it is totally different. Frameworks are strict lines of codes that tell you when to use them and where you can use them. That means the workflow is not in your control. You cannot write codes everywhere you want rather frameworks choose for you to how to code or else it will keep breaking.
But in frameworks, you don’t needs to be worried about design structure because already smart and best designs are available for you to use.
So basically, in the case of React, it gives you a whole lot of control over your application. You
Just needs to tell it what to do, react converts your declarative code language how to do it,
And gives you the required interface according to your code.
2. React Trees And Tree Reconciliation
When we run something in a browser the DOM API of that browser is responsible for what is happening right now in that browser. Because every operation or task we perform happens in the same single thread that’s performing the whole operation. So it is unwise to do something with the main DOM. To stop the re-render tree of elements in the browser.
So when there is a need to render a tree, react first creates a virtual representation of the tree keeps it in memory. When something is updated and react creates the representation of the updated tree and compares the 2 versions of the tree and finds out where changes have been made. React then changes that part of the body or includes it under the branch of tree elements. In this way, the whole tree doesn’t need to be updated and rendered every time we change something or do something with react state.
Reacts communicates with the DOM to exactly made the changes that you have asked. React mostly shows functional components to the user. This is why for every operation a state is set and managed to do that specific operation or changes not whole tree elements.
3. React Components
All the user interfaces are presented as small components. Components are formed for every interface which is similar in look but different in data. Components are very much useful and reusable and works like functions. Components are full of states which control the specific operation whenever a user interacts with the machine.
Whenever a user changes or interacts a state is set to perform those changes and when the operation is done the state comes to normal. Components are formed with props that contain the data that needs to be shown. Components are like functions. Functions are reusable, recallable, re-creatable, and can be formed into the bigger functions to do the major big operation. Small components also form bigger components to make a big user interface structure with smooth communications and interactions.
import React from ‘react’;
const Home = () => {
return (
<div>
</div>
);
};
export default Home;
This is a function component
4. React Hooks
React hooks are special functions. So it needs to be called just like a normal function. So calling a special function in react components to do a specific function-based task is what hooks are. React hooks can only be called in react function components, not in class components. Hooks comes very handily as it is very powerful with some hooks sets the state of a component, in an easy way a component sometimes only depends on hooks to display data to interfaces. useState() is something like that. Other hooks like useEffect() is used to fetch API and load data in a state. String data is converted to object data and presented to a developer. Then a developer takes the data to show it to the interface according to his plan.
import React, { useEffect, useState } from ‘react’;
const Home = () => {
const [details, setDetails] = useState();
useEffect(() => {
effect
return () => {
cleanup
}
}, [input])
return (
<div>
</div>
);
};
export default Home;
This is how useState and useEffect hooks are used in functional components. Remember the hooks always needs to be defined.
5. JSX
JSX stands for JavaScript XML. It allows us to write HTML tags in react. Html elements become react elements because of JSX. It place the elements in dom without createElement() or appendChild() methods. JSX is an extension of the JavaScript language and its expressions define what type of elements needs to be rendered. For example, if a tag or element starts with a capital letter means it’s a component. In JSX expression all the elements must be properly closed and multiple elements must have one top-level element like a parent element. Dot notation can be used to refer to a react component. React must be in scope to render as it directly renders from JavaScript.
User Defined components must be capitalized like below. Example
import React from ‘react’;
function captainCool(props) {
return (
<div>
</div>
);
};
Not like this
But like below example
function CaptainCool(props) {
return (
<div>
</div>
)
}
export default CaptainCool;
6. Props in JSX
Props are arguments that are passed into react components. It is passed in a components via html attributes. Props are also the parameter to pass data from a component to another component. It is like function arguments and attributes for html.
import React from ‘react’;
import Navbar from ‘../Navbar/Navbar’;
const Home = () => {
return (
<div>
<Navbar color=”blue whale”></Navbar>
console.log(brand)
</div>
);
};
export default Home;
This is how you send a prop to a component. It works like a parameter
And if in Navbar component {props.brand} command is run it will show blue whale.
The component receives the arguments as props object. And if a variable needs to send it needs to be wrapped in curly brackets. Multiple data in an object can also be passed using curly brackets as the props type will be variable.
const Home = () => {
return (
<div>
<Navbar city={{ name: ‘rajshahi’, people: 1000000, country: ‘Bangladesh’ }} color=”blue whale”></Navbar>
console.log(brand)
</div>
);
};
export default Home;
7. setState()
setstate() is the primary method to set response for a user after he/she interacts with the machine. Whenever data changes for user interaction the changed data sets in a state, to be ready to show in the interface. This is the ultimate response to event handlers' actions or server responses. setState does not update the component immediately rather it can wait for a batch update or action which tells the component to re-render based on the state change. If instant update is necessary, componentDidMount() or setState(upater, callback) callbacks highly effective. But sometimes state update or changes depends on previous state changes. So to avoid re-renders just call setState() only as the new state change differs from the previous state
8. Children in JSX
As JSX expression is used to write HTML elements in react, between the opening tag and closing tag of elements children can be passed. Put a string of literals between those tags is the ultimate way to pass children. JSX elements can be passed together as children and this is necessary for nested components. Many components are called or passed under one parent component to form a bigger user interface structure is called nested components. As they render one after another sequentially according to their call and pass.
import React from ‘react’;
import Navbar from ‘../Navbar/Navbar’;
import Projects from ‘../Projects/Projects’;
const Home = () => {
return (
<div>
<Navbar city={{ name: ‘rajshahi’, people: 1000000, country: ‘Bangladesh’ }} color=”blue whale”></Navbar>
<Projects />
</div>
);
};
export default Home;
Like this way. Mix type of children can also be passed as string literals. So basically children of JSX means write elements or pass or put string literals or call component function under a parent element. Because of JSX expression, it acts like HTML elements which are basically a javascript element.
9. React class components
Components in react can be defined in two ways. Function component and class component.to define a class component it needs to be extended.
import React, { Component } from ‘react’;
class Home2 extends Component {
render() {
return (
<div>
</div>
);
}
}
export default Home2;
like the above code. And a command render needs to be used to display data to the user interface. render() is used to define a subclass in React.Component. The component lifecycle method is used to define how or when to run code at a particular time in rendering or running the operation. Some of the lifecycle methods are written below.
Ø Mounting: Mounting is when a component is created and inserted in DOM. Some commands run sequentially to mount components in the DOM tree. Those are
· constructor()
· render()
· componentDidMount()
Ø Updating: Updating is when a state in function or data and props changes. Update in DOM tree happens also sequentially like below.
· render()
· componentDidUpdate
Ø Unmounting: this method is called when you remove or insert a component in the place of another component in the DOM tree, it will unmount.
But above all of this and between the sequence commands there are also some optional task and commands which react does within itself to remove the hassle over a developer.
10. Performance Optimization of React Application
React is a large application so performance optimization is very much needed. It is good and more efficient for a react application to load on a browser if a production batch is used.
Now react includes many errors handling options to make developers look for the right error. But it is necessary to use development mode using react developer tools on chrome and production mode when deploying for users. For production npm run build command needs to be run to make ready the application and for local development, npm start command is used.
For the browser-friendly run, this command npm install –save-dev envify terser uglifyify. This makes the production build of the application more smooth when loading the DOM for the browser and data for the user.
React window and react virtualized are the very popular library for react application to render the small amount of data for a specific task. This helps to reduce the creation of repeated nodes.