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

Enlaces React-Redux

Ejemplo de Crud en castellano (es traducción de otro artículo):

https://www.ma-no.org/es/programacion/javascript/ejemplo-completo-de-crud-con-redux-y-react

Guía definitiva que incluye muchas cosas y está muy bien explicada:

React Redux Tutorial for Beginners: The Definitive Guide (2020)

Ejemplo de Redux con un enlace diferente entre el store y las props:

Redux example

Una aplicación sencilla con react y redux:

https://dev.to/creativetim_official/how-to-use-redux-in-reactjs-with-real-life-examples-4gog

Diferentes maneras de hacer dispatch de acciones en react-redux:

https://www.pluralsight.com/guides/different-ways-to-dispatch-actions-with-redux

Middlewares en react:

https://www.metaltoad.com/blog/overview-redux-middleware-react-applications

Tutorial completo React+Redux:

https://medium.appbase.io/part1-getting-started-with-react-and-nextjs-4f28a6a0c38e

Tutorial completo redux:

https://developer.okta.com/blog/2019/03/18/beginners-guide-to-redux

Consejos para mejorar rendimiento:

https://itnext.io/3-small-tips-for-better-redux-performance-in-a-react-app-9cde549df6af

Tutorial:

https://www.creative-tim.com/blog/tutorial/reactjs-redux-tutorials/

React-redux + hooks:

https://thoughtbot.com/blog/using-redux-with-react-hooks

Tutorial Redux:

https://www.tutorialspoint.com/redux/index.htm

React tutorial con redux:

https://www.javatpoint.com/react-redux-example

Introducción bien explicada de react+redux:

https://medium.com/javascript-in-plain-english/the-only-introduction-to-redux-and-react-redux-youll-ever-need-8ce5da9e53c6

Redux crud example:

https://www.techandstartup.com/tutorials/react-redux-crud-app

Crear un CRUD en 5 minutos:

Fullstack CRUD:

https://medium.com/swlh/fullstack-crud-application-using-fastify-react-redux-mongodb-part-1-9e8df39c6fff