Forem: yatendra

What is React?

yatendra — Wed, 11 May 2022 16:30:05 +0000

If you are here you must be a JavaScript developer or if you are not this article will let you start with your React journey the word which currently has boom in the market right now.

So let's start with your React journey😎.

So there are mainly 3 things that is responsible for a website HTML, CSS, JavaScript.

HTML - Structure of a website.
CSS - Styling & design for a website to make it beautiful.
JavaScript - To have interactivity in website.

let btn = document.querySelector("#btn");
let counterVal = document.querySelector("#counter-val");
let val = 0;
function increaseCounterVal() {
  val = val + 1;
  counterVal.innerText = val;
}

btn.addEventListener("click", increaseCounterVal);

As you can see how much code we need to write

First we need to create HTML
We need to reference each & every part of DOM from HTML world to JS world.
we need to add event listener to the referenced element.
we need to tell in our callback function what needs to be done & where it needs to update the value.

Just for a basic counter example think of a large application where we need to do a lot of DOM manipulation there telling everything ourselves what to do and where to do. This type of programming is called imperative programming.

So here comes React🚀 for the rescue.

So what React actually is?🤔

React is a JavaScript library which is used to create interactive User Interfaces.
Declarative: means we don't need to tell where to do the changes. We will deep dive into this. Hold on for now.
Component Based Approach: You can break your bigger app into smaller smaller components & then combined them to make a complex web app.
JSX: you can write JavaScript inside HTML tags.

So let's deep dive into this & write our same logic in react for our counter example.

export default function App() {
  const [counter, setCounter] = useState(0);

  function incrementCounterVal() {
    setCounter((prev) => prev + 1);
  }
  return (
    <div className="App">
      <h1>{counter}</h1>
      <button onClick={incrementCounterVal}>Click me</button>
    </div>
  );
}

Look at the above code how simple it is to create a basic counter in react rather than in vanillaJS.

So how react works is:

There is something known as state in react think it of as a variable which can be used to update our UI.
So we need to use useState hook which is provided by "react" to us what is does is it returns a state & a setter function through which we can update our state. const [counter,setCounter] = useState(0)
That's what is happening in the above example we have counter as state variable taking default value as 0 & setCounter as our setter function.
We have then our HTML tags as similar to that we used in vanillaJS code but here is the catch. JSX is used over here to update our view i.e the updated value of counter means its dynamic value. <h1>{counter}</h1>
We don't need to tell react that we need to update the value here we just simply use our state variable in JSX & it will update our view accordingly. This is known as declarative programming.
We have then similar button through which we can update our value via passing an onClick event. It is a synthetic event used in react as similar to that of click event in vanillaJS. <button onClick={incrementCounterVal}>Click me</button>
We need to pass our callback also in JSX. This means what is inside that curly braces is JavaScript.
On clicking of button our function incrementCounterVal_will be called then our setter function _setCOunter will update the counter value by 1 than what it is previous. function incrementCounterVal() { setCounter((prev) => prev + 1); }
What setCounter is doing here is that it is updating our counter variable as well as it triggers our component to re-render because our state variable value has changed now so it should get updated into our UI as well.

Important Note & Analogy

Keep always this thing in mind like in Maths we write function as f(x) = x + 1 means value of function depends upon x. So x is a dependent variable here. That concludes if value of x changes function output will change.
In the similar manner in React f(S) = view here view means our User Interface whatever we use to see on the screen. So our view is dependent upon the state variable as soon as our state changes our view will going to change.

This is the whole catch how react works under the hood & makes our life easier to build UI.

You can play around with both codes used in example shown above:
https://codesandbox.io/s/inspiring-gagarin-rm77j6 (vanillaJS)
https://codesandbox.io/s/angry-shannon-zr0m6g (React)

Hope you have fun reading this article & you can start your React journey now 🚀

Thanks for reading! Catch you next time !

PS: Do share your reviews & feedbacks.

CSS Flex-box Quick Guide

yatendra — Wed, 11 May 2022 07:14:23 +0000

If you are a Frontend Developer & facing some hard times mainly with the styling part of your website this article is for you🤗.

The flexbox for a website is mainly used for purpose of layout, and alignment for the children of a container.

Basics

The figure shown above is the basic building block of how the flex property works in CSS.

Flex Container: It is the main container to which CSS display: flex property will be given.
Flex Items: Children of the main container which will laid out according to the flex-direction property.
Main Size: Total size i.e "width/height" of the main container in whichever is along the main axis.
Cross Size: Total size i.e "width/height" of the main container in whichever is along the cross axis.
Main Axis: It is the axis along which items are laid out either row/column as in the figure it is in a row. This changes according to the flex-direction property.
Cross Axis: It is the axis perpendicular to the main axis.

Properties

Properties for flex are divided mainly into two different parts i.e the property for "container" & property for "items".
So first here are few container properties for flex.

display

.container {
   display: flex;
}

The green background shown in the above image is the main flex container to which the display property of flex is given. It will laid down its children directly.

flex-direction

The default property for flex-direction is row. As shown in first example itself

.container {
  // possible values
  flex-direction: row/column/row-reverse/column-reverse;
}

The flex-direction property will set the main-axis & items are aligned according to the value of direction.

flex-wrap

The default value is "no-wrap" means items will tend to fit itself into a single row or column.

.container {
  // possible values
  flex-wrap: no-wrap / wrap / wrap-reverse
}

As it's understood from the image the items are squeezed & tend to align & fit themselves into a single row because of default property of "no-wrap".

So by setting flex-wrap property with its value as wrap the items are allowed to fit as much available space to them & it will go to next line since wrapping is allowed it will wrap to multiple lines from top to bottom.

By setting it as wrap-reverse it behaves similar to wrap but in opposite direction i.e bottom to top.

justify-content

This property set alignment along main-axis.

.container {
  // possible values
  justify-content: flex-start / flex-end / space-around / space- 
  between / center / space-evenly.

flex-start: it is default value items are laid towards starting of flex-direction.
flex-end: items are laid towards end of flex-direction.
center: items are placed at the center.
space-around: items laid down & have equal spaced around them.
space-between: there is only space between the items of container & not between the borders of container & the items.
space-evenly: items are equally spaced around the edges & between themselves also.

align-items

It sets out alignment along the cross-axis.

.container {
  // possible values
  align-items: center / flex-start / flex-end / baseline / stretch
}

So these are the properties which needs to be used on parent for the flex. You can play around with the given sandbox & learn by changing the values for the above listed properties because learning while making is best practice.

https://codesandbox.io/s/nervous-bassi-ckrh4x?file=/src/styles.css

PS: Feedback's are welcome!! Catch you next time !!!