DEV Community

Simone Gentili
Simone Gentili

Posted on • Updated on

Toggle button state with React and vanilla javascript

preamble

As curious backend developer that in the past worked just with jQuery, after years, I want to study and share the way to develop simple applications using ReactJs. For simplicity my constraint is to use vanilla javascript and cdn.

requirements

To follow the article you need just your favorite editor. My favorite one is vim. React will be installed using CDN and npm is not required for this very simple example.

examples

install react using cdn

<html>
    <head>
        <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    </head>
</html>
Enter fullscreen mode Exit fullscreen mode

create SimpleButton.js - the component

The following is a button. A very simple button. The purpose of the following button is just to allow users to toggle its status from 'unpressed' to 'pressed' and vice versa. Easy. The trick is made via

this.state.pressed ? 'pressed' : 'unpressed'
Enter fullscreen mode Exit fullscreen mode

The state is changed via

this.setState({
    pressed: !this.state.pressed
})
Enter fullscreen mode Exit fullscreen mode

The final component is the following. The initial state is defined as false. False will display 'unpressed'.

class SimpleButton extends React.Component {
    constructor(props) {
        super(props);
        this.state = { pressed : false };
    }

    render() {
        return React.createElement('button', {
            onClick: () => this.setState({
                pressed: !this.state.pressed
            })
        }, this.state.pressed ? 'pressed' : 'unpressed');
    }
}
Enter fullscreen mode Exit fullscreen mode

app.js - application

The application code is the following. Simple! This is the little application I can write with React. And this is also vanilla javascript as promised in the preamble section.

ReactDOM.render(
    React.createElement(SimpleButton),
    document.querySelector('#root')
);
Enter fullscreen mode Exit fullscreen mode

This script assumes that the html document should contains a root item. This means that the html document now should contain react, the root component, include the simple button and the application files.

<html>
    <head>
        <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    </head>
    <body>
        <div id="root"></div>
        <script src="SimpleButton.js"></script>
        <script src="app.js"></script>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Conclusion

I realize that the power of React is not in this example. Also, React is used to be used within RxJs syntax. Vanilla javascript is not a good choice in a real world application. I am just happy to see that today is very simple to work in the client side of the web applications.

Ideas

It could be very interesting to wonder in other React examples. For example can I made this example in other ways for example using RxJs. I am sure I'll try! Also, ... ay I add some tests to this "application"? Any idea is welcome.

Top comments (2)

Collapse
 
katnel20 profile image
Katie Nelson

There is a problem in your app.js file.
The line:

React.createElement(LikeButton),

should be:

React.createElement(SimpleButton),

Otherwise, it works great. Thanks for the submit.

Collapse
 
sensorario profile image
Simone Gentili

Just fixed! Thank you so much for the reporting!!!