If you have been reading our last posts, I think there have been some warm words missing about React, that’s why I’ve decided to add something about it. At the begining, briefly about the genesis.
ReactJS is a new technology for web development introduced by Facebook. The project was started by Jordan Walke, a Facebook software engineer, in 2011 and in 2013, Facebook released React as an open-source JavaScript tool.
First of all ReactJS (as some say) is not a framework. It is a JavaScript library to create user interfaces (UI) with high performance.
It combines the speed of JavaScript and uses a new way of rendering webpages, making them highly dynamic and responsive to user input.
WHY ISN’T IT A FRAMEWORK?
Usually, a framework can provide you with everything you need to build an application. Look at angular, for example, it has so many features: HTTP interaction, view rendering, animations, form validation, you can find all of these in angular. React does only one of these – view rendering, and it does it pretty damn well.
I will present you the most interesting things and what captivated me during the work with ReactJS.
REUSABLE COMPONENTS
React helps to synchronize the data automatically between the model and view controller. It is designed around the concept of reusable components. You define small components and you put them together to form bigger components. All components small or big are reusable, even across different projects. It works great with atomic desing – methodology of design system of components. We can simply create a reusable code block which divides the UI into smaller pieces. Here you have a simple example:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name=”Adrian” />
<Welcome name=”Max” />
<Welcome name=”Bella” />
</div>
);
}
ReactDOM.render(<App />, document.getElementById(‘root’));
FLEXIBILITY
React does give you more flexibility. For example, you can use it to render just one page or even just some component of your app. You don’t need to migrate your whole app to React.
And I think that’s why it’s so popular. React is shortly called as Written Once and Run Anywhere (WORA). Besides that, it can be used on a host of different projects: web applications, static sites, mobile apps and even VR. Additionally, it is supported by all major browsers, including older versions of IE. All you need to do is to add the React snippet, like the one in the example above, to your site:
• add an empty <div> tag with unique id HTML attribute to your site <body> tag:
<div id=”welcome”></div>
• add scripts tag to load React library:
<script src=”https://unpkg.com/react@17/umd/react.production.min.js” crossorigin></script>
<script src=”https://unpkg.com/react-dom@17/umd/react-dom.production.min.js” crossorigin></script>
• add put our script:
const Welcome = (props) => {
return React.createElement(“h1”, null, “Hello, “, props.name);
}
const App = () => {
return React.createElement(“div”, null,
React.createElement(Welcome, {name: “Adrian”}),
React.createElement(Welcome, {name: “Max”}),
React.createElement(Welcome, {name: “Bella”}));
}
ReactDOM.render(React.createElement(App, null, null), document.getElementById(‘welcome’));
That’s it! Now we will have working React components on our website.
To use the same code in JSX (more about this in one of the next points), just add an additional script to our website:
<script src=”https://unpkg.com/babel-standalone@6/babel.min.js“></script>
after adding type=”text/babel” attribute to our <script> tag, we can replace our code according to JSX:
const Welcome = (props) => {
return <h1>Hello, {props.name}</h1>;
}
const App = () => {
return (
<div>
<Welcome name=”Adrian” />
<Welcome name=”Max” />
<Welcome name=”Bella” />
</div>
);
}
ReactDOM.render(<App />, document.getElementById(‘welcome’));
REACT HOOKS
Hooks are a new addition in React 16.8 and lets us use state and other React features without writing a class. React provides useful hooks, such as: useState, useEffect, but we are not limited to them. We can also create our own hooks.
Thanks to them when we write a function component and realize that we need to add some state to it, we don’t have to convert it to a class now. We can use a Hook inside the existing function component. It is simple, look at the example below with use of useState(). It is a simply counter with initial value defined to 0 using useState function.
const [count, setCount] = useState(0)
<button onClick={() => setCount(count + 1)}>
Click me
</button>
<p>You clicked {count} times</p>
and thats it. When you click on the button, state of count value increments by 1.
VIRTUAL DOM
Virtual DOM is a virtual representation mapped to a real DOM that tracks changes and updates only specific elements without affecting the other parts of the whole tree. It’s kept inside the memory and is synced with the real DOM by a library such as ReactDOM.
Why did the team of ReactJS decide to use Virtual DOM?
Updating the DOM trees of the whole document, is not ergonomically valid because DOM trees are fairly large today, containing thousands of elements. This makes updates really quick, allowing for the building of a highly dynamic UI. React uses two virtual DOMs to render the user interface. One of them is used to store the current state of the objects and the other to store the previous state of the objects. Each time the virtual DOM is updated, React compares the two virtual DOMs and thanks to this knows about which objects in virtual DOM have been updated and renders only them in real DOM instead of rendering the whole real DOM.
In this way, with the use of virtual DOM React solves the problem of ineffective updating.
JSX (JAVASCRIPT XML)
ReactJS uses JavaScript ES6+ and JSX script. JSX is a special and valid syntax extension for JavaScript used to simplify UI coding, making JavaScript code look like HTML. JSX allows us to write HTML and JavaScript combined together in the same file. React gives us an own javascript syntax which we can use or not. Below you will find two examples which return the same element:
Without usnig JSX:
const text = React.createElement(‘p’, {}, ‘Hello AMB!’);
const container = React.createElement(‘div’,'{}’,text );
ReactDOM.render(container,rootElement);
Using JSX:
const container = (
<div>
<p>Hello AMB!</p>
</div>
);
ReactDOM.render(container,rootElement);
The second piece of code looks simplified in comparison to the first one, but in my opinion, it can be a serious disadvantage of ReactJS and generally source code looks like an old spaghetti code. And from what I’ve seen, I’m not alone with my feelings.
CONCLUSION
ReactJS is a lightweight library which can be used as small part of a working application or it can be used to create a new one from scratch.
React can be helpful for developers which need to quickly hop on work without much learning. While the library doesn’t dictate the toolset and approaches, there are multiple instruments, like Redux, that you must learn in addition. React provides you the freedom to choose the architecture, tools and libraries for developing an application based on your requirements.
Have fun using ReactJS!
AMB’S TECH INSIGHTS – AN ARTICLE BY AREK
At AMB Arek holds the position of a Senior Frontend Developer. He joined us in 2008 and started with PHP solutions then quickly extended his specialization with JavaScript-based technologies.
During years Arek built its expertise in all frontend-related fields including TypeScript as well as in backend solutions based on Node.JS. Lately Arek does a lot of projects using the latest frontend frameworks including React, Vue.JS and Angular.
