Juan Salvador (14) [Avatar] Offline
#1
Whe I replaced the next code

class Logo extends Component {

    render() {
        return <img onClick={this.props.handleClick}
                    width="40"
                    src="/images/logo.png"
                    role="presentation"
                    href="#"/>
    }
}


with
const Logo = (props)=>{
    return <img onClick={props.handleClick} 
                        width="40"
                        src="logo.png"
                        href="#"/>
}


a blank screen is shown, the only message in the console says "witing for roots to load ...". Please note, that a prop needs to added to the img: role="presentation".

Any help is welcome !

Cheers
Muzietto (19) [Avatar] Offline
#2
If I understand correctly your words, you are not able to compile ES6 arrow functions with webpack+babel.

Well, actually I have found problems with arrow functions notation also in chapter 3, pages 58/59: the example of the IIFE is crap, and the code that goes with the book avoids carefully to implement that example.

AFAIK, in order to have arrow functions inside JSX components, it is necessary to equip Babel for the task.

I am able to compile arrow functions (except the one in ch3 that I mentioned before!) using the settings suggested in:

http://stackoverflow.com/questions/42046496/cant-get-arrow-functions-to-work-react-babel-webpack-es6

Good luck!
Azat Mardan (41) [Avatar] Offline
#3
Most modern browsers should process => just fine without Babel. Make sure you get the recent MEAP and the recent code from https://github.com/azat-co/react-quickly