Let's react - Meetup

Let’s React
By Rajnish Katharotiya
Front-end Engineer @knovator

Topics
➔ Introduction of ReactJS.
➔ Component workflow.
➔ State management and useful life-cycles.
➔ React hooks.
➔ Server Side Rendering.

React Introduction
- React is an javascript library for building user
interface.
✅ Following
👆
✅ Following

React Introduction
- Initialise app.
npx create-react-app my-app //cra boilerplate
cd my-app
npm start

React Introduction
- Render app into Actual DOM.
ReactDOM.render(
<APP />,
document.getElementById('root')
)
<!DOCTYPE Html>
<html>
<head>...</head>
<body>
<div id="root" />
</body>
</html>
/public/index.html
/src/index.js
Compiled JSX syntax

What is JSX ??
JSX is basically a
syntax extension
of regular
JavaScript and is
used to create
React elements.
These elements are
then rendered to
the React DOM.
import React from 'react';
const App = () => ( <h1>Hello</h1> );
export default App;
/app.js

Components
class Profile extends Component {
state = {
followBtnText: 'Following'
};
render() {
const { state } = this;
return ( <Button {...state} /> );
}
}
/Profile.js - class
const Button = ({followBtnText}) =>
{
return (
<button>
{followBtnText}
</button>
);
};
/Button.js - functional

What is state?
In the React sense,
“state” is an object that
represents the parts of
the app that can
change. Each
component can
maintain its own state,
which lives in an object
called this. state
constructor(props){
super(props);
state = {
followBtnText : “Follow”
};
}
componentDidMount(){
this.setState({ followBtnText: “Following” })
}
render() {
return ( <Button {...state} /> );
}
}
/Profile.js

What is Props ?
constructor(props){
super(props);
state = { userName : 'John Doe' };
}
componentDidMount(){
this.setState({ ...this.props })
}
render() {
return ( <Name {...state} /> );
// return ( <Name userName={state.userName} />
)
}
/Profile.js
const Name = (props) => {
const { userName } = props;
return (
<h1>{userName}</h1>
);
};
/Name.js

- Global State
management
- Store
- Actions
- Reducers
Redux

Lifecycles
- Each Component has lifecycle which you can monitor and
manipulate during its phases.

Useful Lifecycles
➔ componentWillMount()
➔ render()
➔ componentDidMount()
➔ componentWillReceiveProps() / componentDidUpdate()
➔ shouldComponentUpdate()
➔ componentWillUnmount()

React Hook
- Function to hook with state and Lifecycle of functional
component.
const Profile = () => {
const [ followStatus, setFollowStatus ] = useState(‘Follow’);
return ( <Button followStatus={followStatus} /> );
}
/Profile.js

React Hook - On Mount
const TopPicks = (props) => {
const [ list, setList ] = useState([]);
useEffect( () => {
const list = getTopPicksByUser();
setList(list);
}, [] );
return ( <Videos list={list} /> );
}
/TopPicks.js

React Hook - On Update
const VideoItem = (props) => {
const [ progress, setProgress ] =
useState(‘’);
useEffect( () => {
setProgress( props.progress );
}, [ props.progress ] );
return ( <ProgressBar progress={progress} /> );
}
/VideoItem.js

React Hook - On Unmount
const UserStatus = (props) => {
const [ staus, setStatus ] = useState(‘Active’);
useEffect( () => {
getUserStatus.subscribe(setStatus);
return () => getUserStatus.unsubscribe(setStatus);
}, [] );
return status;
}
/app.js

Server Side Rendering
- SSR is the ability of a front-end framework to render
markup while running on a back-end system.
➔ Performance benefit for our customer.
➔ Faster time for an initial page render.
➔ Consistent SEO performance.
Why SSR?

Overview - Client Side Rendering
- Browser download the javascript and then use it to
execute content.
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link href="/style.css" rel="stylesheet"/>
<title>Knovator</title>
<link rel="icon" href="/favicon.png" type="image/gif" sizes="16x16">
</head>
<body>
<div id="root"></div>
<script src="/index.js" type="text/javascript"></script>
<script src="/vendor.js" type="text/javascript"></script>
</body>
</html>

Understand with example
https://www.pokemon.com/

Pokemon - Get #1
Browser Server
<html lang="en">
<head>
</head>
<body>
<div id="root"></div>
</body>
</html>
GET /
index.html

Pokemon - View #1

Pokemon - Get #2
Browser Server
GET /index.js
index.js

Pokemon - View #2
- Thousands lines of
javascript code
prased.
- Script execution
begin.
- ReactDOM render.

Pokemon - Get #3
Browser
Pokemon
Server
GET /api/pokemon
Pokemon

Request Overview
https://www.pokemon.com/ https://www.pokemon.com/ https://www.pokemon.com/ https://www.pokemon.com/
Server
4. Meaningful Presentation3. Static Content Render2. Blank Screen1. Blank Screen

Overview - Server Side Rendering
<html lang="en">
<head>
</head>
<body>
<div id="root">
<div class="root-component">
<h1 class="title"> React Meetup </h1>
</div>
</div>
</body>
</html>
- Server(NodeJs) renders the App and generates the content
at server-side and returns the generated content.

Request Overview
21
GET /
● Server get
request
● Server gets
pokemon from DB
● Server renders
HTML
Downloads js and Renders DOM
- DOM Renders again
on client-side.
- Verify state and
attach handlers

“A good discussion increases the
dimensions of everyone who takes part”
- From Randolph Bourne

Let's react - Meetup

Recommended

More Related Content

What's hot (20)

Similar to Let's react - Meetup (20)

Recently uploaded (20)

Let's react - Meetup

Editor's Notes