React é uma biblioteca javaScript para criar interfaces de usuário. Foi criado em 2011 por jordan Walke no Facebook baseado no XHP, um framework para criação de HTML no PHP.
React é uma linguagem declarativa, ou seja, está preocupado apenas com o que é exibido na interface do usuário. É baseada em componentes e pode ser utilizado em qualquer lugar (web, mobile, tv ...)
Sabendo que o navegador só entende html, css e js como o react funciona no front???
Questão de prova hein dev hahaha
De uma forma curta, o react usa o bundle para transformar( compilar ) todos os arquivos em HTML, CSS E JS puro. Com isso carrega a aplicação toda de uma vez na página web.
Aprofundando um pouco...
O react é uma maneira mais fácil de escrever front-end, a principio para quem ta começando pode até não parecer, eu já achei isso, mas é. Ele usa a sintaxe JSX que resumidamente é usar os poderes do js dentro do html.
(saiba mais sobre o jsx)
📂 node_modules: É aqui que fica todos os módulos do projeto, cada biblioteca que for instalada, fica aqui.
📂public: Aqui vamos focar só no index, os outros arquivos e img são da aplicação padrao do react.
📂 src: Nossa pasta queridinha, contextualizando apenas os 3 arquivos principais
🟡 index.js
🟡 App.js
🔵index.css
🐈⬛ .gitignore:
📦 package.json:
🔵 README.md:
🔵 yarn.lock:
Estrutura inicial de um create-react-app
A arquitetura do react, eu consegui entender da seguinte forma: Bem basicamente, ele compila tudo que a gente escreveu com JSX e renderiza em uma única pagina HTML, na div "root".
Com a div "root " definida, renderizamos ela lá no index.js através do ReactDOM.render(). Dentro do ReactDOM.render() colocamos o conteúdo que vai ser renderizado e onde ele vai ser renderizado. No caso a seguir, o conteúdo é o h1 e vai ser renderizado no document.getElementById('root').
exemplo: Lá no index.js
Resultado:
Sabendo disso, como eu falei que o react é baseado em componentes, criamos um arquivo com um componente que vai retornar todos os outros componentes para serem renderizado no ReactDOM.render() da seguinte forma: