REACT Learn the basics Published by:
Allan M Valooran,
React Developer
In this article, we will see how React originated and how it works with a simple sample example . Before diving deep into the technical aspects of it, let us the see the trends in the web development world.
Contents
REACT Learn the basics
HOW POPULAR IS IT?
The above statistics is from the www.npmtrends.com/ . It is compared with other popular libraries/framework used in the market. React is taking an enormous lead when it comes to downloads and usage. Needless to say the surge in recent years.
WHO USES REACT ?
Ever since Facebook made its internal project as open source, many companies have started building their application using React. Mostly because of the numerous benefits it has to offer to developers. Some of the companies that openly acknowledged about it are (source :stackshare.io/react)
- Netflix
- Uber
- Airbnb
- Amazon
- Udemy
- Twitter
HISTORY -REACT BASICS
The idea behind it came from a software engineer at Facebook , Jordan Walke. He called it ‘FaxJS’, but later came to be known as REACT. May be because of the huge reaction it got from the fellow developers. Most of us would have come across the famous presentation of React by Jordan Walke and Tom Occhino to facebook developers
It was first implemented inside NewsFeed of Facebook website and later was used entirely for then Instagram’s web developement.
IS REACT ALONE ENOUGH ?
Everybody would agree that nothing that we see today in the web development world would have been possible without the huge advancements in some famous libraries and tools.
- Node.js - JavaScript runtime (https://nodejs.org/en/)
- Npm - Package manager (https://www.npmjs.com/)
- Webpack - Package bundler (https://webpack.js.org/)
- Babel - Javascript transcompiler (https://babeljs.io/)
LETS GET STARTED -REACT BASICS
- As a prerequisite REACT Learn the basics, we need to ensure we have Node.js and npm installed from their official website https://nodejs.org/en/
- React community offers create-react-app tool for kickstarting a react project by running below commands in the terminal/command prompt
> npx create-react-app firstReactApp> cd firstReactApp
> npm start
- When it comes to editor for development, VISUAL STUDIO CODE is currently the best option. You can download and install from https://code.visualstudio.com/
Jsx
Jsx stands for Javascript XML. React makes it possible to write HTML and javascript together. The syntax for doing it is JSX. It should be transpiled to javascript by transpiler since browser understands only HTML, CSS, JS.
const element = <h1>Hello, world!</h1>;
Virtual DOM
‘’The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.’’
React generates the virtual DOM which will be updated whenever any states inside the react component is updated. Then the segments of Virtual DOM that has changed are found out using diffing algorithm and those segments alone are pushed to be DOM.
ReactDOM
Till ReactV0.14, came with ReactDOM packaged within it. Later they released as a separate package, since scope of is not longer limited to web applications. As it's name suggests, links React and DOM. The ReactDOM api’s most popularly used are
- ReactDOM.render()
- ReactDOM.findDOMNode()
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React App</title>
</head>
<body>
<div>REACT</div>
<div id="react-app"></div>
<script src=’bundleReactApp.js’></script>
</body>
</html>
Lets begin with Index.html.
The above code is as normal html file. Here, the div tag with id as react-app is where our react code will be mounted or rendered as soon as the bundleReactApp.js is executed. bundleReactApp.js is bundled by webpack. So, no need to worry about packaging all the files that are imported inside each file.It is efficiently taken care by Webpack. We need to give the entry file details in webpack.config.js. Create-react-app setup does all the setup related work for us under the hood.
Index.js
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
App.js
import React from 'react'
export default class App extends React.Component{
constructor(props){
super(props);
this.state = {
clickCount: 0
}
}
componentDidMount(){
this.getData();
}
componentDidUpdate(prevProps, prevState){
//check prevProps and prevState
}
getData = () => {
// Do Something like fetch data from api
}
onClick = () => {
this.setState({
clickCount: ++this.state.clickCount
});
}
onReset = () => {
this.setState({
clickCount: 0
});
}
render(){
const { clickCount } = this.state;
const jsxElement = clickCount > 0 ? <div>{`Clicked ${clickCount} time(s)`}</div> : <div>Not yet clicked</div>;
return(
<div>
{jsxElement}
<button onClick={this.onClick}>CLICK ON ME</button>
<button onClick={this.onReset}>RESET</button>
</div>
)
POPULAR METHODS/HOOKS IN REACT BASICS
constructor(props)
constructor(props) will be executed initially before the initial render. Then, you can calculate and assign React states .
State objects are literally the state of the application. When you call setState function each time, then it will rerender the component. Props are the values that are passed from the parent to child components
ComponentDidMount()
ComponentDidMount() will be executed only once after the initial render. It is where you can fetch data or do any async operations.
ComponentDidUpdate()
ComponentDidUpdate() will be executed on subsequent renders except the initial render. It is also similar to componentDidMount. Then you can check state or props changes and make necessary changes.
render()
render() will be executed initially and as soon as setState is triggered.
Here in the example, we re render each time when CLICK ON ME or RESET button is clicked. As we can update the new state value using setState function. Then, you can see the UI update as soon as it is rendered.
What's NEW ?- REACT BASICS
React has introduced easy to use HOOKS which makes developments much more interesting. It also makes simpler than Class based components.
REACT Learn the basics
Published by:
Allan M Valooran, React Developer
Nice article!