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 class Profile extends Component { constructor(props){ super(props); state = { followBtnText : “Follow” }; } componentDidMount(){ this.setState({ followBtnText: “Following” }) } render() { const { state } = this; return ( <Button {...state} /> ); } } /Profile.js

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

Complexity of state/props

- 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> <link
href="/style.css" rel="stylesheet"/> </head> <body> <div id="root"></div> <script src="/index.js" type="text/javascript"></script> </body> </html> GET / index.html

Pokemon - View #1 https://www.pokemon.com/

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

Pokemon - View #2 https://www.pokemon.com/ - Thousands lines of javascript
code prased. - Script execution begin. - ReactDOM render.

Pokemon - Get #3 Browser Pokemon Server GET /api/pokemon Pokemon
https://www.pokemon.com/

Request Overview https://www.pokemon.com/ https://www.pokemon.com/ https://www.pokemon.com/ https://www.pokemon.com/ Server GET / index.html
GET /index.js index.js Rendering DOM pokemon GET /api/pokemon Rendering DOM 4. Meaningful Presentation 3. Static Content Render 2. Blank Screen 1. Blank Screen

Overview - Server Side Rendering <html lang="en"> <head> <link href="/style.css"
rel="stylesheet"/> </head> <body> <div id="root"> <div class="root-component"> <h1 class="title"> React Meetup </h1> </div> </div> <script src="/index.js" type="text/javascript"></script> </body> </html> - Server(NodeJs) renders the App and generates the content at server-side and returns the generated content.

Request Overview https://www.pokemon.com/ 2 1 https://www.pokemon.com/ 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

Performance Overview - CSR

Performance Overview - SSR

CSR - Lighthouse Report

SSR - Lighthouse Report

CSR - Performance Report

SSR - Performance Report

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

Have a great Day!

Let's React Meetup

Let's React Meetup

Other Decks in Programming

Featured

Transcript