[React] Hooks

Hooks en React

Para crear una aplicación con react use el comando npx create-react-app my-app

Si usa VS Code, instalar la extensión Simple React Snippets (by Burke Holland)

Componente como una función

Borre todo el contenido de la carpeta src.

Cree un archivo src/app.js con el siguiente contenido:

import React, { useState } from "react";

function App() {
  let [author, setAuthor] = useState("John Doe");
  let [content, setContent] = useState("React is a JS library for UI");
  let [likes, setLikes] = useState(25);

  return (
    <div>
      <h1>Post</h1>
      <h2>Author: {author}</h2>
      <h2>Content: {content}</h2>
      <h2>Likes: {likes}</h2>
    </div>
  );
}

export default App;

Cree un archivo src/index.js con el siguiente contenido:

import React from "react";
import ReactDOM from "react-dom";

import App from "./app";

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

Renderizado condicional

import React, { useState } from "react";

function App() {
  let [author, setAuthor] = useState("John Doe");
  let [content, setContent] = useState("React is a JS library for UI");
  let [likes, setLikes] = useState(25);

  let renderLikes = () => (likes === 0 ? "Give us a like" : likes);

  return (
    <div>
      <h1>Post</h1>
      <h2>Author: {author}</h2>
      <h2>Content: {content}</h2>
      <h2>Likes: {renderLikes()}</h2>
    </div>
  );
}

export default App;

Handle events

import React, { useState } from "react";

function App() {
  let [author, setAuthor] = useState("John Doe");
  let [content, setContent] = useState("React is a JS library for UI");
  let [likes, setLikes] = useState(0);
  let [tags, setTags] = useState(["tag1", "tag2", "tag3"]);

  let handleClick = () => {
    setLikes((likes = likes + 1));
  };

  let renderLikes = () => (likes === 0 ? "Give us a like" : likes);

  return (
    <div>
      <h1>Post</h1>
      <h2>Author: {author}</h2>
      <h2>Content: {content}</h2>
      <h2>Likes: {renderLikes()}</h2>
      <ul>
        {tags.map((item) => (
          <li>{item}</li>
        ))}
      </ul>
      <button onClick={handleClick}>Like</button>
    </div>
  );
}

export default App;