O que é Reagir?
React é uma biblioteca JavaScript criada pelo Facebook
React é uma biblioteca de interface do usuário (UI)
React é uma ferramenta para construir componentes de UI
Tutorial de início rápido do React
Este é um tutorial de início rápido.
Antes de começar, você deve ter um conhecimento básico de:
Para um tutorial completo:
Iniciar tutorial do React ❯Adicionando React a uma página HTML
Este tutorial de início rápido adicionará o React a uma página como esta:
Exemplo
<!DOCTYPE html>
<html lang="en">
<title>Test React</title>
<!-- Load React API -->
<script src= "https://unpkg.com/react@16/umd/react.production.min.js"></script>
<!-- Load React DOM-->
<script src= "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!-- Load
Babel Compiler -->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<body>
<script type="text/babel">
// JSX Babel code goes here
</script>
</body>
</html>
O que é Babel?
Babel é um compilador JavaScript que pode traduzir linguagens de programação ou marcação em JavaScript.
Com o Babel, você pode usar os recursos mais recentes do JavaScript (ES6 - ECMAScript 2015).
Babel está disponível para diferentes conversões. React usa Babel para converter JSX em JavaScript.
Observe que <script type="text/babel"> é necessário para usar o Babel.
O que é JSX?
JSX significa Java S cript X ML .
JSX é uma extensão do tipo XML/HTML para JavaScript.
Exemplo
const element = <h1>Hello World!</h1>
Como você pode ver acima, JSX não é JavaScript nem HTML.
JSX é uma extensão de sintaxe XML para JavaScript que também vem com todo o poder do ES6 (ECMAScript 2015).
Assim como o HTML, as tags JSX podem ter nomes de tags, atributos e filhos. Se um atributo estiver entre chaves, o valor será uma expressão JavaScript.
Observe que o JSX não usa aspas na string de texto HTML.
Reagir Renderização DOM
O método ReactDom.render() é usado para renderizar (exibir) elementos HTML:
Exemplo
<div id="id01">Hello World!</div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello React!</h1>,
document.getElementById('id01'));
</script>
Expressões JSX
As expressões podem ser usadas em JSX envolvendo-as em chaves {} .
Exemplo
<div id="id01">Hello World!</div>
<script type="text/babel">
const name = 'John Doe';
ReactDOM.render(
<h1>Hello {name}!</h1>,
document.getElementById('id01'));
</script>
Elementos de reação
Aplicativos React geralmente são construídos em torno de um único elemento HTML .
Os desenvolvedores do React geralmente chamam isso de nó raiz (elemento raiz):
<div id="root"></div>
Os elementos React se parecem com isso:
const element = <h1>Hello React!</h1>
Os elementos são renderizados (exibidos) com o método ReactDOM.render():
ReactDOM.render(element, document.getElementById('root'));
Os elementos React são imutáveis . Eles não podem ser alterados.
A única maneira de alterar um elemento React é renderizar um novo elemento toda vez:
Exemplo
function tick() {
const element = (<h1>{new
Date().toLocaleTimeString()}</h1>);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
Componentes de reação
Os componentes do React são funções JavaScript.
Este exemplo cria um componente React chamado "Welcome":
Exemplo
function Welcome() {
return <h1>Hello React!</h1>;
}
ReactDOM.render(<Welcome />, document.getElementById('root'));
O React também pode usar classes ES6 para criar componentes.
Este exemplo cria um componente React chamado Welcome com um método de renderização :
Exemplo
class Welcome extends React.Component {
render() {
return(<h1>Hello React!</h1>); }
}
ReactDOM.render(<Welcome />,
document.getElementById('root'));
Propriedades do componente de reação
Este exemplo cria um componente React chamado "Welcome" com argumentos de propriedade:
Exemplo
function Welcome(props) {
return <h1>Hello
{props.name}!</h1>;
}
ReactDOM.render(<Welcome name="John Doe"/>,
document.getElementById('root'));
O React também pode usar classes ES6 para criar componentes.
Este exemplo também cria um componente React chamado "Welcome" com argumentos de propriedade:
Exemplo
class Welcome extends React.Component {
render() {
return(<h1>Hello {this.props.name}</h1>); }
}
ReactDOM.render(<Welcome
name="John Doe"/>, document.getElementById('root'));
Compilador JSX
Os exemplos nesta página compilam JSX no navegador.
Para código de produção, a compilação deve ser feita separadamente.
Criar aplicativo React
O Facebook criou um aplicativo Create React com tudo o que você precisa para criar um aplicativo React.
É um servidor de desenvolvimento que usa Webpack para compilar React, JSX e ES6, arquivos CSS de prefixo automático.
O Create React App usa ESLint para testar e avisar sobre erros no código.
Para criar um Create React App execute o seguinte código em seu terminal:
Exemplo
npx create-react-app react-tutorial
Certifique-se de ter o Node.js 5.2 ou superior. Caso contrário, você deve instalar o npx:
Exemplo
npm i npx
Inicie uma pasta de onde você deseja que seu aplicativo fique:
Exemplo
C:\Users\myUser>npx create-react-app react-tutorial
Resultado do sucesso:
npx: installed 63
in 10.359s
Creating a new React app in C:\Users\myUser\react-tutorial.
Installing packages. This might take a couple of minutes.
Installing react,
react-dom, and react-scripts...
+ [email protected]
+ [email protected]
+
[email protected]
added 1732 packages from 664 contributors and audited
31900 packages in 355.501s
found 0 vulnerabilities+ [email protected]
Success! Created react-tutorial at C:\Users\myUser\react-tutorial
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can't go back!
We suggest that you begin by typing:
cd react-tutorial
npm start