Learning JSX
1. Advantages of JSX
2. Embedding Javascript
3. JS-IN-JSX
Note: You have to use the paragraph tags for rendering data in the component and the H1 tag for the heading
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.
Create a React app and use the ES6+ array iteration method to filter and render items.
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>
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>
15. Ternary Operator
Create a React app that uses the ternary operator to conditionally render the given components.
