Skip to content

02 componentes #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
libasoles wants to merge 2 commits into
base: 02-componentes
Choose a base branch
from
Open

02 componentes #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b87cb15
Componente Contador
Aug 27, 2017
3fecea3
Bootstrap
Aug 27, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 10 additions & 3 deletions components/App/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,17 @@
import React from 'react'
import Encabezado from '../Encabezado'
import Contador from '../Contador'

const App = () => (
<section>
<Encabezado titulo="React desde el principio"/>
</section>

<div className="container">

<section>
<Encabezado titulo="React desde el principio" />
<p className="lead">Meetup #<Contador numeroInicial={2} /></p>
</section>

</div>
)

export default App
40 changes: 40 additions & 0 deletions components/Contador/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import React from 'react'
import PropTypes from 'prop-types'

class Contador extends React.Component {

// Valores por default en caso de que no se pasen via props
static defaultProps = {
numeroInicial: 0
}

constructor(props){
super(props)

// Inicialización del estado
this.state = { numero: props.numeroInicial }

// Este bindeo es necesario para hacer que `this` apunte al objecto correcto
this.clickHandler = this.clickHandler.bind(this)
}

clickHandler() {

// Incrementa el contador en el estado. Para que el estado sea autoreferencial se lo envuelve en una funcion
this.setState((prevState,props) => {
return {numero: prevState.numero + 1}
})
}

render() {

// Renderea un boton que muestra el estado del contador
return <button onClick={this.clickHandler}>{this.state.numero}</button>
}
}

Contador.propTypes = {
numeroInicial: PropTypes.number
}

export default Contador
12 changes: 11 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,19 @@
<head>
<meta charset="utf-8">
<title>React desde el principio</title>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app"></div>

<div id="app"></div>

<!-- Compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!-- App js -->
<script src="bundle.js"></script>
</body>
</html>