Olá, Alberto,
Na realidade não é um problema pois o código está funcionando perfeitamente. Acho até que o título que coloquei está errado, pois o "className" também funciona.
A estranheza é que também está funcionando com "class" ao invés de "className".
Tem alguns warnings, sim, mas aparentemente não tem nada a ver com o "className". Aí vai:
Compiled with warnings.
./src/App.js
Line 18: Links must not point to "#". Use a more descriptive href or use a button instead jsx-a11y/href-no-hash
Line 21: Links must not point to "#". Use a more descriptive href or use a button instead jsx-a11y/href-no-hash
Line 22: Links must not point to "#". Use a more descriptive href or use a button instead jsx-a11y/href-no-hash
Line 23: Links must not point to "#". Use a more descriptive href or use a button instead jsx-a11y/href-no-hash
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
Andei mexendo (só mudei algumas variáveis pra ver como funcionam) no código original do vídeo mas basicamente é o mesmo da vídeo-aula.
Meu código é o seguinte:
import React, { Component } from 'react';
//import logo from './logo.svg';
import './css/pure-min.css';
import './css/side-menu.css';
class Aplic extends Component {
render() {
return (
<div id="layout">
<a href="#menu" id="menuLink" class="menu-link">
<span></span>
</a>
<div id="menu">
<div class="pure-menu">
<a class="pure-menu-heading" href="#">Company</a>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Autor</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Livro</a></li>
</ul>
</div>
</div>
<div id="main">
<div class="header">
<h1>Principal</h1>
</div>
</div>
</div>
);
}
}
export default Aplic;
