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 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.
Another key part of React.js is being declarative. There is a an abstraction from details on how to do. This makes it easier to read and understand.
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 above in Javascript langauge world:
- With React – we define on how we want a particular component to be rendered and we never interact with DOM to reference later
- With jQuery – we would tell browser exactly what needs to be done using DOM elements or events need basis
Key features
Following features help us achieve above:
- Components – Simple or State
These are small reusable codes that returns a React element to render. This component can have state related aspect based on need.
// 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
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>
);
}
}
For above example component, use normal HTML syntax:
<ComponentExample />
- 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.
React.js has a library ReactDOM to access and modify the actual DOM.
To render HTML on a webpage, use:
ReactDOM.render()
- 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:
React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code
JSX converts HTML tags into React elements that are placed in DOM without any commands like createElements(), etc.
// 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'));
Normally, we can’t assign an HTML tag to a JavaScript variable but we can with JSX!
- 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.
// 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>
);
};
}
For entire React glossary, please refer: https://reactjs.org/docs/glossary.html
Sample application Setup
We will explore and understand more from React’s demo app. We will jump start our sample app bootstrapped with Create React App
I used yarn create react-app demo-react-app and opened the created directory in IDE that looked like:
With above, once I ran yarn start in root folder demo-react-app, app was up and running without any code change. We can see default app hosted in browser at following url: http://localhost:3000/
Quick look at few key files that connect dots that lead to above UI view:
- public/index.html
Base file which we browse using url. We see the HTML defined in it. For now, the element to notice would be a div named root.
- src/index.js
Located at root of app, is like an entry file (like main) for app that has code like below:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
It imported React and related library, CSS file for app, a component named App. After this, it defines a render method which displays whatever is defined in component App as page root element.
- src/App.js
Defines a function component of React that returns an html with React logo and a link to render.
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
How did index.js got connected with index.html?
Create React App uses Webpack with html-webpack-plugin underneath. This Webpack uses src/index.js as an entry point. Because of this, index.js comes into picture and all other modules referenced in it. With html-webpack-plugin configuration, it automatically adds the script tag in html page.
Let’s see with few modifications to the app now!
Specifically I will be changing flavour of above 3 files to play around.
- AppHola.js file for a HelloWorld kind of change – displays my name instead of other texts
- AppNavigation.js (has portion of pages updated)
- Introduction – simple display of texts
- Clock/counters auto updating
- Random color generator that updates background color of defined area
Given this was for beginners, I have not added too much of complexity to the app. I have tried to keep it as simple possible with some variance of what all can be tried.
There are plenty of imports that can be used. For example, in our demo app, to have navigation, we have used a navigation router react-router-dom import (run npm i react-router-dom --save inside root folder).
Hope this short guide/tutorial gives a broad overview about React.JS and how to start development of the same. Keep learning!
Download entire code for lookup from here: https://github.com/sandeep-mewara/demo-react-app
