This content originally appeared on DEV Community and was authored by Kinanee Samson
React is still the best JavaScript framework to use for frontend web development in 2022, the framework features many out of the box tools that makes it a breeze to work with. React was created by Jordan Walke at Facebook in 2013. Since then react has grown to become the most used JavaScript framework right now. There are many amazing features of react that makes it a dream to work with, the amazing superpowers of react hooks, or allowing you to just write functional component or the huge community and tons of resources built around react.
At this stage of frontend web application development, there are lots of options you could pick from to get the job done, some claim to be more structured while others claim to be more efficient. You might not totally buy this idea but relax, other frameworks might do a thing or two better than React, but personally I think when it comes to overall performance react outshines most JavaScript frame works I’ve used, the development experience with react is nothing short of superb.
You like Object Oriented approach to building your UI? React has class based components, if you like prefer a functional approach react allows you to use functional components. Let’s explore in detail some of the features that makes react the King of JavaScript UI frameworks.
React Uses Plain JavaScript.
This is often an overlooked part of react, the fact that a react file is a simple JavaScript file that exports a class or a function. Let’s simplify this so you’ll understand how easy it is to get started with react.
If you have npm installed you just have to run ‘npx create-react-app app-name’. That command will bootstrap a starter template react app that you can begin editing immediately. You can easily add your own react component by creating a new JavaScript file that exports a function or a class inside the ‘src’ folder.
export default function Component() {
return(<h1>Hello World</> )
}
The code snippet above just illustrates how easy it is to get started with react, we just export a function that returns some JSX. Nothing too complex there, except you are not acquainted with JSX.
JSX is a react extension to JavaScript that allows us to write HTML in JavaScript files, do not however think that JSX is just a smile templating language. The use of JSX allows us to keep our component logic and UI in a single file without bloating it. JSX allows us to interpret JavaScript expression and statements by wrapping it in curly braces, it actually compiles first and is faster than the actual JavaScript we write outside JSX.
It is best to consider JSX in another article.
React Supports Class Based or Functional Components
With react there is more than one approach to compose your UI. If you like complexity, forgive my sarcasm then you can use class based components. A class component is Just a class that extends React.Component, it has a render method that is called to build and return our UI.
import { Component } from "react";
class App extends Component {
render() {
let message = 'Hello World!';
return (
<h1>{ message }</h1>
);
}
}
export default App;
Some things should be simple and straightforward so I prefer using functional components. You just declare and export a function that returns our UI as we did in the earlier example. So whatever style you are comfortable with , react has got you.
React Hooks
This is one of the holy grail of react. React hooks just makes your work so much easier, react hooks are designed to simplify difficult tasks like re-rendering the UI, managing state, picking an element from the DOM and lots more. There is a hook for most things you want and if there isn’t any react hook that meets your need then you can also build your own custom hook.
import { useState } from 'react';
const [ count, setCount ] = useState(0);
function App() {
return (
<div>
<p>
You pressed <b>{ count }</b>
</p>
<button
onClick={setCount(count++)}>
update count
</button>
</div>
);
};
export default App;
We used a very simple react hook here that allows us to update the state of a component and re render the UI anytime there is a state change. Now most people would say, there are other frameworks that makes state management a built in feature, say for instance Svelte or Angular which is reactive by default, but this way is more concise when compared to using vanilla JavaScript or even jQuery.
This ensures that there is less broiler plate code, we would have written more code if this was done without hooks or from a class based component. Hooks also eliminate the need for listening to multiple life cycle events on components, the hook manages all that behind the scene for you.
React is Extendable
This is one of the great aspects of react, the fact that you can easily integrate react with any JavaScript library or framework. You can be sure that most JavaScript modules will work out of the box when added to your react app. Giving you a good starting point that you can play with. You can add as much as you like or you can keep it is simple as you like, it's all down to you to decide.
There are many other framework that are built on top of react, take for instance NextJs, Gatsby, etc.
NextJs is a framework for full stack web app development, NextJS allows us to build for both the server and the frontend from the same codebase, React does not ship apps that can be indexed by SEO bots, but NextJS solves this approach in many efficient ways. Server side rendered applications, pre built HTML templates that can be rendered on the client.
Gatsby is another awesome alternative to NextJS, it basically offers the same features as NextJS and it shouldn't be taken lightly.
React supports Multiple UI Design approach
React also supports multiple approach when it comes to application architecture and and design structure. It is up to you to chose the design and development approach to building your application, you want a data driven system or you want a state driven system?
All that react presents to us is a bare bones for building our application, we get to decide how we are going to use react to build our web app. You decide how you want to structure your components and how you want it to interact with your application state. Your components could be tightly coupled to your application state if that's what works for you.
React has a small learning curve
There is almost zero learning curve for JavaScript developers when they come to start using react and good JavaScript engineer should find it easy to get started with, as compared to learning Typescript because you want to use Angular, don’t get me wrong, TypeScript is an awesome tool and I totally love using it. But the learning curve wasn’t smooth from a beginners perspective.
Since react is basically plain JavaScript, if you are already familiar with using JavaScript, you will find it quite simple to learn react. This does not imply that react is timid, it is advanced enough for the professional while presenting itself in a very simple manner to the beginner.
React has a super strong community
It has the backing of Facebook and an ecosystem of over 100M developers who work with react daily. React is loved amongst the JavaScript ecosystem and remains the most downloaded JavaScript UI library on npm with over 14,534,124 npm downloads.
Leave your thoughts on react and Let me know if you have other frameworks you think comes close or even beats react. I’d love to to see a Thing or two.
This content originally appeared on DEV Community and was authored by Kinanee Samson
Kinanee Samson | Sciencx (2022-07-10T14:30:05+00:00) 7 Reasons Why React is King of JavaScript UI Frameworks. Retrieved from https://www.scien.cx/2022/07/10/7-reasons-why-react-is-king-of-javascript-ui-frameworks/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.