Tutorial GoT React-Web

1-Inicio.js

//const render = ReactDOM.render;
//const Component = React.Component
const {render} = ReactDOM;
const {Component} = React;


render(
<h1>Hola Mundo</h1>,
document.getElementById('app')
);

10-PullChildren.js

const {render} = ReactDOM;
const {Component} = React;

class App extends Component {
 constructor(props) {
   super(props)
   this.state = {
  Parent: [
      {name: "Gróin",
          child: [
          {name: "Óin", child:[] } ,
          {name: "Glóin", child: [{name: "Gimli", child: [] }]},
                 ]
          }
        ]
}
 }
render () {
  const PullChildren = (Arr) => {
    return Arr.map( (C) => <Child name={C.name} key={C.name}/>)
  }
  return (
    <div>
      {this.state.Parent.map( (P) =>
        <Parent name={P.name} key={P.name}>
          {PullChildren(P.child)}
        </Parent>
      )}
    </div>
  )
}
}

const Parent = (props) =>
<div>
  <h3>{props.name}</h3>
  <ul>
    {props.children}
  </ul>
</div>

const Child = (props) => <li>{props.name}</li>

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

11-RecursiveRender.js

const {render} = ReactDOM;
const {Component} = React;

class App extends Component {
 constructor(props) {
   super(props)
     this.state = {
    Parent: [
        {name: "Gróin",
            child: [
            {name: "Óin", child:[] } ,
            {name: "Glóin", child: [{name: "Gimli", child: [] }]},
                   ]
            }
          ]
        }
 }
render () {
  const PullChildren = (Arr) => {
      return Arr.map( (C) => {
        if (C.child.length > 0) {
          return (<Parent name={C.name} key={C.name}>{PullChildren(C.child)}</Parent>)
        } else {
          return (<Child name={C.name} key={C.name}/>)
        }
      }
    )
  }

  const ParentRender = () => {
    return this.state.Parent.map( (P) => {
      <Parent name={P.name} key={P.name}/>
    })
  }
  return (
    <div>
      {this.state.Parent.map( (P) => <Parent name={P.name} key={P.name}>{PullChildren(P.child)}</Parent>
      )}
    </div>
  )
}
}

const Parent = (props) =>
<div>
  <h3>{props.name}</h3>
  <ul>
    {props.children}
  </ul>
</div>

const Child = (props) => <li>{props.name}</li>

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

12-RecursiveRenderPerfect.js

const {render} = ReactDOM;
const {Component} = React;

class App extends Component {
 constructor(props) {
   super(props)
     this.state = {
    Parent: [
        {name: "Gróin",
            child: [
            {name: "Óin", child:[] } ,
            {name: "Glóin", child: [{name: "Gimli", child: [] }]},
                   ]
            }
          ]
        }
      }
render () {
  const PullChildren = (Arr) => {
      return Arr.map( (C) => {
        if (C.child.length > 0) {
          return (<Parent name={C.name} isChild={true} key={C.name}>{PullChildren(C.child)}</Parent>)
        } else {
          return (<Child name={C.name} key={C.name}/>)
        }
      }
    )
  }

  return (
    <div>
      {this.state.Parent.map( (P) => <Parent name={P.name} key={P.name}>{PullChildren(P.child)}</Parent>
      )}
    </div>
  )
}
}

const Parent = (props) => {
  if (props.isChild) {
    return (
      <li>{props.name}
        <ul>
          {props.children}
        </ul>
      </li>
    )
  }
return (<div>
  <h3>{props.name}</h3>
  <ul>
    {props.children}
  </ul>
</div> )
}

const Child = (props) => <li>{props.name}</li>

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

2-Component.js

const {render} = ReactDOM;
const {Component} = React;

 class App extends Component {
  render () {
    return (
      <h1>Hola Mundo</h1>
    )
  }
}
render(
<App/>,
document.getElementById('app')
);

3-Props.js

const {render} = ReactDOM;
const {Component} = React;

 class App extends Component {
  render () {
    return (
      <Parent mensaje="Hola soy Parent"/>
    )
  }
}

const Parent = (props) => <h1>{props.mensaje}</h1>

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

4-PropsState.js

const {render} = ReactDOM;
const {Component} = React;

class App extends Component {
 constructor(props) {
   super(props)
   this.state = { nombre: "Tonatiuh"}
 }
render () {
  return (
    <Parent mensaje={`Hola Mundo soy Parent y mi state es ${this.state.nombre}`}/>
  )
}
}

const Parent = (props) => <h1>{props.mensaje}</h1>

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

5-TwoComponents.js

const {render} = ReactDOM;
const {Component} = React;

class App extends Component {
 constructor(props) {
   super(props)
   this.state = { nombre: "Tonatiuh"}
 }
render () {
  return (
    <div>
    <Parent mensaje={`Hola Mundo soy Parent y mi state es ${this.state.nombre}`}/>
    <Child mensaje="Soy Child"/>
    </div>
  )
}
}

const Parent = (props) => <h1>{props.mensaje}</h1>
const Child = (props) => <h2>{props.mensaje}</h2>

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

6-PropsChildren.js

const {render} = ReactDOM;
const {Component} = React;

class App extends Component {
 constructor(props) {
   super(props)
   this.state = { nombre: "Tonatiuh"}
 }
render () {
  return (
    <div>
    <Parent name="Eddard Stark">
    <Child name="Rob Stark"/>
    </Parent>
    </div>
  )
}
}

const Parent = (props) =>
<div>
  <h3>{props.name}</h3>
  <ul>
    {props.children}
  </ul>
</div>

const Child = (props) => <li>{props.name}</li>

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

7-AppState.js

const {render} = ReactDOM;
const {Component} = React;

class App extends Component {
 constructor(props) {
   super(props)
   this.state = {
  Parent: [
      {name: "Robert Baratheon",
          child: [
          {name: "Joffrey Baratheon", child:[]} ,
          {name: "Myrcella Baratheon", child: []},
          {name: "Tommen Baratheon", child: [] }
                 ]
          }
        ]
}
 }
render () {
  const Robert = this.state.Parent[0]
  return (
    <div>
    <Parent name={Robert.name}>
    <Child name={Robert.child[0].name}/>
    </Parent>
    </div>
  )
}
}

const Parent = (props) =>
<div>
  <h3>{props.name}</h3>
  <ul>
    {props.children}
  </ul>
</div>

const Child = (props) => <li>{props.name}</li>

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

8-MapChild.js

const {render} = ReactDOM;
const {Component} = React;

class App extends Component {
 constructor(props) {
   super(props)
   this.state = {
  Parent: [
      {name: "Robert Baratheon",
          child: [
          {name: "Joffrey Baratheon", child:[]} ,
          {name: "Myrcella Baratheon", child: []},
          {name: "Tommen Baratheon", child: [] }
                 ]
          }
        ]
}
 }
render () {
  const Robert = this.state.Parent[0]
  return (
    <div>
    <Parent name={Robert.name}>
      {Robert.child.map(RobertChild => <Child name={RobertChild.name} key={RobertChild.name}/>)}
    </Parent>
    </div>
  )
}
}

const Parent = (props) =>
<div>
  <h3>{props.name}</h3>
  <ul>
    {props.children}
  </ul>
</div>

const Child = (props) => <li>{props.name}</li>

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

9-ProperStateMapping.js

const {render} = ReactDOM;
const {Component} = React;

class App extends Component {
 constructor(props) {
   super(props)
   this.state = {
  Parent: [
      {name: "Robert Baratheon",
          child: [
          {name: "Joffrey Baratheon", child:[]} ,
          {name: "Myrcella Baratheon", child: []},
          {name: "Tommen Baratheon", child: [] }
                 ]
          }
        ]
}
 }
render () {
  return (
    <div>
      {this.state.Parent.map( (P) =>
        <Parent name={P.name} key={P.name}>
          {P.child.map( (C) => <Child name={C.name} key={C.name}/>)}
        </Parent>
      )}
    </div>
  )
}
}

const Parent = (props) =>
<div>
  <h3>{props.name}</h3>
  <ul>
    {props.children}
  </ul>
</div>

const Child = (props) => <li>{props.name}</li>

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

AppStateStructure.js

/*
this.state = {
  Parent: [
      {name: "Robert Baratheon",
          child: [
          {name: "Joffrey Baratheon", child:[]} ,
          {name: "Myrcella Baratheon", child: []},
          {name: "Tommen Baratheon", child: [] }
                 ]
          }
        ]
}
*/