قالب وردپرس درنا توس
Home / Tips and Tricks / Should you use React for your next website? – CloudSavvy IT

Should you use React for your next website? – CloudSavvy IT



Reply logo on a dark background

React has skyrocketed in popularity in recent years. Described as “a JavaScript library for building user interfaces,” React’s declarative approach to rendering simplifies the construction of complex UIs.

React is a versatile tool with a wide variety of applications ranging from traditional websites to complex web apps. There is no clear rule of when to use React. Instead, there are guideline indicators that can help you judge whether React could be a good match.

Search for components

One sign that a site can benefit from React is if you plan to reuse a large number of standalone components. Abstract interface elements such as form controls and data display maps are excellent candidates for conversion to React components. This is especially true if your components are likely to contain custom behavior beyond what the browser provides.

The nature of React encourages you to isolate reusable aspects of your interface into separate components. Components are typically defined in their own source files, making your codebase easier to navigate and organize.

import React from "react";
import ReactDOM from "react-dom";
 
class ChildComponent extends React.Component {
 
    render() {
        return <h2>Child Componenth2>;
    }
 
}
 
class DemoComponent extends React.Component {
 
    render() {
        return (
            <div>
                <h1>Demo Componenth1>
                <ChildComponent />
            div>
        );
    }
 
}
 
ReactDOM.render(<DemoComponent />, document.body);

Screenshot of React components

Components can contain other components to enable rapid construction of complex UIs. A single component can display a user interface, apply custom CSS styles, and handle JavaScript-based user interactions. React uses a custom templating language, JSX, to allow you to construct user interfaces with components in a style similar to regular HTML.

Find stateful sections

React excels at managing parts of your interface that display differently depending on the value of an internal state. The idea of ​​”state” may seem vague at first. However, it is easy to identify stateful sections of your site; these are normally areas that cause changes to the user interface.

Examples include the value of a form entry, whether a toggle button is selected, and the loading status of dynamically loaded content. Content itself is often delivered “stateful” – a generic blog post screen displays the article data stored in the inner state of the component.

In the example below, the text on the screen is determined by the value of the demo key in the status of the part. The text is automatically changed every five seconds by updating the status.

import React from "react";
import ReactDOM from "react-dom";
 
class DemoComponent extends React.Component {
 
    constructor(props) {
        super(props);
 
        this.state = {
 
            demo: 1
 
        };
 
        this.timer = null;
 
        this.updateText = this.updateText.bind(this);
 
    }
 
    componentDidMount() {
        this.timer = setInterval(this.updateText, 5000);
    }
 
    componentWillUnmount() {
        if (this.timer) clearInterval(this.timer);
    }
 
    updateText() {
        this.setState({demo: (this.state.demo + 1)})
    }
 
    render() {
        return <h1>{this.state.demo}h1>;
    }
 
}
 
ReactDOM.render(<DemoComponent />, document.body);

Screenshot of React components

Try to find areas of your website that need to change dynamically. This could be the result of a user action, a recurring timer, or a browser event (such as going offline or getting new background data).

Any stateful section that is regularly updated will likely benefit from using React. React’s seamless health management provides a single source of truth to your site’s business logic.

Identify interactivity

React can make it easier to deal with interactivity within your website. The library abstracts JavaScript’s built-in event handlers to provide a unified interface for responding to user interactions.

The use of React can be particularly advantageous on complex shapes. The approach, based on “controlled components”, ensures that the internal state of the form matches what the user sees in the user interface.

import React from "react";
import ReactDOM from "react-dom";
 
class DemoComponent extends React.Component {
 
    constructor(props) {
        super(props);
 
        this.state = {
 
            value: "I'm a text field"
 
        };
 
        this.updateValue = this.updateValue.bind(this);
 
    }
 
    updateValue(e) {
        this.setState({value: e.target.value});
    }
 
    render() {
        return <input onChange={this.updateValue} value={this.state.value} />;
    }
 
}
 
ReactDOM.render(<DemoComponent />, document.body);

Screenshot of React components

By associating event handlers with form controls, you can update the status of a component when the user changes the value of the control, for example, by typing in a text field or selecting an option from a drop-down menu. Then make the check value prop (which is mapped to the HTML value attribute) refer back to the state of the component. Changes to the user interface and the component are now reflected in each other.

Look for DOM manipulation

This is the golden rule to keep in mind when deciding whether to use React. Stateful content, user interactivity, and dynamically updated components are all fed back to the DOM. Direct DOM manipulation using the browser’s JavaScript APIs is clunky at best and a nightmare at worst.

Any aspect of your website that requires extensive manipulation of the DOM – that’s the HTML elements displayed on the page – is a likely source of complexity. React can greatly simplify these scenarios. Its component-based nature abstracts the boredom of injecting HTML and managing event bindings.

Because React is declarative, you define what the DOM should look like within a component render() method. The library then does the hard work of creating, deleting, and shuffling HTML elements to produce the DOM structure that you “declared”.

Internally, React maintains its own “virtual DOM” that ensures that this entire procedure runs smoothly. This allows the library to perform the smallest number of renders possible, minimizing the overheads normally associated with DOM manipulation.

Conclusion

React’s popularity stems from the significant simplification of state administration and DOM manipulation it offers. Due to its declarative nature, highly complex web applications can be constructed in a similar way to simple HTML pages, requiring developers only to define what the DOM structure should look like at the moment.

As with any good thing, there are drawbacks too. Using React will increase the download size of your website. It also adds a dependency on JavaScript which prevents some users from accessing your content. There are many more points of failure than a “pure” HTML, CSS and JavaScript solution.

These limitations mean that React may not be the best choice for simple static websites. Sites with little interactivity and limited DOM manipulation are generally better off with a lighter solution. The benefits of React are really starting to pay off on sites with significant internal state. React improves developer productivity, codebase maintenance, and overall site performance when used carefully on data-centric interactive sites.


Source link