Experiment 10: ReactJS – Render HTML, JSX, Components – function & Class

 Write a program to render HTML to a web page.



Create a React Application

Open Command Prompt / Terminal and run:


npx create-react-app myapp


cd myapp


npm start


Browser opens automatically at:
http://localhost:3000

React is successfully installed!


myapp

 ├── node_modules

 ├── public

 │    └── index.html

 ├── src

 │    ├── App.js

 │    ├── index.js

 │    └── App.css

 └── package.json


index.html



<!DOCTYPE html>

<html>

<head>

  <title>ReactJS – Render HTML</title>


  <!-- React CDN -->

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

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


  <!-- Babel -->

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

</head>


<body>

  <h2>ReactJS Experiment 10</h2>


  <!-- Root Element -->

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


  <!-- JS files -->

  <script type="text/babel" src="App.js"></script>

  <script type="text/babel" src="index.js"></script>


</body>

</html>


index.js


// Rendering App component into root element

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

root.render(<App />);


App.js


// Function Component

function App() {

  return (

    <div>

      <h1>Welcome to ReactJS</h1>

      <p>This content is rendered using JSX.</p>

      <ul>

        <li>HTML Rendering</li>

        <li>JSX Syntax</li>

        <li>React Components</li>

      </ul>

    </div>

  );

}



Write a program for creating and nesting components (function and class). 


App.js


import React from "react";


/* ---------- Function Component ---------- */

function Header() {

  return (

    <div>

      <h1>Welcome to React</h1>

      <p>This is a Function Component</p>

    </div>

  );

}


/* ---------- Class Component ---------- */

class Content extends React.Component {

  render() {

    return (

      <div>

        <h2>React Components</h2>

        <p>This is a Class Component</p>


        {/* Nesting a Function Component inside Class Component */}

        <Header />

      </div>

    );

  }

}


/* ---------- Parent Function Component ---------- */

function App() {

  return (

    <div>

      <h1>Main App Component</h1>


      {/* Nesting Class Component inside Function Component */}

      <Content />

    </div>

  );

}


export default App;


********************

App (Function Component)
 └── Content (Class Component)
      └── Header (Function Component)


my-react-app
 ├── public
 │    └── index.html
 └── src
      ├── index.js
      └── App.js

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>React Nested Components</title>
</head>
<body>
  <!-- React mounts here -->
  <div id="root"></div>
</body>
</html>


index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

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

Comments

Post a Comment

Popular posts from this blog

Experiment 1: Node.js

  Introduction to Node.js Node.js is a runtime environment that allows us to run JavaScript outside the browser , mainly on  the server.  With Node.js, developers can use the same language—JavaScript—for both the front end and back end, which makes development simpler and quicker. Node.js is designed to handle many users at the same time without slowing down. It uses a non-blocking and event-driven model, meaning it does not wait for one task to finish before starting another. Instead, it responds to events as they happen. This makes Node.js perfect for applications that require quick responses and continuous communication. Applications of Node.js Real-time chat applications Video streaming platforms Online gaming servers REST APIs and backend services Single-page applications (SPAs) IoT (Internet of Things) applications Collaborative tools like shared editors or dashboards Architecture of Node.js Node.js follows a single-threaded, event-driven archi...
Read more

Experiment 6: ExpressJS – Routing, HTTP Methods, Middleware

  6 Experiment 6: ExpressJS – Routing, HTTP Methods, Middleware Write a program to define a route, Handling Routes, Route Parameters, Query Parameters and URL building.  Below is a simple Express.js program that demonstrates: Defining routes Handling routes Route parameters Query parameters URL building 1. Install Express open command prompt mkdir abc cd abc npm init -y npm install express 2: Create app.js   ( Simple program to start with) notepad app.js                       const express = require('express'); const app = express(); app.get('/', (req, res) => {     res.send('Express routing working!'); }); app.listen(3000, () => {     console.log('Server running on http://localhost:3000'); }); save and close. 3: Run Server node app.js Open browser: type link or url :            http://localhost:3000   to see output ROUTING AND QUER...
Read more