Mudanças entre as edições de "Exemplo de componente React"
De Basef
(Criou página com ' <source lang="javascript"> import React, { Component } from 'react'; import './css/pure-min.css'; import './css/side-menu.css'; class App extends Component { render() {...') |
|||
Linha 1: | Linha 1: | ||
+ | Componente React com Babel, JSX e webpack: | ||
<source lang="javascript"> | <source lang="javascript"> |
Edição atual tal como às 21h56min de 28 de novembro de 2017
Componente React com Babel, JSX e webpack:
import React, { Component } from 'react'; import './css/pure-min.css'; import './css/side-menu.css'; class App extends Component { render() { return ( <div id="layout"> <a href="#menu" id="menuLink" className="menu-link"> <span></span> </a> <div id="menu"> <div className="pure-menu"> <a className="pure-menu-heading" href="#">Company</a> <ul className="pure-menu-list"> <li className="pure-menu-item"><a href="#" className="pure-menu-link">Home</a></li> <li className="pure-menu-item"><a href="#" className="pure-menu-link">Autor</a></li> <li className="pure-menu-item"><a href="#" className="pure-menu-link">Livro</a></li> </ul> </div> </div> <div id="main"> <div className="header"> <h1>Cadastro de Autores</h1> </div> <div className="content" id="content"> <div className="pure-form pure-form-aligned"> <form className="pure-form pure-form-aligned"> <div className="pure-control-group"> <label htmlFor="nome">Nome</label> <input id="nome" type="text" name="nome" value="" /> </div> <div className="pure-control-group"> <label htmlFor="email">Email</label> <input id="email" type="email" name="email" value="" /> </div> <div className="pure-control-group"> <label htmlFor="senha">Senha</label> <input id="senha" type="password" name="senha" /> </div> <div className="pure-control-group"> <label></label> <button type="submit" className="pure-button pure-button-primary">Gravar</button> </div> </form> </div> <div> <table className="pure-table"> <thead> <tr> <th>Nome</th> <th>email</th> </tr> </thead> <tbody> <tr> <td>Alberto</td> <td>alberto.souza@caelum.com.br</td> </tr> </tbody> </table> </div> </div> </div> </div> ); } } export default App;