react

Libros gratis de React

Libros gratis de React.js

JSON avanzado y Componentes React

https://dev.to/siddharthshyniben/5-secret-features-of-json-you-didnt-know-about-5bbg

https://www.syncfusion.com/blogs/post/top-10-react-component-libraries-every-developer-should-know.aspx

React con eventos

import React, { Component } from 'react'

class Counter extends React.Component {
  constructor(){
    super()
    this.state = {
      value: 0
    };
  }
  
  incrementar = () => {
    this.setState({value:this.state.value+1})
  };
  decrementar = () => {
    this.setState({value:this.state.value-1})
  };
  render() {
    return (
      <div>
        <h2>{this.state.value}</h2>
        <button onClick={this.decrementar}>Decrementar</button>
        <button onClick={this.incrementar}>Incrementar</button>
      </div>
    );
  }
}

export default function App() {
  return <Counter />;
}

Ejemplo React estático


import './App.css'
import React from 'react'

class Alumno extends React.Component {
  render () {
    return <h2>Me llamo Ralph</h2>
  }
}

function Cabecera () {
  return (
    <header>
      <h1>Hola ¿Qué tal estamos?</h1>
      <p>Yo bien.</p>
    </header>
  )
}
function Barra () {
  return (
    <aside>
      <ul>
        <li>Opción 1</li>
        <li>Opción 2</li>
        <li>Opción 3</li>
        <li>Opción 4</li>
      </ul>
    </aside>
  )
}
function Footer () {
  return (
    <footer>Pie de pagina</footer>
  )
}
function App () {
  return (
    <div className='App'>
      <Cabecera />
      <Alumno />
      <Barra />
      <Footer />
    </div>
  )
}

export default App

Ejemplos Componentes React

import React from "react";

class Alumno extends React.Component {
  render() {
    return <h2>Me llamo Ralph</h2>;
  }
}

export default function App() {
  return <Alumno />;
}