E aí, programador! o/

A partir dessa aula vamos começar a usar o React pra valer. Vamos criar um projeto com o Vite onde aplicaremos vários conceitos diferentes. Para evitar recriar um novo projeto a cada aula, vamos aproveitar esse projeto nas aulas subsequentes. Mas não se preocupe, o conteúdo de cada aula ficará devidamente separado para manter tudo organizado.

Você não é obrigado a seguir esse modelo, pode criar projetos separados se preferir, mas eu o farei para ganharmos agilidade nas aulas.

Com isso fora do caminho, vamos ao que interessa.

Nessa aula você vai aprender como usar dados dinâmicos dentro do JSX, inserindo expressões JavaScript diretamente dentro da marcação da página.

1. Como explicado, vamos começar criando um novo projeto e chamá-lo de react-fundamentals:

   Obs.: como sempre, selecione as opções: React e JavaScript (framework e variante)

   npm create vite@latest
   

2. Acesse o projeto e instale as dependências. Depois disso, inicie a aplicação:

   cd react-fundamentals
   npm install
   npm run dev
   

3. Como já fizemos antes, vamos nos livrar de todo o conteúdo inicial do Vite. Deixe apenas o componente “App.jsx” com o seguinte conteúdo:

   export default function App() {
     return (
       <div>
         <h1>React is awesome!</h1>
       </div>
     )
   }
   

4. O JSX permite inserir qualquer expressão JavaScript dentro da marcação, em qualquer lugar. Para fazer isso basta usar um par de chaves “{ }”. Por exemplo, podemos exibir de forma dinâmica o valor de uma variável:

   Obs.: repare que se trocarmos o valor da variável e salvar o componente a página passa a mostrar o novo valor.

   export default function App() {
     const tech = "React"
   
     return (
       <div>
         <h1>{tech} is awesome!</h1>
       </div>
     )
   }
   

5. Também podemos inserir expressões diretamente dentro das chaves. A expressão será avaliada e o resultado é exibido:

   export default function App() {
     const tech = "React"
   
     return (
       <div>
         <h1>{tech} is awesome!</h1>
         <h2>It's easy, like 1 + 1 is {1 + 1}</h2>
       </div>
     )
   }
   

6. Ou então inserir chamadas de funções:

   function sum(a, b) {
     return a + b
   }
   
   export default function App() {
     const tech = "JavaScript"
   
     return (
       <div>
         <h1>{tech} is awesome!</h1>
         <h2>It's easy, like 1 + 1 is {sum(1, 1)}</h2>
       </div>
     )
   }
   

7. No entanto, existe uma regra muito importante aqui. Só podemos usar expressões dentro do JSX, ou seja, código que pode ser avaliado para resultar em um valor (como os valores que atribuímos a uma variável por exemplo. Sendo assim, coisas como blocos if else, while, for, etc, não podem ser usados dentro do JSX. Podemos, por exemplo, substituir o if else por um operador ternário:

   function sum(a, b) {
     return a + b
   }
   
   export default function App() {
     const tech = "JavaScript"
     const status = true
   
     return (
       <div>
         <h1>{tech} is awesome!</h1>
         <h2>It's easy, like 1 + 1 is {sum(1, 1)}</h2>
         <h2>Current status: {status ? "ON" : "OFF"}</h2>
       </div>
     )
   }