67 lines
2.4 KiB
Markdown
67 lines
2.4 KiB
Markdown
---
|
|
title: Hello World
|
|
localeTitle: Olá Mundo
|
|
---
|
|
## Olá Mundo !!
|
|
|
|
Cada aprendizagem de línguas começa com o exemplo do Hello World Tradicional. Aqui, você é apresentado ao React com o mesmo programa HelloWorld.
|
|
|
|
Tudo no React é um componente.
|
|
|
|
Mas antes disso, precisamos ter o node.js e o npm instalados no computador. Opcionalmente, podemos usar o CRA (Create React App), que é uma ferramenta criada por desenvolvedores do Facebook para ajudá-lo a criar aplicativos React. Isso evita configurações e configurações demoradas. Basta executar um comando e criar o aplicativo reagir configura as ferramentas necessárias para iniciar seu projeto React.
|
|
|
|
Podemos instalá-lo através dos seguintes comandos
|
|
```
|
|
npm install -g create-react-app
|
|
|
|
create-react-app my-app
|
|
|
|
cd my-app
|
|
npm start
|
|
```
|
|
|
|
A linha de comando deve fornecer uma saída onde você pode encontrar o aplicativo no navegador. O padrão deve ser localhost: 8080. Se você estiver usando apenas o IE ou o Edge em sua máquina Windows, recomendo que você instale o Chrome também para acessar o ambiente de desenvolvedor e as Ferramentas do desenvolvedor do React, que estão disponíveis como extensão do Chrome.
|
|
|
|
|
|
|
|
#### src / App.js
|
|
|
|
copie o código abaixo e cole-o em src / App.js
|
|
|
|
```javascript
|
|
import React from 'react';
|
|
|
|
class App extends React.Component{
|
|
constructor(props) {
|
|
super(props);
|
|
}
|
|
|
|
render(){
|
|
return(
|
|
<div>
|
|
<p>Hello World !!</p>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default App;
|
|
```
|
|
|
|
Se verificarmos o arquivo index.js na pasta src, descobrimos que o App.js acima é chamado em index.js e, em seguida, renderizado.
|
|
|
|
```javascript
|
|
// Other code
|
|
import App from './App'; // The App component is imported
|
|
|
|
// Other code
|
|
ReactDOM.render(<App />,
|
|
document.getElementById('root')); //The <App /> is the way components are called in react after importing them
|
|
|
|
// Other code
|
|
```
|
|
|
|
Acima, App.js é chamado de componente. Normalmente, fazemos vários componentes e os reunimos em App.js, que serão então renderizados em index.js, que é então renderizado no div raiz que está no index.html.
|
|
|
|
Parabéns !! Você criou seu primeiro aplicativo React Hello world. Você aprende mais sobre o Reagir nos próximos artigos.
|
|
|
|
Codificação Feliz !! |