DEV Community: hxrshxd

Rerender react element

hxrshxd — Wed, 29 Jun 2022 16:58:40 +0000

Day 10 of #100daysofcode

Today we will learn about rendering in react.
Our initial code will be :

As you can see, we have our rootelement, followed by a time variable that returns local time. Following that, we have a variable element that displays our time in div. The element is then rendered in rootelement.

If you run this code, you will notice that the time does not change continuously, but you must refresh the page for the time to be displayed correctly. We will need to write this for it.

You can see that we have our code in function tick and have setInterval to run every second. The time will now be displayed appropriately without the need to reload the website.

You may be wondering what the point of this is. If you look at the code, you'll notice that our div is changing all the time.

Let's create some additional code to figure out what's going on.

We used react.Fragment (<></>) to have two divs one after the other. Let us now examine the code.

You can notice that only our time div is rendering repeatedly. Because only what has to be rendered over and again is rendered, our page does not slow down.

That's all for now.
If you found this useful, please follow me on Twitter at @Hxrshxd for more.

Understanding interpolation in JSX

hxrshxd — Tue, 28 Jun 2022 16:48:49 +0000

Day 9 of #100daysofcode

Today we'll learn about interpolation in JSX. Our initial code will be :

We have our div in rootElement, followed by a function component that receives text as props and returns null. Following that, you can see that we have an element variable that takes react.fragment (<></>). Inside that, we're utilizing our function component, which takes our text and counts the characters in it, displaying the output as something like :

The element is then rendered. We must now write code in our function component. That will be :

You can see in the function CharacterCount that we have a JSX syntax <div> that takes JavaScript syntax with the help of in that we used backtext `` which allows us to use our prop text after that we are using a ternary operator which checks whether the input text has length or not. If it does, we will display the length of the content in a strong tag; otherwise, we will display "NO". Finally, we have the string. When we execute our code, we should get something like this.

This is a simple code, but when you understand it, you will notice the interpolation. Let us examine it.

First, we have our HTML code, which continues until script tag, after which our JavaScript code begins until div, with div tag JSX code begins, but right after that our JavaScript code begins with, which continues until strong tag, with strong tag JSX code begins, inside that strong tag you can see JavaScript code, and JSX code ends with closing strong tag. then JavaScript code begins until the closing div tag, then JavaScript code resumes until our react.fragment , which begins our JSX code. With</>, the JSX code finishes and the JavaScript code begins. Then there's our HTML code.

As you can see, the code is basic, but the interpolation is rather complex. We can use JSX code more successfully if we understand interpolation.

That's all for now.
If you found this useful, please follow me on Twitter @Hxrshxd for updates.

What is a cookie? (website)

hxrshxd — Mon, 27 Jun 2022 09:08:05 +0000

Cookies were introduced to store data. Cookies are used to store information on the client system. Cookies are sent to the server with the request and to the client in response, therefore cookies are sent to the server with every request.

Cookies aid in providing a better user experience and tailored content to the user. Cookies can be created, updated, or read using JavaScript: document.Cookies .

Cookies are classified into two categories.

a) Session cookies
They do not have any special properties such as Expire or Max Age. When the user exits the browser, they are removed.

b) Persistent cookies
They have specific properties such as Expire or Max Age. They are not removed when the browser is closed, but rather when specific attributes are met.

source : here

That's all to this article.

If this article was helpful to you, make sure to send this to your friend or someone who might need and follow me on twitter @Hxrshxd for more.

What is the DOCTYPE Declaration in HTML?

hxrshxd — Sun, 26 Jun 2022 08:58:50 +0000

The doctype is declared in the first line of HTML or XHTML. It tells the browser what version of HTML code is being utilized.

Doctype syntax for html5 and beyond

Doctype syntax for html 4.01

Web standards were not agreed upon within the first year of HTML. So when someone wrote html code, they had to build it with a certain browser in mind, which implies the code might not work the same way in different browsers.

As a result, the World Wide Web Consortium (W3C) developed some standards that everyone had to follow. The code can be rendered across web browsers if these standards are followed.

That is why web developers were required to include doctype at the beginning of their code.

source : here

That concludes this article.

If you found this article useful follow me on twitter @Hxrshxd for more.

How to validate custom React component prop using proptype

hxrshxd — Sat, 25 Jun 2022 17:43:08 +0000

Day 7 of #100daysofcode
Today we will learn how to validate custom React component props with proptype. Our initial code will be :

When you create a React component, others may want to use it and may not utilize it correctly. As you can see, we have a react function component that takes firstname and lastname as input and returns the result. As you've seen, we gave false as an input to our firstname and nothing to our lastname in the const element, but we want both firstname and lastname as strings. We will utilize a feature proptype to evaluate how props given to the component are used.

Here we have a function that checks whether or not our propName is a string. If not, an error message is displayed. If you want the same thing for lastname, we must repeat what we did for firstname. Instead, we can create a variable like :

This is so popular that the react team created a package on npm that you can use with this :

You can also use this to determine whether your prop is a string, boolean, array, or something else. More information can be found here.
Our finished code should look something like this :

That's all there is to toady.