Unexpected token < when using reactjs app

SomeGuyWhoCodes Published at Dev

SomeGuyWhoCodes

I have been following a video tutorial which apparently using JSBin to show its code, when I tried out the code locally then it does not work for me. Could someone please help me to figure out what is the issue.

Below is the code

<!DOCTYPE html>
<html>

<head>
    <title>Redux basic example</title>
    <script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.0/react.min.js" type = "text/babel"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.0/react-dom.min.js" type = "text/babel"></script>
</head>

<body>
    <div id='root'>

    </div>
    <script>
        const counter = (state = 0, action) => {
            switch (action.type) {
                case 'INCREMENT':
                    return state + 1
                case 'DECREMENT':
                    return state - 1
                default:
                    return state
            }
        };

        const Counter = ({ value}) => (<div>{value}</div>);

        const { createStore } = Redux;
        var store = createStore(counter);

        const render = () => {
            ReactDOM.render(
                <Counter value={store.getState()} onIncrement = {
                    () => store.dispatch({type: 'INCREMENT'})
                } 
                onDecrement = {
                    () => store.dispatch({type: 'DECREMENT'})
                } />,
                document.getElementById('root')
            );
        };

        store.subscribe(render);
        render();
    </script>
</body>
</html>

Manolo Santos

The browser is complaining about the JSX code. You should transpile it to regular Javascript before including it in your page. There are several ways to do: Webpack, Babel...

Have a look to create-react-app npm package to get started fast: https://github.com/facebookincubator/create-react-app

Collected from the Internet

Please contact [email protected] to delete if infringement.