Learning JSX

Digital Dollars
By -Digital Dollars
July 15, 2023
0

 Learning JSX



1. Advantages of JSX 


A, B, D are correct.


2. Embedding Javascript


3. JS-IN-JSX

Using the variables helps us in updating the content/code more efficiently. Use the given data to render on the screen. Make sure that the output matches the expected output image.


Note: You have to use the paragraph tags for rendering data in the component and the H1 tag for the heading


Solution :

  <body>
    <div id="root"></div>

    <script type="text/babel">
      const App = () => {
        const name = "Demo";
        const age = 18;
        const hobby = "JavaScript";
        const isMarried = false;

        return (
          <>
            <h1>{name}'s basic info: </h1>
            <p>My age is {age}.</p>
            <p>I like {hobby} a lot!</p>
            <p>Am i married?: {isMarried.toString()}</p>
          </>
        );
      };

      const rootElement = ReactDOM.createRoot(document.getElementById("root"));
      rootElement.render(<App />);
    </script>
  </body>
</html>

4. Functions in JSX





5. JSX Expressions





6. JSX Expressions - II


7. Temperature Converter



Create a React app to convert temperature from fahrenheit to celsius.



Note: You have to use paragraph tags to display the data and H1 tag for the heading.


Solutions :


<!DOCTYPE html>
<html lang="en">
  <head>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <title>React App</title>

  </head>

  <body>
    <div id="root"></div>

    <script type="text/babel">
      const App = () => {
        const tempInFahrenheit = 12;
        const toCelsius = (t) => (t - 32) * (5 / 9);

        return (
          <>
            <h1>Temperature Converter</h1>
            <p>Temperature in fahrenheit: {tempInFahrenheit}</p>
            <p>Temperature in celsius: {toCelsius(tempInFahrenheit)}</p>
          </>
        );
      };

      const rootElement = ReactDOM.createRoot(document.getElementById("root"));
      rootElement.render(<App />);
    </script>

  </body>
</html>


8. Arrays and Objects inside JSX



9. Loops in JSX



10. Iteration Methods




11. Array Filter

Create a React app and use the ES6+ array iteration method to filter and render items.


You have to use the h3 element to show each item of the filtered list.

Solutions :


<!DOCTYPE html>

<html lang="en">

  <head>

    <script

      crossorigin

      src="https://unpkg.com/react@18/umd/react.development.js"

    ></script>

    <script

      crossorigin

      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"

    ></script>

    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>


    <title>React App</title>

  </head>


  <body>

    <div id="root"></div>


    <script type="text/babel">

      const App = () => {

        const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];


        return (

          <>

            <h1>ES6 Array Iteration Methods</h1>

            {numbers

              .filter((n) => n % 2 === 0)

              .map((n) => (

                <h3>{n}</h3>

              ))}

          </>

        );

      };


      const rootElement = ReactDOM.createRoot(document.getElementById("root"));

      rootElement.render(<App />);

    </script>

  </body>

</html>




12. Keys in React



13. Inventory


You want to create a simple dashboard for an electronic store where we can see the name, selling price, quantity, and total revenue for sold products in a table format.



Solution :


<!DOCTYPE html>

<html lang="en">

  <head>

    <script

      crossorigin

      src="https://unpkg.com/react@18/umd/react.development.js"

    ></script>

    <script

      crossorigin

      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"

    ></script>

    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>


    <title>React App</title>

  </head>


  <body>

    <div id="root"></div>


    <script type="text/babel">

      const App = () => {

        const itemsSold = [

          { id: 1, name: "iPhone 14", price: 1200, qty: 22 },

          { id: 2, name: "iPad Pro", price: 800, qty: 18 },

          { id: 3, name: "Macbook Air", price: 1500, qty: 7 },

          { id: 4, name: "Samsung S23", price: 1100, qty: 16 },

          { id: 5, name: "Dell Inspiron 5590", price: 1200, qty: 5 }

        ];


        return (

          <>

            <h1>Record of sold items</h1>

            <table border="1px">

              <thead>

                <tr>

                  <th>Id</th>

                  <th>Name</th>

                  <th>Selling price</th>

                  <th>Quantity</th>

                </tr>

              </thead>

              <tbody>

                {itemsSold.map((item, i) => (

                  <tr key={i}>

                    <td>{item.id}</td>

                    <td>{item.name}</td>

                    <td>{item.price}</td>

                    <td>{item.qty}</td>

                  </tr>

                ))}

              </tbody>

              <tfoot>

                <tr>

                  <td>Total Revenue</td>

                  <td colSpan={3}>

                    ${itemsSold.reduce((n, i) => n + i.price, 0)}

                  </td>

                </tr>

              </tfoot>

            </table>

          </>

        );

      };


      const rootElement = ReactDOM.createRoot(document.getElementById("root"));

      rootElement.render(<App />);

    </script>

  </body>

</html>



14. Conditional Rendering



15. Ternary Operator


Create a React app that uses the ternary operator to conditionally render the given components.



Solution :


<!DOCTYPE html>
<html lang="en">
  <head>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <title>React App</title>
    <style>
      img {
        width: 250px;
      }
    </style>
  </head>

  <body>
    <div id="root"></div>

    <script type="text/babel">
      const IMAGES = [
        "https://res.cloudinary.com/dl26pbek4/image/upload/v1674557549/assets/yannis-zaugg--7TB_r-NuMo-unsplash_tdmglm.jpg",
        "https://res.cloudinary.com/dl26pbek4/image/upload/v1674557550/assets/lino-C2SzUyg3PPQ-unsplash_s8a4tg.jpg",
        "https://res.cloudinary.com/dl26pbek4/image/upload/v1674557550/assets/curioso-photography-QfOhOcrDmvk-unsplash_vgbb3t.jpg",
        "https://res.cloudinary.com/dl26pbek4/image/upload/v1674620718/assets/pexels-garvin-st-villier-3311574_ds8wrh.jpg"
      ];

      const Login = () => (
        <div>
          <h3>Login to Continue</h3>
          <form>
            <input placeholder="email" />
            <input placeholder="password" />
            <button>Login</button>
          </form>
        </div>
      );

      const Home = () => (
        <div>
          <h3>Welcome to home!</h3>
          <h5>Enjoy this catalog of pictures</h5>
          {IMAGES.map((i) => (
            <img key={i} src={i} />
          ))}
        </div>
      );

      const App = () => {
        const isLoggedIn = true;

        return isLoggedIn ? <Home /> : <Login />;
      };

      const rootElement = ReactDOM.createRoot(document.getElementById("root"));
      rootElement.render(<App />);
    </script>
  </body>
</html>



16. Conditional AND Operator




17. Conditional OR operator



18.Logical Operators

Create a React that uses logical operators to conditionally render the given components.


Display a header that shows the value of a person's name or a default value if no name is provided. 


Solution :


<!DOCTYPE html>
<html lang="en">
  <head>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <title>React App</title>
    <style>
      img {
        width: 250px;
      }
      button {
        outline: none;
        border: none;
        width: 150px;
        padding: 10px;
        background-color: #f00;
        color: #fff;
        font-size: 1.2rem;
        font-weight: bold;
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <div id="root"></div>

    <script type="text/babel">
      const IMAGES = [
        "https://res.cloudinary.com/dl26pbek4/image/upload/v1674557549/assets/yannis-zaugg--7TB_r-NuMo-unsplash_tdmglm.jpg",
        "https://res.cloudinary.com/dl26pbek4/image/upload/v1674557550/assets/lino-C2SzUyg3PPQ-unsplash_s8a4tg.jpg",
        "https://res.cloudinary.com/dl26pbek4/image/upload/v1674557550/assets/curioso-photography-QfOhOcrDmvk-unsplash_vgbb3t.jpg",
        "https://res.cloudinary.com/dl26pbek4/image/upload/v1674620718/assets/pexels-garvin-st-villier-3311574_ds8wrh.jpg"
      ];

      const Login = () => (
        <div>
          <h3>Login to Continue</h3>
          <form>
            <input placeholder="email" />
            <input placeholder="password" />
            <button>Login</button>
          </form>
        </div>
      );

      const Home = () => (
        <div>
          <h3>Welcome to home!</h3>
          <h5>Enjoy this catalog of pictures</h5>
          {IMAGES.map((i) => (
            <img key={i} src={i} />
          ))}
        </div>
      );

      const PremiumAccount = () => <button>Buy Premium</button>;

      const App = () => {
        const name = "John Doe";
        const isLoggedIn = true;

        return (
          <>
            <h1>Hello {name || "Guest"}!</h1>
            {isLoggedIn && <PremiumAccount />}
            {isLoggedIn ? <Home /> : <Login />}
          </>
        );
      };

      const rootElement = ReactDOM.createRoot(document.getElementById("root"));
      rootElement.render(<App />);
    </script>
  </body>
</html>



Assignment

Student time table


Solution :


<!DOCTYPE html>
<html lang="en">
  <head>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <title>React App</title>
  </head>

  <body>
    <div id="root"></div>
    <script type="text/babel">
      const day = [
        "Sunday",
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday",
        "Saturday"
      ];

      const timeTable = {
        Monday: {
          9: {
            subject: "Maths",
            teacher: "Brijesh Mishra",
            time: "1 hour"
          },
          10: {
            subject: "Physics",
            teacher: "Sumit Yadav",
            time: "1 hour"
          },
          11: {
            subject: "Chemistry",
            teacher: "Vedanti Joshi",
            time: "1 hour"
          },
          13: {
            subject: "English Litrature",
            teacher: "Mayur Pandey",
            time: "1 hour"
          },
          14: {
            subject: "Hindi Vyakaran",
            teacher: "Sony Desai",
            time: "1 hour"
          },
          15: {
            subject: "PT",
            teacher: "Sonu Tyagi",
            time: "1 hour"
          }
        },
        Tuesday: {
          9: {
            subject: "Physics",
            teacher: "Sumit Yadav",
            time: "1 hour"
          },
          10: {
            subject: "Hindi Sahitya",
            teacher: "Ramesh Jha",
            time: "1 hour"
          },
          11: {
            subject: "Environtal Studies",
            teacher: "Rakesh Prakash",
            time: "1 hour"
          },
          13: {
            subject: "Biology",
            teacher: "Kuldeep Narayan",
            time: "1 hour"
          },
          14: {
            subject: "Maths",
            teacher: "Brijesh Mishra",
            time: "1 hour"
          },
          15: {
            subject: "Physics Practical",
            teacher: "Sumit Yadav",
            time: "1 hour"
          }
        },
        Wednesday: {
          9: {
            subject: "Chemistry",
            teacher: "Vedanti Joshi",
            time: "1 hour"
          },
          10: {
            subject: "English Grammar",
            teacher: "Aditi Upasane",
            time: "1 hour"
          },
          11: {
            subject: "Maths",
            teacher: "Brijesh Mishra",
            time: "1 hour"
          },
          13: {
            subject: "English Litrature",
            teacher: "Mayur Pandey",
            time: "1 hour"
          },
          14: {
            subject: "Physics",
            teacher: "Sumit Yadav",
            time: "1 hour"
          },
          15: {
            subject: "Chemistry Practical",
            teacher: "Vedanti Joshi",
            time: "1 hour"
          }
        },
        Thursday: {
          9: {
            subject: "Biology",
            teacher: "Kuldeep Narayan",
            time: "1 hour"
          },
          10: {
            subject: "Hindi Sahitya",
            teacher: "Ramesh Jha",
            time: "1 hour"
          },
          11: {
            subject: "Chemistry",
            teacher: "Vedanti Joshi",
            time: "1 hour"
          },
          13: {
            subject: "Maths",
            teacher: "Brijesh Mishra",
            time: "1 hour"
          },
          14: {
            subject: "Physics",
            teacher: "Sumit Yadav",
            time: "1 hour"
          },
          15: {
            subject: "Biology Practical",
            teacher: "Kuldeep Narayan",
            time: "1 hour"
          }
        },
        Friday: {
          9: {
            subject: "English Litrature",
            teacher: "Mayur Pandey",
            time: "1 hour"
          },
          10: {
            subject: "Hindi Sahitya",
            teacher: "Ramesh Jha",
            time: "1 hour"
          },
          11: {
            subject: "English Grammar",
            teacher: "Aditi Upasane",
            time: "1 hour"
          },
          13: {
            subject: "Biology",
            teacher: "Kuldeep Narayan",
            time: "1 hour"
          },
          14: {
            subject: "Hindi Vyakaran",
            teacher: "Sony Desai",
            time: "1 hour"
          },
          15: {
            subject: "PT",
            teacher: "Sonu Tyagi",
            time: "1 hour"
          }
        }
      };

      const App = () => (
        <table border="1">
          <caption>School time-table of a class 12th Student.</caption>
          <thead>
            <tr>
              <th></th>
              <th>9am-10am</th>
              <th>10am-11am</th>
              <th>11am-12noon</th>
              <th>12noon-1pm</th>
              <th>1pm-2pm</th>
              <th>2pm-3pm</th>
              <th>3pm-4pm</th>
            </tr>
          </thead>

          <tbody>
            {Object.keys(timeTable).map((day, index) => (
              <tr key={index}>
                <th>{day}</th>
                {Object.keys(timeTable[day]).map((hour, index) => {
                  if (index == 3) {
                    return (
                      <>
                        <td key={index}>Break</td>
                        <td key={index}>{timeTable[day][hour].subject}</td>
                      </>
                    );
                  } else
                    return <td key={index}>{timeTable[day][hour].subject}</td>;
                })}
              </tr>
            ))}
          </tbody>
        </table>
      );

      const rootElement = ReactDOM.createRoot(document.getElementById("root"));
      rootElement.render(<App />);
    </script>
  </body>
</html>


Tags:

You may like these posts

Show more

Post a Comment

0Comments

Post a Comment (0)
Share to other apps
Copy Post Link