Функция толстой стрелки React Uncaught ReferenceError

Question

Я новичок в программировании и проходил курсы по udemy для изучения JS, html и css, потому что я прочитал их, прежде чем перейти к React.Я столкнулся с проблемой, которую не могу объяснить.Следующий код выполняется правильно и без ошибок:

function FriendLy(props){
        return(
            <div className = "friendLy">
                <Avatar pic = {props.pic}/>
                <Username name = {props.name}/>
                <GetConnected/>
            </div>
        );
    }    

однако следующий код возвращает «Uncaught ReferenceError»

FriendLy = (props) => {
        return(
            <div className = "friendLy">
                <Avatar pic = {props.pic}/>
                <Username name = {props.name}/>
                <GetConnected/>
            </div>
        );
    }     

В моих ограниченных знаниях ES6 и JS эти два выражениядолжен дать тот же результат.Я использую babel, который, как я понимаю, переводит ES5 в ES6.

Пожалуйста, расскажите мне о том, что я неправильно понимаю в любом из вышеперечисленных утверждений.

Заранее спасибо

Answer 1

Вам нужно добавить const, let или var перед определением переменной, если вы работаете в строгом режиме .

const FriendLy = (props) => {
   return (
     // ...
   )
}

Answer 2

Вы хотите сделать это функцией, назначенной переменной, поэтому вам нужно поставить const, var или let перед FriendLy:

var FriendLy = (props) => {...}