Construindo um website em React

patch/af.diff:

diff --git a/src/App.js b/src/App.js
index f2d4206..45f36fa 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,10 @@
-import React from 'react';
-import './App.css';
+import React from 'react'
+import './App.css'
+import Menu from './Menu'

-const App = _ => <>Hello Finisher.Tech!</>
+const App = _ =>
+  <>
+    <Menu/>
+  </>

-export default App;
+export default App

3$ git-apply af.diff src/App.js

Mania: evitar "ponto e vírgula", sempre que possível

Alguns anos atrás, depois de codificar algum tempo em CoffeeScript, passei a não gostar, ainda mais, de usar "ponto e vírgula" em códigos. Eu já tinha essa mania desde que comecei a escrever scripts em Bash ("a, long, long time ago" 😌) Então, você verá que os meus códigos, sempre que possível, evitam o uso do "ponto e vírgula".

Após salvar esse código, e ver o reload do React para a aplicação, podemos notar o seguinte aviso:

Compiled with warnings.

./src/Menu.js
  Line 11:6:  Emojis should be wrapped in <span>, have role="img", and have an accessible description with aria-label or aria-labelledby  jsx-a11y/accessible-emoji

Mania: não ignorar avisos para decidir a hora certa de agir

Eu não gosto de ignorar avisos, mesmo os que não me ajudam ou prejudicam em nada, inicialmente. Como base num aviso eu tomo a decisão de agir mais cedo, ou mais tarde.

Com base nesse aviso eu resolvi criar outro componente (a partir do post How to use emojis in React):

Vamos incluí-lo ao projeto:

initial/src/Emoji.js:

import React from 'react'

const Emoji = props =>
  <span
    className="emoji"
    role="img"
    aria-label={props.label ? props.label : ""}
    aria-hidden={props.label ? "false" : "true"}
  >
    {props.symbol}
  </span>

export default Emoji

3$ tut-add src/Emoji.js

E alterar o código do Menu, de acordo com o diff a seguir:

patch/ag.diff:

diff --git a/src/Menu.js b/src/Menu.js
index 27e7661..fc0c062 100644
--- a/src/Menu.js
+++ b/src/Menu.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import { Navbar, Nav, NavDropdown } from 'react-bootstrap'
+import Emoji from './Emoji'

 const Menu = _ =>
   <Navbar bg="dark" variant="dark" expand="md">
@@ -8,7 +9,7 @@ const Menu = _ =>
     <Navbar.Collapse id="basic-navbar-nav">
       <Nav className="mr-auto">
         <NavDropdown title="Eventos" id="basic-nav-dropdown">
-          <NavDropdown.Item href="#evento-20192611">Corridas de rua premiadas com criptomoedas? Uau! 😃</NavDropdown.Item>
+          <NavDropdown.Item href="#evento-20192611">Corridas de rua premiadas com criptomoedas? Uau! <Emoji symbol="😃"/></NavDropdown.Item>
           <NavDropdown.Item href="#evento-20191010">Inteligência Artificial e Blockchain aplicadas a Bem Estar, Saúde e Esportes</NavDropdown.Item>
         </NavDropdown>
         <Nav.Link href="#sobre">Sobre</Nav.Link>

3$ git-apply ag.diff src/Menu.js

Construindo um website em React

22. Adicionando o Menu em App.js