React com HTML e CDN¶

Apresentar os conceitos básicos do React e como integrá-lo em uma página HTML utilizando um link para a CDN, sem a necessidade de um ambiente de desenvolvimento local como o Node.js.

1. Introdução ao React¶

Definição: React é uma biblioteca JavaScript criada pelo Facebook para criar interfaces de usuário de forma declarativa e eficiente.

Vantagens:

Componentes reutilizáveis**
Atualizações rápidas do DOM (Virtual DOM)
Facilita a criação de Single Page Applications (SPAs)

2. Preparando o Ambiente¶

Não é necessário instalar nada localmente para este exemplo inicial, vamos usar uma página HTML e um link para a biblioteca via CDN.

3. Estrutura Básica do Projeto¶

HTML Básico

Comece com a criação de uma página HTML simples contendo um elemento <div> que será usado como “ponto de montagem” para o React.

   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>React Introdução</title>
   </head>
   <body>
     <!-- Div onde o React renderizará o conteúdo -->
     <div id="root"></div>

     <!-- Scripts do React via CDN -->
     <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
     <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
     <!-- Nosso script JavaScript -->
     <script src="app.js"></script>
   </body>
   </html>

4. Criando um Elemento React¶

Crie o arquivo app.js com o seguinte código:

   ReactDOM.render(
    React.createElement(
        'h1',
        null,
        'Hello, World!'
    ),
    document.getElementById('root'))