🕹️ Learn Fundamentals of ReactJS and Build Counter App 🦔

Counter app using react

Want to improve this page? Raise a issue on @github.

Whats on this page?

  • Components 🧩: the building blocks of a React application
  • Functional vs Class Components 🏗️: the two types of components in React and their differences
  • Named and Default Import/Export 📡📦: how to import and export components in React
  • JSX 💻: a syntax extension for JavaScript that allows us to write HTML-like code in our JavaScript
  • Props 🎁: how to pass data from a parent component to a child component
  • Default Props 🏷️🎁: how to set default values for props
  • State 📊: a way to manage data within a component
  • Creating a Counter App 🔢: a hands-on example to demonstrate the concepts we covered
  • Questions to Solve ❓: some practice questions to test your understanding of the material
  • Simple Task 🤏: a hands-on exercise to reinforce your learning

📺 Watch Now

Notes

In ReactJS, everything is a component

For example, in our Youtube UI, we have multiple components, such as:

  • Banner
  • Nav
  • Images
  • Title
  • Review

A component is a simpler regular JavaScript function that is customizable, and we can reuse it in our code to build UIs.

2 Types of Components:

  1. Functional Components:
  • Functional components are a more recent addition to React and are essentially JavaScript functions that return JSX.
  • They are simpler and more concise.
  • we start it with a function.
function Greeting(){
  return <h1>Hello</h1>
}
  1. Class Components:
  • Class components are the older way of defining components in React.
  • They are defined as ES6 classes that extend the React.Component class.
  • class components were being used in 2012, now they are history.
  //we also need to import it at top of js file
  import {Componet} from "react";
 
  class Forest extends Components{
    render(){
      return <h1>Hello</h1>
    }
  }

Name & Default Import and Export:

index.js is the entry point of our app.

root id is provided in our index.html where we want to put that content in.

  • Hence, we are dynamically adding all the content

in index.js we are importing our app or app.js using:

import App from "./App";

but before this, we MUST export our App in app.js :

export default App;

Basically, for using the functional component in the index.js we must export it.

Name Export:

App.js

    export function App() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
    );
  }

  • Now we can’t change the name.

  • We will have to write the exact name in

index.js

  import {App} from "./App";
 
  const rootElement = document.getElementById("root");
  const root = createRoot(rootElement);
 
  root.render(
    <StrictMode>
      <App />
    </StrictMode>
  );

Default Export:

App.js

  function App() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
    );
  }
 
  export default App;

index.js

  import { StrictMode } from "react";
  import { createRoot } from "react-dom/client";
 
  import App from "./App";
 
  const rootElement = document.getElementById("root");
  const root = createRoot(rootElement);
 
  root.render(
    <StrictMode>
      <App />
    </StrictMode>
  );
 
  //Now instead of `App` we can use any other variable name too.
  import { StrictMode } from "react";
  import { createRoot } from "react-dom/client";
 
  import Greetings from "./App";
 
  const rootElement = document.getElementById("root");
  const root = createRoot(rootElement);
 
  root.render(
    <StrictMode>
      <Greetings />
    </StrictMode>
  );

Components in React:

function Greeting(){
  return <h1>Hello</h1>
}

Components are regular JavaScript functions. But there is a difference between regular js functions and components:

  • In regular JS functions we can start the name of func. with lowercase letter, but with components we can not.
  • The console will not recognize it.

JSX:

  function App() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <Greeting/>
      </div>
    );
  }

What is this?

  • It looks like simple HTML but it is not.
  • <Greeting/> tag is not in HTML.
  • className is also not in HTML.

Note This is JSX: syntax extension for JavaScript, which helps us to write HTML markup language in the JavaScript itself.

we use className because class is a reserved keyword.

JSX = JS + HTML

Props:

Props are the properties of the component that are used to pass data from parent component to child component.

  function Greeting({name}){
    return <h1>Hello {name}</h1>
  }
 
  function App() {
    return (
      <div className="App">
        <Greeting name="Sanskriti"/>
      </div>
    );
  }
 
  export default App;

Using Props:

  function Greeting(props){
    return <h1>Hello {props.name}, {props.greeting}</h1>
  }
 
  function App() {
    return (
      <div className="App">
        <Greeting name="Sanskriti" greeting="morning"/>
      </div>
    );
  }

Default props:

when we don’t have a value, we can put a default value:

  function Greeting({name,greeting="morning"}){
    return <h1>Hello {name}, {greeting}</h1>
  }
 
  function App() {
    return (
      <div className="App">
        <Greeting name="Sanskriti" greeting="morning"/>
      </div>
    );
  }

Note Props are Read Only!!!! (V.V.Imp)

State in ReactJS:

state is the data or React object which is used to handle the user interactivity!

  • to use it - import {useState} from "react";
 //array destructuring
 const [value, setterfunction] = useState(0);