ubuntu container

 1. Create an ubuntu container: 

docker run -d -p 10000:3000 -p 11000:4000  --name ub-react -v "C:\RajeshWorks\DockerVolumes\React\ReactCompleteApp:/rajesh" ubuntu:latest tail -F /dev/null

2. Execute the docker container: 

docker exec -it ub-react bash

3. Update apt-get: 

apt-get update

4. Install sudo: 

apt-get install sudo -y 

5. Install curl: 

sudo apt-get install curl  -y

6. Add PPA for latest node: 

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash - 

NOTE: This command may take some time but do not press ctrl+c.

NOTE: TO find the latest version, go to https://github.com/nodesource/distributions

On this page, find the "Installation instructions" section and find the "Using Ubuntu" under it. 

This section will give you the latest version of above curl command. 

7. Install latest node: 

apt-get install -y nodejs

8. Update and upgrade apt-get: 

sudo apt-get update

sudo apt-get upgrade -y

9. Install npm: 

sudo apt-get install -y npm

10. Update npm: 

npm cache clean -f 

sudo npm install -g npm 

11. Check the versions of npm and node: 

node --version   (v20.18.1)

npm --version    (11.0.0)

12: Install vim: 

apt-get install vim

13. cd rajesh (so that you can see and edit files)

simple crud 001

 import { useState } from "react";

const StudentList = () => {

  const [studentList, setStudentList] = useState([

    { id: 1, firstName: "first001", lastName: "Last001" },

    { id: 2, firstName: "first002", lastName: "last002" },

    { id: 3, firstName: "first003", lastName: "last003" },

    { id: 4, firstName: "first004", lastName: "last004" },

    { id: 5, firstName: "first005", lastName: "last005" },

  ]);

  const [showModal, setShowModal] = useState(false);

  const [currentStudent, setCurrentStudent] = useState(null);

  const handleAdd = () => {

    const newStudent = { id: studentList.length + 1, firstName: "first006", lastName: "last006" };

    setStudentList((prevList) => [...prevList, newStudent]);

  };

  const onBeginEdit = (student) => {

    setCurrentStudent(student);

    setShowModal(true);

  };

  const onCompleteEdit = (updatedStudent) => {

    setStudentList((prevList) =>

      prevList.map((student) =>

        student.id === updatedStudent.id ? updatedStudent : student

      )

    );

    setShowModal(false);

  };

  const onControlChange = (e) => {

    const { name, value } = e.target;

    setCurrentStudent((prevStudent) => ({

      ...prevStudent,

      [name]: value,

    }));

  };

  return (

    <>

      <button onClick={handleAdd}>Add New</button>

      <table border="1px solid black">

        <thead>

          <tr>

            <th>First Name</th>

            <th>Last Name</th>

            <th>Actions</th>

          </tr>

        </thead>

        <tbody>

          {studentList.map((student) => (

            <tr key={student.id}>

              <td>{student.firstName}</td>

              <td>{student.lastName}</td>

              <td>

                <button onClick={() => onBeginEdit(student)}>Edit</button>

              </td>

            </tr>

          ))}

        </tbody>

      </table>

      {showModal && currentStudent && (

        <div>

          <form

            onSubmit={(e) => {

              e.preventDefault();

              onCompleteEdit(currentStudent);

            }}

          >

            <label>First Name</label>

            <input

              type="text"

              name="firstName"

              value={currentStudent.firstName}

              onChange={onControlChange}

            />

            <label>Last Name</label>

            <input

              type="text"

              name="lastName"

              value={currentStudent.lastName}

              onChange={onControlChange}

            />

            <button type="submit">Save</button>

          </form>

        </div>

      )}

    </>

  );

};

export default StudentList;

Simple React useState and useEffect

 import { useState, useEffect } from "react";

const StudentList = () => 

{

const [studentList, setStudentList] = useState([

{

firstName : "",

lastName : ""

}

]);

useEffect(()=> {

setStudentList([{firstName: "first001" , lastName : "Last001"}]);

setStudentList((prevList) => [...prevList , {firstName: "first002", lastName : "last002"}]);

setStudentList((prevList) => [...prevList , {firstName: "first003", lastName : "last003"}]);

setStudentList((prevList) => [...prevList , {firstName: "first004", lastName : "last004"}]);

setStudentList((prevList) => [...prevList , {firstName: "first005", lastName : "last005"}]);

}, []);

const handleAdd = () => {

setStudentList((prevList) => [...prevList , {firstName: "first006", lastName : "last006"}]);

}

return(

<>

<button onClick={handleAdd}>Add New </button>

<ul>

{

studentList.map(student=> {

return (<li>{student.firstName} {student.lastName} </li>); }

) 

}

</ul>

</>

);

} 

export default StudentList;

clear App.css and index.css

import StudentList from  "./StudentList.jsx";

function App() {

  return (

    <>

  <StudentList/>

    </>

  )

}

export default App