Forem: AlaminHossainXYZ

Unit test in React

AlaminHossainXYZ — Sun, 24 Apr 2022 09:03:59 +0000

We don’t give so much interest in unit testing but it is important. It allows us to find the bug and efficiently debug them.
We do not have to test all the components of a React Js project.
Suppose, we have a website like Amazon. The main feature of that, users can see the products and can purchase them. So if we provide testing in all the components it is good but not the better option. My code and project will be fine if I implement unit testing only on those features.
To do a default unit test of React Js firstly I have to create a file named components.test.js.
Then in that file, I have to invoke an inbuilt method test and pass two arguments (the first one is a statement and the second one is a function).
In the second argument, I have to render the component I want to test and then write the screen. debug().
Finally when I input the command npm test and then our test will run.
Thus we can test a React.Js project
We have to remind in our mind if a feature is not so important but any other component relies on it just like useFirebase hook. The information of the user is important in many components. If any bug exists in it then it will hamper many components and all of the projects. So to avoid bugs we can apply I simple unit test in that component

React-spring animator of the year

AlaminHossainXYZ — Tue, 12 Apr 2022 15:50:18 +0000

I was searching for a framework of React.Js to animated my banner sections of my website. After searching for a long time finally I found a video in YouTube which is tell about 5 npm packages for website design
That video is also included react-spring. Then I go to the react-spring website and read their documentation. I implement some of their animations and now I am happy

Backend Web Development basic information

AlaminHossainXYZ — Fri, 24 Dec 2021 14:47:39 +0000

What is CRUD operation? Ans: CRUD is the short form of Create, Read, Update, Delete. Let’s think about a shopping mall. There are many products of different quality. If we publish a website of this mall we need to add some products, delete some products, update the information of the products and see the information of the products. Suppose at first we add a product and the owner buy 10 pieces of it. So the quantity is 10. When a customer buys 2 pieces of them the quantity is updated to 8. Again if the owner buys more 5 piece product the total product quantity is updated to 13 pieces. If a customer order 10 pieces of them, the owner sees the quantity, which means he is reading the information and giving the customer 10 of them. If any of the products would become backorder or harm by any way or he sells all of the products the owner just delete the products from the products list. Hence CRUD operation is executed.
What is a JWT token. Ans: JWT token gives access to the page or section only for the real claimant. It is more secure than the private route. I usually use this in the case of the admin panel. When a user registers a JWT token is created for him. This JWT token usually is stored in Local Storage. If any user searches in the right way in the search bar without being an admin he can access the admin routes. But if we use the JWT token it checks the JWT token info and then gives access to the admin.
What is Mongoose? Ans: Mongoose is a well-structured version of MongoDB. It is more friendly with node.js. We use mongoose to perform the tasks first. Mongoose is more straightforward.
What is Aggregation? Ans: Aggregation operation processes multiple documents and returns computed results. It is used basically for Groping values from multiple documents Perform operations on the grouped data Analyze data changes
What is Express Js? Ans: Express js or simply called express is a well-structured and open-source framework of NodeJs. It is used for back-end web applications. It makes easier the task of Node Js.
How does Node JS work? Ans: Node Js is a Javascript runtime. When we want to execute a javascript code we need a Javascript runtime environment. JS engine, event loop, call stack, memory heap, API together make a JavaScript runtime environment. Js engine is the heart of the JavaScript runtime environment. Node Js uses the most popular JS engine V8 engine to execute JavaScript Code. When a Javascript code is put in the V8 engine it goes through 3 phases. Parsing, compilation, execution. In the parsing phase, syntax parser pass the JS code to Abstract Syntax Tree. Then The Abstract Syntax tree goes to the compilation phase. In the compilation phase, the interpreter interprets the codes and returned them to the execution phase. As well as the compiler also tries to get as much code it can optimize. Then the compiler also returns the code to the execution phase and the execution phase just executes the code. When a JS code is created a global execution context is created on the call stack. The event loop work as a gatekeeper. It sees that if the call stack is empty then it gives permission to the execution contexts of the memory heap. The garbage collector removes the garbage data from the memory heap by using mark and sweep algorithm

Basic About React jS

AlaminHossainXYZ — Thu, 23 Dec 2021 18:49:53 +0000

1.What is JSX is React
Ans:Full form of JSX is JavaScript XML. It allows us to write HTML in JavaScript without using the methods like appendChild(), createElement(). It is syntactic sugar of function calls.
A browser can not understand a JSX syntax. So we need a transpiler to make it browser compatible. Babel works as a transpiler and converts the JSX to an object tree.
The browser just receives the object tree and compiled it.

Describe Component Lifecycle in React Ans: There are three phases in react component life. Mount: Birth of component Update: Growth of a component Unmount: Delete or death of a component A react component has to pass through these phases. We need some methods to mount, update or unmount a react component. Mount: render(), componentDidMount(), constructor() Update: render, componentDidUpdate Unmount: componentWillUnmount 3.Tell me about differences of State-props in React Scope: Props are passed in components like function’s parameter. State only works in a component like a variable. Immutable: Props are immutable. It means it is only read-only. States are mutable. Use in class components: props is used like this.props and state is used like this.state in class component. Use in functional components: props are used as props and state is used like useState in functional component. 4.What do you know about Virtual DOM and diffing- algorithm Ans: Whenever a React Js web application is executed a virtual dom is created in primary phase of its execution. New dom check the changes with previous dom.When changes is detected two virtual dom is compared using diff algorithm and finally it allows changes in real dom.
What is Prop Drilling Ans: Passing parameters between components in react is possible in one way. A parent component can only pass a parameter to its immediate child component. But sometimes we need to pass parameters or props to many components. So here the word comes props drilling. Props drilling means not only passing data to a child component but also to other components. In react using context API we can easily pass data. There is a hook called useContext and method createContext and many other terms are used to props drilling 6.What do you mean by render() method Ans: render() method is used in every component of React Js. It returns the HTML which has to display in the UI. We only render a single element. If we want to render multiple elements we have to contain them in one parent tag. 7.What will you do to Prevent unnecessary component re-render Ans:Avoid changes in DOM tree structure. Using keys to prevent re-renders. Make sure that values are must not be changed. Using React.memo or React.PureComponent Use object as props
What is PropTypes Ans: Generally we use props for passing data between one component to another.But sometime because of wrong props and error is occurred and we can handle it by using proptypes.