Posts

Showing posts from August, 2021

Spread and Rest Operator

We use these operators many times. It's only one operator (...).  Spread     It is used to split up array elements OR object properties. As object and array in JS is copied by reference by default, so we use it to copy by value.                                   / / [...oldArray] => will return all the values of old array in the form of array, but only value is assigned, not reference      // [...oldArray, element1, element2] => will return all the elements of old array also element1 and element2 in the form of array      const   array  = [ 2 , 5 , 6 , 2 , 1 , 345 ]      // // Copy...

JavaScript Classes

Classes are present in many programming languages. For using classes in Js, we use the class keyword. A class contains properties and methods. It supports constructor, to create some properties, inheritance etc. We use this keyword to use interact with methods and properties. Eg:      // Human class      class   Human  {           constructor () {               this . gender  =  "Male"      -> Property          }           printGender  = ()  =>  {        -> Method               console . log ( this . gender );          }      }      const   newHuman  =  new ...

JavaScript, generally required for ReactJS

let and const:       Different ways of creating variables.      Some variables never change, for that, we use const -> constant variables.      For a changeable variable, use let -> variable variables const :      const   myName  =  "Ayush" ;      console . log ( myName );      myName = "Amit"; -> This will show an error as the constant value don't change let:      let   myRollNo  =  33 ;      console . log ( myRollNo );      myRollNo  =  17 ;      console . log ( myRollNo );      Arrow Function:     Normal Function           function   addNumbers ( a ,  b ) {      ...

Why React?

As we use a  react js website, like Netflix, we get a very smooth app-like experience. Traditionally when on a website, we clicked a button, a request was sent to the server and a new HTML page was send to the browser where it then could be displayed. So a traditional website feels slower. We have to wait for loading the HTML page JS is able to manipulate the DOM, it allows us to change what the user sees, without fetching a new HTML page. React Js is a client-side js library, it helps us writing client-side js code and it is all about building modern reactive UI for websites. If JS can do these, then why do we use ReactJs:     With only Js, we have to write in detail every single step taken, interacting with multiple elements will become very difficult, this is called the imperative approach, where we define step after step. What we can call reinvent the wheel.     React is all about components, we break the site into components where every component has a clea...

Connect to Database

We can use Axios for it, but nowadays we have a built-in mechanism for sending an HTTP request, that is Fetch API.  Getting Data:      We don't use the function result directly b/c it is an async function and return a promise and the result data later.     res => res.json(); => It is used to convert string to JSON format     const [item, setItem] = useState();     // Use effect is used to avoid unnecessary loading      useEffect(() => {          function  fetchItemsHandler () {            fetch ( URL )                .then(res => res.json())                .then(data => {                    setItem(data.requiredParemeter);                })  ...