React Tutorial Basics

 download node.js and install

check whether it is properly installed by 

node -v

C:\Users\rmcme>node -v

v18.15.0

C:\Users\rmcme>npm create vite

y to proceed

select vite version 4.1

give project name : react-app

select framework: React 

select variant : typescript

C:\Users\rmcme>cd react-app

install vs code

cd react-app

npm i     ----to install

C:\Users\rmcme\react-app\code . to open vs code editor

In VS code Terminal, enter

npm run dev

you will  see similar to this URL: http://localhost:5173/

click the URL to see the webpage to check

Now create a file Meesage.tsx in src folder

add 

/Pascal Casing

function Message() {

    //JSXML

   // const name="RMC";

    if (name)

       return <h1>Hello {name} World</h1>;

    return <h1>Hello World</h1>;

}  

export default Message;

Edit App.tsx file

replace with the following 

import Message from './Message';

function App() {

 

  return <div><Message></Message></div>

 

}

export default App;

You can check in the browser

In terminal window in VS code,

install Bootstrap 

npm i bootstrap@5.2.3

edit App.css

delete the contents and save

edit index.css

delete the contents and save

edit main.tsx

replace

import './index.css'

with 

import 'bootstrap/dist/css/bootstrap.css'

Create a directory components under src

under components create a file ListGroup.tsx

add the following contents:

function ListGroup() {

    return <h1>ListGroup</h1>

}

export default ListGroup;

Edit App.tsx

replace the contents with 

import ListGroup from "./components/ListGroup";

function App() {

  return <div><ListGroup /></div>

}

Replace the contents.

//import {  } from "react";

function ListGroup() {

  // return <h1>ListGroup</h1>

  const items = [

    "Chennai",

    "Bombay",

    "New Delhi",

    "Bangalore",

    "Madurai",

    "Calcutta",

  ];

  return (

    <>

      <h1>List</h1>

      <ul className="list-group">

        {items.map((item) => (

          <li>{item}</li>

        ))}

      </ul>

    </>

  );

}

export default ListGroup;

Check in the Browser and inspect to check the clicked events