Introdução React.

js
O que é um framework?

Framework é um termo inglês que, em sua tradução direta, significa estrutura. De maneira geral, essa
estrutura é feita para resolver um problema específico.

Na programação, um framework é um conjunto de códigos genéricos capaz de unir trechos de um

projeto de desenvolvimento.

Ele funciona como uma peça de quebra cabeça capaz de se encaixar nos mais diversos lugares e conectar
todos as linhas de código de uma maneira quase perfeita.

Por mais que seu funcionamento e aplicação pareçam simples, o dev precisa entender bem o tipo de
framework que ele está usando ou usará em seu projeto.

Se a escolha for errada, o resultado pode ser contrário ao esperado e gerar um série de problemas que
vão desde a construção de um código sujo até o mal funcionamento do projeto final.

Um erro comum que alguns programadores em início de carreira é pensar que os frameworks funcionam
da mesma maneira que um banco de dados. No entanto existem diferenças bem consideráveis entre
esses dois elementos.

Um banco de dados é pensado e criado para armazenar informações e registros de pessoas, lugares ou
coisas. Geralmente esses registros se relacionam entre si.

O framework, por usa vez, não possui a capacidade de armazenar nada, ele apenas provê uma
funcionalidade que se adequa a diferentes tipos de aplicações.
Como funciona um framework?

Existem várias bibliotecas de códigos prontos espalhados por todo mundo, qualquer pessoa pode
construir e disponibilizar um framework interessante.

Devido essa facilidade no compartilhamento, esse conjunto de códigos funcionam de maneira ampla
entre as linhas de programação para garantir seu bom funcionamento.

Muitos deles utilizam os princípios de orientação do objeto com herança, poliformismo e abstração.

Para ficar um pouco mais claro, vamos imaginar a construção de um automóvel. Nele contém milhares
de peças que trabalham muito bem juntas, porém, o carro não nasceu dessa forma.

Ele é construído por meio da união de diversas partes que foram feitas pelos fornecedores da montadora.
Por exemplo, o motor pode ter sido feito na Itália, enquanto a embreagem foi desenvolvida na Alemanha
e a montagem acontece no Brasil.

Nesse exemplo, você seria o montador e as peças mencionadas (motor, embreagem) seriam os
frameworks.

Uma grande vantagem desses templates, é que eles são open source, ou seja, você pode fazer pequenas
mudanças no seu formato original para que ele se adeque ao que é necessário.

As funções originais de cada framework é conhecido como frozen spots ou hook points. Já os trechos que
foram alterados pelo desenvolvedor é conhecido como hot spots.

· Comece em segundos:

Esteja você usando o React ou outra biblioteca, o Create React App permite que você se concentre no
código, não nas ferramentas de construção.
Para criar um projeto chamado my-app, execute este comando:

npx create-react-app my-app

A estrutura básica de pastas para um projeto típico do React

pode ser a seguinte:
· meu-projeto/

· node_modules/

· public/

· index.html

· src/

· index.js

· App.js

· App.css

· package.json

· package-lock.json

A pasta node_modulesé criada pelo npm e armazena todas as dependências do projeto.

· A pasta publicé onde você coloca os arquivos estáticos do seu projeto, como o arquivo HTML
principal e qualquer imagem ou arquivo CSS. O arquivo index.htmlé o arquivo HTML principal do
seu aplicativo React.

· A pasta srcé onde você coloca todo o código JavaScript do seu aplicativo React. O arquivo
index.jsé o arquivo JavaScript principal que inicia seu aplicativo React. O arquivo App.jsé onde
você escreve o componente React principal do seu aplicativo. O arquivo App.cssé onde você
escreve o estilo para o componente App.js.
 · O arquivo package.jsoné onde você configura e gerencia as dependências do seu projeto. O
arquivo package-lock.jsoné um arquivo de bloqueio que garante que as versões das
dependências sejam as mesmas em todas as máquinas em que o projeto é executado.

A estrutura de uma página em React.js pode variar dependendo da complexidade e do objetivo da

página, mas em geral ela segue um padrão básico que consiste em:

· Importação de módulos: Na parte superior do arquivo, são importados os módulos necessários

para a construção da página, como React, ReactDOM, componentes personalizados, entre
outros.

· Declaração do componente: Em seguida, é declarado o componente principal da página. Este

pode ser uma classe que herda da classe Component do React ou uma função que retorna JSX.

· Renderização do componente: Dentro do componente, é definido o método render, que é

responsável por retornar o conteúdo que será exibido na página. Esse conteúdo pode ser HTML
tradicional ou JSX, que é uma extensão do JavaScript que permite escrever tags HTML dentro do
código JavaScript.

· Definição de props: Para passar informações entre componentes, é possível definir props
(abreviação de propriedades) no componente pai e acessá-las no componente filho.

· Manipulação de eventos: Para lidar com eventos, como cliques de botão, por exemplo, é possível
definir métodos que serão chamados quando esses eventos ocorrerem.

· Gerenciamento de estado: O React permite o gerenciamento de estado dos componentes

através do método setState, que atualiza o estado do componente e dispara uma nova
renderização.
 · Exportação do componente: Por fim, o componente é exportado para ser usado em outras
partes do código ou em outras páginas.

· É importante lembrar que esses passos são apenas uma visão geral da estrutura de uma página
em React.js e que uma implementação real pode variar.

--------------------------------------------------------------------------------------------------------------------

npm start [-- <args>]

Descrição

Isso executa um comando predefinido especificado na propriedade "start" do objeto "scripts" de um

pacote.

Se o objeto "scripts" não definir uma propriedade "start", o npm executará o node server.js.

Observe que isso é diferente do comportamento do nó padrão de executar o arquivo especificado no

atributo "main" de um pacote ao evocar com node .

A partir de npm@2.0.0, você pode usar argumentos personalizados ao executar scripts. Consulte npm
run-script para obter mais detalhes.