Toggle button state with React and vanilla javascript

#cdn #react #helloworld

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>

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'

The state is changed via

this.setState({
    pressed: !this.state.pressed
})

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');
    }
}

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')
);

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>

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.