Presentations includes following topics :-
Introduction of ReactJS.
Component workflow.
State management and useful life-cycles.
React hooks.
Server Side Rendering.
6. 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
8. 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
18. 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?
19. 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>
Hey everybody, Today we will talk about few concepts of React. In this meet-up, i would like to discuss topics of beginner to expert level. So, before going further let me introduce mysef, i’m rajnish katharotiya working here at knovator as an front-end engineer. And has been developing react applications from past 1.5 years. In my one and half year of journy i learnt many stuffs about react implementations and best practices. So, let’s just dive into topic which we are gonna cover and discuss together in this meetup.
This top five topics i picked to discuss, where first one is introduction of reactjs, component workflow to get basic idea of react, some of us is totally new to react so this will help them to get understand why we should using it and what is it advantages. Then next state management and useful life-cycles is there, who's already started react for them this can be best practices. This all topics needed to become reactjs developer. While moving further we have next booming topic called React Hooks, this one is launched few months ago from 16.8v of react with some exciting features. And finally more attractive topic of all comes in line is Server Side Rendering aka SSR which also one of necessary tech which beneficial to know with react. Now let’s see all one by one ….
So, FIrst React is a javascript library which use to build a user interface of the web app. The main advantage of this platform is to update UI changes through Virtual DOM. Here is one example of it. …….
In old days, when we wanted to update a status of just the number of comments of a particular page user has to reload whole DOM by refreshing page. Whereas with the help of this virtual DOM, it will update just only text of button-like follow to following.
With no time, it’ll update our viewport without re-rendering actual DOM.
React is a javascript library which use to build a user interface of the web app. The main advantage of this platform is to update UI changes through Virtual DOM. Here is one example of it. …….
In old days, when we wanted to update a status of just the number of comments of a particular page user has to reload whole DOM by refreshing page. While the help of this virtual DOM, it will update just only text of button-like follow to following.
With no time, it’ll update our viewport without re-rendering actual DOM.
React is a javascript library which use to build a user interface of the web app. The main advantage of this platform is to update UI changes through Virtual DOM. Here is one example of it. …….
In old days, when we wanted to update a status of just the number of comments of a particular page user has to reload whole DOM by refreshing page. While the help of this virtual DOM, it will update just only text of button-like follow to following.
With no time, it’ll update our viewport without re-rendering actual DOM.