Beginners Quick Start to Learn React.js
Sandeep Mewara - 11/Jul/2020
Sandeep Mewara - 11/Jul/2020
[SHOWTOGROUPS=4,20]
Learn, understand and jumpstart with ReactJS
I recently experimented with React.js, so thought of sharing key points that I learnt. Though there are handful of material online, couldn't find one that covers all in a concise way that can help learn key aspects of ReactJS. I believe this would resonate with few and help them learn, understand and get a jumpstart with ReactJS.
What is React.js?
React.js is an open source JavaScript based library for building frontend (user interface) of a web or mobile application.
Why React.js?
Every web application core is to have a fast rendering response for better user experience. Because of this ease, users come back often and it leads to higher usage and adaptability.
Further, based on how it achieves speed, it is scalable and reusable.
How React.js Does It?
React.js works at component level. It helps break an app into many small components with their own responsibilities. This makes things simpler and scalable. With this breakdown:
A declarative example would be telling my son to make a house craft from paper instead of guiding him with each step of how to get the paper, cut it, paste it to form a house craft. Of course, the assumption here has to be true that my son knows how to make it.
A quick comparison with jQuery here (it’s imperative) – it would need details on how to build the house craft.
Translating the above in JavaScript language world:
The following features help us achieve the above:
For the entire React glossary, please refer to this link.
Learn, understand and jumpstart with ReactJS
I recently experimented with React.js, so thought of sharing key points that I learnt. Though there are handful of material online, couldn't find one that covers all in a concise way that can help learn key aspects of ReactJS. I believe this would resonate with few and help them learn, understand and get a jumpstart with ReactJS.
What is React.js?
React.js is an open source JavaScript based library for building frontend (user interface) of a web or mobile application.
Why React.js?
Every web application core is to have a fast rendering response for better user experience. Because of this ease, users come back often and it leads to higher usage and adaptability.
Further, based on how it achieves speed, it is scalable and reusable.
How React.js Does It?
React.js works at component level. It helps break an app into many small components with their own responsibilities. This makes things simpler and scalable. With this breakdown:
- it’s easier to refresh/update a portion of view without reloading an entire page of the app
- it leads to build once and reuse across
A declarative example would be telling my son to make a house craft from paper instead of guiding him with each step of how to get the paper, cut it, paste it to form a house craft. Of course, the assumption here has to be true that my son knows how to make it.
A quick comparison with jQuery here (it’s imperative) – it would need details on how to build the house craft.
Translating the above in JavaScript language world:
- With React – we define how we want a particular component to be rendered and we never interact with DOM to reference later
- With jQuery – we would tell the browser exactly what needs to be done using DOM elements or events need basis
The following features help us achieve the above:
For the entire React glossary, please refer to this link.
- Components– Simple or StateThese are small reusable codes that returns a React element to render. This component can have state related aspect based on need.
Code:
// Simple component - a Function Component
// props - input to React component - data passed from parent caller
function ComponentExample(props) {
return <h1>Hola! {props.name}</h1>;
}
// Simple component - a Class Component
class ComponentExample extends React.Component {
render() {
return <h2>Hola! {this.props.name}</h2>;
}
}
// State based component
// Needed when data associated with component change over time
// Can be asynchronous and modified via this.setState
class ComponentExample extends React.Component {
constructor(props) {
super(props);
this.state = {author: "Sandeep Mewara"};
}
render() {
return (
<div>
<h2>Hola! {this.props.name}</h2>
<p>Author: {this.state.author}</p>
</div>
);
}
}- Virtual DOM
DOM (Document Object Model) is a structured representation of the HTML elements present on a web page. Traditionally, one would need to get elements out of DOM to make any change. In context of an area of a webpage, it would need a lot more work to refresh it with updated content when needed.
React helps here with its declarative API. A copy of actual DOM is kept in memory which is much faster to change. Once done, React uses its ReactDOM library to sync the virtual representation of UI in memory to the actual DOM.
ReactDOM library internally keeps two VDOMs – one before update and one after. With them, React knows exactly what all to be updated in actual DOM and does all of it on the fly leading much faster updates compared to traditional DOM updates.
- JSX(JavaScript eXtension)
JSX is a syntax extension to JavaScript that follows XML rules. It’s more of a helpful tool than requirement in React as mentioned below in their website:
JSX converts HTML tags into React elements that are placed in DOM without any commands like createElements(), etc.
Hide Copy Code
// Example with JSX
const testHtml = <h2>Hola! Sandeep Mewara</h2>;
ReactDOM.render(testHtml, document.getElementById('root'));
// Same above example without JSX
const testHtml = React.createElement('h2', {}, 'Hola! Sandeep Mewara');
ReactDOM.render(testHtml, document.getElementById('root'));
- Unidirectional data flow
React implements one way reactive data flow. It uses flux as a pattern to keep data unidirectional. Interpret it as you often nest child components within higher order parent components. Snapshot of state is passed across from parent to child components via props (readonly, cannot be updated) and updates from child to parent happen via callbacks bound to some control on child component. - ES6 compatible
React library is ES6 (ECMAScript 2015 or JavaScript 6) enabled and thus makes it easier to write code in React. Among all changes to standardize JavaScript in ES6, Classes introduction is one of them which plays a critical role in React.
- Lifecycle
Each React component has a lifecycle that helps write a code at a specific time during the flow as per need.
Code:
// Use class for any local state & lifecycle hooks
class TestClass extends Component
{
// first call to component when it is initiated
constructor(props)
{
// with it, 'this' would refer to this component
super(props);
// some local state initialized
this.state = {currentdate: new Date()};
};
// executes before the initial render
componentWillMount() {
};
// executes after the initial render
componentDidMount() {
};
// executes when component gets new props
componentWillReceiveProps() {
};
// executes before rendering with new props or state
shouldComponentUpdate() {
};
// executes before rendering with new props or state
componentWillUpdate() {
};
// executes after rendering with new props or state
componentDidUpdate() {
};
// executes before component is removed from DOM
componentWillUnmount() {
};
// HTML to be displayed by the component rendering
render()
{
return (
<h1>Current Date: {this.state.currentdate.toString()}</h1>
);
};
}[/SHOWTOGROUPS]
