Inicio del proyecto

index.css, App.css: vacíos

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

import React from 'react';

import './App.css';

// function Helloworld(props){
// return (
// <div id="hello">
// <h3>{props.subtitle}</h3>
// {props.mytext}
// </div>
// )
// }

class Helloworld extends React.Component{

state={
show: true
}

toggleShow = () => {
this.setState({show: !this.state.show})
}

render(){
if(this.state.show){
return (
<div id="hello">
<h3>{this.props.subtitle}</h3>
{this.props.mytext}
<button onClick={this.toggleShow}>Toggle Show</button>
</div>
)
}else{
return <h1>There are not elements
<button onClick={this.toggleShow}>Toggle Show</button>
</h1>
}
}
}

// const App = () => <div>This is my component: <Helloworld/> </div>

// class App extends React.Component{
// render(){
// return <div>This is my component <Helloworld/> </div>
// }
// }
//identicos a function App(){}

function App() {
return (
<div>This is my component:
<Helloworld mytext="Hello Fazt" subtitle="lorem ipsum"/>
<Helloworld mytext="hola mundo" subtitle="dsdf"/>
<Helloworld mytext="Hello!" subtitle="component 3"/>
</div>
);
}

export default App;

#hello{
border: 1px solid #000;
}

New Project: