1 of 46

React – AJAX, SPA Components and Props

Web Technology

Subin Sahayam, Rourab Paul Assistant Professor,

Department of Computer Science and Engineering

Shiv Nadar University

2 of 46

    • Not a programming language
    • Technique for Accessing Web Servers and Web Pages
    • Asynchronous JavaScript and XML
    • Utilizes JSON instead of XML

K1

AJAX

DOM manipulation → changes part of the page on the client side.

AJAX → gets new data from the server without reloading the page.

3 of 46

    • Not a programming language
    • Technique for Accessing Web Servers and Web Pages
    • Asynchronous JavaScript and XML
    • Utilizes JSON instead of XML

K2

AJAX

4 of 46

Front End Timeline

K2

5 of 46

Front End Timeline

K2

6 of 46

    • Single HTML file
    • Dynamic content updates
    • Component-based structure
    • Client-side routing

K1

Single Page Application (SPA)

7 of 46

K2

Single Page Application (SPA)

8 of 46

Traditional vs React

K2

9 of 46

Front End Development Tasks

K2

10 of 46

    • Install Node.js

K1

Running React

11 of 46

    • Install Node.js
    • Open a Terminal
      • npx create-react-app app-name
      • Change directory/folder to app-name
      • npm start
    • Code in App.js

K3

Running React

12 of 46

K3

Running React

For linux

sudo apt update

sudo apt install nodejs npm

13 of 46

K3

Running React

14 of 46

K3

Running React

15 of 46

K3

Running React

  • Verify after installation from VS code Terminal

​

node -v

npm -v

Term

Simple Meaning

Node.js

Runs JavaScript outside the browser (usually on the server).

npm

Downloads and manages JavaScript libraries/packages.

16 of 46

K3

Running React

17 of 46

K3

Running React

18 of 46

K3

Running React

npm install

npm run dev

19 of 46

K3

Running React

20 of 46

K3

Running React

21 of 46

K3

Running React

22 of 46

K3

Running React

23 of 46

K3

Running React

24 of 46

K3

Running React

25 of 46

K3

Running React

26 of 46

K3

Running React

27 of 46

K3

Running React

28 of 46

K3

Running React

29 of 46

React Component – Todo list

K2

30 of 46

React Component Hierarchy – Todo list

K2

function App() {

return (

<TodoList />

);

}

​

​

function TodoList() {

return (

<>

<TodoForm />

<TodoItem />

<TodoItem />

</>

);

}

31 of 46

React Props

  1. Props?

K1

32 of 46

React Props

  1. Props
    • Properties
    • Object

K1

33 of 46

React Props

  1. Props
    • Properties
    • Object
    • Function Arguments – Javascript

K3

34 of 46

React Props

  1. Props
    • Properties
    • Object
    • Function Arguments – Javascript
    • Attributes – HTML

K3

35 of 46

React Props

  1. Props
    • Properties
    • Object
    • Function Arguments – Javascript
      • Syntax: function identifier(props) {function body};
    • Attributes – HTML

K3

36 of 46

React Props

  1. Props
    • Properties
    • Object

​

    • Function Arguments – Javascript
      • Syntax: function identifier(props) {function body}
    • Attributes – HTML
      • Syntax: <start_tag attribute="value"> 

K3

37 of 46

React Props

K3

38 of 46

React Props

K3

react_search_filter_app/

├── package.json

├── vite.config.js

├── index.html

└── src/

├── main.jsx

├── App.jsx

├── App.css

└── index.css

39 of 46

React Props

K3

react_props_app/

├── package.json

├── vite.config.js

├── index.html

└── src/

├── main.jsx

├── App.jsx

├── App.css

└── index.css

package.json

Defines the project.

Lists required libraries.

Defines commands such as npm run dev.

40 of 46

React Props

K3

react_props_app/

├── package.json

├── vite.config.js

├── index.html

└── src/

├── main.jsx

├── App.jsx

├── App.css

└── index.css

vite.config.js

Configures Vite.

Enables React support through the React plugin.

41 of 46

React Props

K3

react_props_app/

├── package.json

├── vite.config.js

├── index.html

└── src/

├── main.jsx

├── App.jsx

├── App.css

└── index.css

index.html

The only HTML page loaded by the browser.

Contains the root <div> where React is attached.

42 of 46

React Props

K3

react_props_app/

├── package.json

├── vite.config.js

├── index.html

└── src/

├── main.jsx

├── App.jsx

├── App.css

└── index.css

src/main.jsx

Entry point of the React application.

Connects React with index.html.

Renders the App component.

43 of 46

React Props

K3

react_props_app/

├── package.json

├── vite.config.js

├── index.html

└── src/

├── main.jsx

├── App.jsx

├── App.css

└── index.css

src/app.jsx

all the functions

44 of 46

React Props

K3

react_props_app/

├── package.json

├── vite.config.js

├── index.html

└── src/

├── main.jsx

├── App.jsx

├── App.css

└── index.css

src/App.css

Provides component-level styling for the search and product table UI.

src/index.css

Provides global styles applied to the entire React application.

45 of 46

References

​

​

​

​

​

​

  1. Paul J Deitel, Harvey M Deitel, and Abbey Deitel, "Internet and the world wide web: How to program," Pearson, Fifth Edition, 2012.
  2. Robin Wieruch, “The Road to React: The ReactJS with Hooks”, Lean Publishing,2023 Edition.

46 of 46

THANK YOU