We are in week 5 of the cohort, diving into the React Framework Introduction.

In this class, we are going to discuss Jsx, class Vs. className, Static and Dynamic websites, State, Components, and re-rendering

Why do we need React / Any frontend Framework?

• React is essentially helpful for writing dynamic websites more than static websites

• Static Websites are websites where the contents won't change with time. They are static

• Dynamic Websites are websites where contents change often. They are dynamic

• Code for a static website could be simple; that's the reason we don't find the application of a frontend framework.

• Code for a dynamic website could be complex and should have to be done again and again, making it inefficient in working and rendering, for example, a web app like LinkedIn. That's the reason we need React.

• React makes it easier to write HTML,CSS and Js. its underhood HTML,CSS and JS, making easier to code the DOM Manipulation.

States, Components and re-rendering

• Programmers divide any complex app into States and Components. For example, let us take an example of a react app with a button that, when clicked, changes the text on it to "count n"; n is the number of times you press.

• The state essentially gives the state information of a component; it is an object that contains the values that change. For this button, the state could be as below

    {
       count : 1;
    }
  

• The component is a Jsx (HTML+js), reusable, dynamic code snippet, which states how a DOM element should render.

• But what is re-rendering? A state change would trigger re-rendering, which represents the actual DOM manipulation.

• So what React expects is the defining of all the components and update your app's state, and then React will take care of re-rendering the app.

Counter App

• let us create a simple counter App

      const state = {
            count:0
        }
        function ButtonPress(){
            state.count++;
            // ButtonRerender();

        }

        // function ButtonRerender(){
        //     // document.getElementsByClassName('parentElement').innerHTML+"";
        //     let component = ButtonComponent(state.count);
        //     document.getElementsByClassName("parentElement").appendChild(component);

        // }

        function ButtonComponent(count){
            const button = document.createElement('button');
            button.innerHTML=`count ${count}`
            button.setAttribute("onClick","ButtonPress()")
            return button;
        }

• This is the code you(please uncomment the commented code line for this point) write with Js.

• It's the code of how to react works underhood, but you don't need to write these many lines of code. What if I say you only have to write the code that is not commented on in the above code rather than the entire code? That's how react helps us.

• You have to specify your state component, and that's it; react will figure out the re-rendering part. Other commented codes in the above code will be handled by React.

• If you write the same code in react, this would be as below

    function App() {
      let [count, setCount] = useState(0)
      return (
        <>
        <button onClick={()={setCount(count+1)}}>counter{count}</button>
        </>
      )
    }
  
    export default App
  

React App

• Let's create a React App, use npm create vite@latest

• name your project, choose to react, and then javascript

• After project creation, check the index.html,Main.jsx and App.jsx files in the project.

• in the terminal, cd <project_name> npm install npm run dev to run the app.

• You will get a website to look into, mostly localhost:5173.

• WE HAVE DISCUSSED THAT REACT CONVERTS THE CODE INTO HTML,CSS, AND JS UNDERHOOD, SO WHERE IS IT HAPPENING?

• TO SEE IT, TYPE COMMAND npm run build , you will see a dist file created in the project repository, which contains an index.html file and an index.js file.

• You can now happily delete the other files/folders except the dist folder and can deploy the app to use it.

• You can check the index.js in the dist folder, which has more complex js for the app.

State

• In the react code, the component is re-rendered when the state variable changes.

• State variables essentially store something that changes in the components.

TodoApp

• Let's create a simple todo app, which has a state that has some todos in it and components that display the todos

  ```javascript / eslint-disable react/jsx-key / / eslint-disable react/prop-types / import React, { useState } from 'react'

  function Todos(props){ return(

  {props.title}

  {props.description}

  ) }

export default function App() { const[Todo,SetTodo]=useState([{ title:"Go to gym", description:"you have to go to the gym at 8pm", completed:false },{ title:"Dinner", description:"you have to go to the mess at 9:30pm", completed:false }])

function addTodo(){ SetTodo([...Todo,{ // setTodo([...Todo])=> the todo array [1,2], setTodo([...Todo,3])=> [1,2,3] title :"write code", description:"write the code for the prod app", completed: false }]) } return (

P5 Editor gsoc repository

• For the syllabus we have covered till now, we can start understanding the p5 editor repository.

Please follow the journey, even if you are not a part of the cohort, following the curriculum and assignments can make you a better developer at the MERN stack.

Please find the codes, and assignments for the cohort in the GitHub Repository

Stay tuned for the upcoming blogs and exciting algorithms.