React JS

Intro Section
What will be the final outcome?

We will be creating a Web application for a basic library management system,

Our tech stack will be,

1. Front end: React JS

2. Back end: Java
3. Data base: PSQL & ElasticSearch
4. Hosting: Tomcat

The final outcome will be like this:

[Show the Web application]
What is React.js?

1. React was developed by Facebook [in 2011, Released to public on 2013].

2. React is an open-source JS library [View layer], not a framework.
3. Used by:
a. Facebook
b. Instagram
c. Netflix
d. Reddit
e. Airbnb and Many more...
Why React.js?

1. Easy to Learn and Use

2. Creating Dynamic Web Applications Becomes Easier [single-page applications]
3. Reusable Components [create reusable UI components]
4. Performance Enhancement [Faster]
5. Widely used, so a bigger community
Fundamentals
Component

1. Components are the building blocks of react

2. You can think of a component as a collection of HTML, CSS and JS
3. Components are self-contained reusable building blocks of web application.
4. They describe your UI at any point in time, just like a server-rendered app.
Props

1. Passed down to the component from the parent component and represents the data for
the component
2. Accessed via this.props
Example

function Welcome(props) {

return <h1>Hello, {props.name}</h1>;

class Welcome extends React.Component {

render() {

return <h1>Hello, {this.props.name}</h1>;

}
State

1. Represents internal state of the component

2. Accessed via this.state
3. When a component's state data changes, the rendered markup will be updated by
re-invoking render() method
JSX

1. Arguably, one of the coolest things in React

2. JSX = JS + XML
3. XML-like syntax for generating component's HTML
4. Easier to read and understand large DOM trees
5. Translates to plain JavaScript using react-tools
Virtual DOM

1. The virtual DOM is used for efficient re-rendering of the DOM

2. React aims to re-render the virtual tree only when the state changes
3. Uses 2 virtual trees (new and previous) to find differences and batch update real DOM
4. Whenever possible, does not update entire component in real DOM - only computes a
patch operation that updates part of the DOM
Hands on development starts...
Phases

1. Installing & Setting up VS code

2. Simple HTML
3. CDN imports
4. Pure JS - React code - Hello world
5. Node installation & JSX tool setup - watch command
6. JSX - React code - Hello world
7. Set up two folders,
One for JSX,
One for pure JS
Source code - Flow

1. Index.html
2. bookData.js
3. App.js
4. App.cs
5. Home.js
6. Button & Label common component
7. Admin.js
8. Users.js
9. Books.js
10. NewBook.js

AXIOS and syntax for making AJAX calls

Whats next?

1. All this can be automated using Node, We need to install react and start the server.
2. You can try experimenting it, all the steps are documented in
https://reactjs.org/docs/create-a-new-react-app.html#create-react-app

For Further learning:

You can enhance this web app
[Implement logging, Sign ups, Book reviews, Book status & counts, etc]
Work on other projects or clone famous applications.

For video tutorial,

This video from “Programming with Mosh” channel is recommended.
https://www.youtube.com/watch?v=Ke90Tje7VS0
Feedbacks

1. Any room for improvements?

2. Any difficulties in understandings?
3. Language barriers?
4. Any teaching methodology changes needed?
Thank you