Mudanças entre as edições de "React.js Render HTML"
De Aulas
(Criou página com 'Afluentes: Desenvolvimento Front-end, Usabilidade, desenvolvimento web, mobile e jogos = React Render HTML = O objetivo do React é renderizar uma página HTML. Para...') |
|||
| Linha 1: | Linha 1: | ||
| − | Afluentes: [[Desenvolvimento Front-end]], [[Usabilidade, desenvolvimento web, mobile e jogos]] | + | Afluentes: [[Desenvolvimento Front-end II]], [[Usabilidade, desenvolvimento web, mobile e jogos]] |
= React Render HTML = | = React Render HTML = | ||
Edição das 13h50min de 27 de fevereiro de 2024
Afluentes: Desenvolvimento Front-end II, Usabilidade, desenvolvimento web, mobile e jogos
React Render HTML
O objetivo do React é renderizar uma página HTML. Para isso, usamos uma função chamada ReactDOM.render().
Essa função é composta de dois argumentos:
- Código HTML;
- elemento onde a código HTML será renderizado;
Por exemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React App</title>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(<p>Hello</p>, document.getElementById('root'));
</script>
</body>
</html>
É possível usar código HTML dentro do javascript também e pegar esse elemento para renderizar.
const myelement = (
<table>
<tr>
<th>Name</th>
</tr>
<tr>
<td>John</td>
</tr>
<tr>
<td>Elsa</td>
</tr>
</table>
);
ReactDOM.render(myelement, document.getElementById('root'));
