The building block of React Series 1: Components

tashigyatso45 — Fri, 13 Oct 2023 20:47:30 +0000

React JS is basically like the better twin brother of JavaScript. React allows programmers to build websites easier and these websites also run more smoothly through the use of components, props, state, event handlers, and much more.
If we were to compare React as a whole to a house then components would be to React, what the foundations are to a house. Components are independent pieces of code that can be reused in other components. They are essentially enhanced functions that return JSX ( Javascript XML) rather than vanilla Javascript. The cool thing about components is that they're independent so you can work on each part of the website without having to worry about being overwhelmed with everything at once. Even cooler is how these components are able to work together if needed through the passing of props, which we will talk about in the next blog of this series.
Let's break down the syntax of a component. Components are similar to a function but there are a couple of key aspects that are different.
Components VS Js function

Components start with a capital Components = function Component(){} VS JS function = function boringOlething(){}
Components return JSX(Javascript XML), which is one of the key aspects of components.JSX is basically HTML in JavaScript. So instead of having to create a div or header in a separate HTML file, you can write the HTML code in that component's return and it will have the same outcome.

There are many other aspects to components that I will talk about in future series but these are the main points; it must start with a capital and return JSX. Hope this is helpful to anyone just learning React JS. HAPPY CODING!

Array Methods

tashigyatso45 — Thu, 14 Sep 2023 14:56:58 +0000

 Recently, I have been learning about Arrays and I found it really interesting and useful. Today I am going to share some of the things I learned about Array's on this platform, hoping it can help other programmers new to the journey! 
 Lets define Arrays first; Arrays are "Objects" that are listed and in order. Why are they important? They can be useful when we want to store data in an organized fashion. For example if wanted to store a data of a list of number from lowest to highest we would use an Array.
How can we interact with Arrays using Array methods? There are many different Array methods we can use to interact with Arrays. For example if we wanted to remove the last index from an Array consisting of [1,2,3,4,5], we can use the .pop() method. If we wanted to remove the first index we can use the .shift() method. There are also methods to add indexes to an Array such as .push() and .unshift().
However say we want to make changes to the Array but we want to also keep the Array without it affecting the original Array itself. There's a method to that as well and that is called "spread operator". In JavaScript "spread operator" is represented by 3 periods (...) This allows us to make a copy of the original Array and make changes to the new Array with the same data without affecting the original Array. This method when used in conjunction with the other methods such as .shift() and .pop() becomes a handy tool when dealing with Arrays. 
These are some of the key methods I learned about recently that I felt might be useful for other beginner programmers so I decided to share it on this platform. Thanks for reading and happy coding!

DEV Community: tashigyatso45

The building block of React Series 1: Components

Array Methods