No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de React.js

Curso de React.js

Juan David Castro Gallego

Juan David Castro Gallego

Componentes de TODO Machine

3/34
Recursos

Aportes 102

Preguntas 12

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Con la extensi贸n ES7+ React/Redux/React-Native snippets para VS Code podr谩n crear componentes desde 0 muy r谩pidamente escribiendo comandos como rfce

Excelente que se muestre al principio lo que vamos a hacer. Me solia pasar que duraba toda la clase sin entender que haciamos y eso obligaba a tener que ver la clase m谩s de una vez. Se nota que Juan escucha a los estudiantes e implementa esas mejoras.

Dejo mi aporte:

Algunos atajos de teclado para VS Code:

Yo cree solita pausando el video todos los archivos con los componentes 馃槃

Clase 3 Componentes de TODO Machine

Lo primero en hacer es eliminar los elementos del componente App.js, dejandolo con la siguiente estructura:

import React from 'react'
import logo from './platzi.webp';
import './App.css';

function App() {
  return (
    <div className="App">
    <TodoItem />
    <TodoItem />
    <TodoItem />
      
    </div>
  );
};
function TodoItem() {
  return (
    <li>
      <span>V</span>
      <p>Llorar con la Lorona</p>
      <span>X</span>
    </li>
  );
}

export default App;

Ahora debajo del div, agregamos un componente <TodoCounter />
<TodoSearch /> y luego agregamos un contenedor de los `` llamandolo

  <TodoItem />
  <TodoItem />
  <TodoItem />
<TodoList/>

Luego al final agregamos el boton <CreateTodoButton />.
Ahora toca crear los componentes que fuimos construyendo (En el caso de tener el error por React debemos importarlo tambi茅n se puede usar el shorcout imr ojo que necesita tener la extensi贸n de react):

Componente TodoCounter

import React from 'react'

function TodoCounter() {
  return (
    <h1>Haz completado 3 de 5 TODOS</h1>
  );
}

export { TodoCounter };

Componente TodoList

En el caso de este componente enviamos las propiedades o prop's para ir renderizando los TODO鈥檚

import React from 'react'

function TodoList(props) {
  return (
    <ul>
      {props.children}
    </ul>
  )
}

export { TodoList };

Componente Todo Search

import React from 'react'

function TodoSearch() {
  return (
    <input placeholder="Buscar..." />
  )
}

export { TodoSearch };

Componente TodoItem

Este componente lo separamos del componente App.js

import React from "react";

function TodoItem() {
  return (
    <li>
      <span>V</span>
      <p>Llorar con la Lorona</p>
      <span>X</span>
    </li>
  );
}

export { TodoItem };

Componente TodoButton

import React from "react";

function CreateTodoButton() {
  return <button>+</button>;
}

export { CreateTodoButton };

Componente App Final

import React from "react";
import { TodoCounter } from "./TodoCounter";
import { TodoSearch } from "./TodoSearch";
import { TodoList } from "./TodoList";
import { TodoItem } from "./TodoItem";
import { CreateTodoButton } from "./CreateTodoButton";
import "./App.css";

function App() {
  return (
    <div className="App">
      <TodoCounter />
      <TodoSearch />

      <TodoList>
        <TodoItem />
        <TodoItem />
        <TodoItem />
      </TodoList>

      <CreateTodoButton />
    </div>
  );
}


export default App;

Pueden saber cuales son los atajos de su teclado para VSCode presionando : 鈥淐TRL + SHIFT + P鈥 o 鈥淐MD + SHIFT + P鈥, y en la barra de busqueda que les aparece arriba, escribir Shortcuts. Al primer resultado le dan enter y los manda a un HTML con los atajos para su sistema.

El profe:
-Yeah, felicitaciones.
F A L T A T O D O L O D E M 脕 S 馃

Mi aporte literal como lo pide el profe creer铆a que es

function CreateTodoBotton(){
    return(
        <button>+</button>
    );
};
export { CreateTodoBotton };

Particularmente cree un sistema de carpetas en este caso una llamada Components donde he alojado todas las funciones creadas, ademas de un archivo barril index.js , donde exporto desde all铆 todos mis componentes.

Aqui mi solucion

function CreateToDoButton(){
return (
<button>Crear nueva tarea</button>
);

}
export { CreateToDoButton };

He aqui dejo mi solucion
Javascript:

Css:

Como se ve el componente:

Hint: Puse en los estilos globales

html {
	font-size: 62.5%;
}

Mi soluci贸n:

Grande profe. Se entiende ultra f谩cil.

Aqui mi solucion y le a帽adi el tipico contador en el button 馃槃

import { useState } from "react"

function TodoCreateButton(){
    const [count, setCounter] = useState(0);
    
    const handle = () => {
        setCounter(count + 1)
    }
    
    return(
        <button onClick={handle}>Click uwu {count}</button>
    )
}

export {TodoCreateButton}

En este c贸digo, el useState es una funci贸n especial de React que nos permite agregar un estado a un componente. Un estado es b谩sicamente un lugar donde puedes almacenar y controlar datos que pueden cambiar mientras el componente est谩 en uso.

En este caso particular, useState(0) inicializa el estado con el valor 0. Al llamar a useState(0), obtenemos una variable llamada count que representa el valor actual del estado y una funci贸n llamada setCounter que nos permite actualizar ese valor.

La l铆nea const [count, setCounter] = useState(0) declara y asigna los valores iniciales del estado. count guarda el valor actual, que comienza en 0, y setCounter es una funci贸n especial que nos permite actualizar ese valor.

La funci贸n handle es una funci贸n que creamos para manejar el evento de clic en el bot贸n. Cada vez que se hace clic en el bot贸n, la funci贸n handle se ejecuta y llama a setCounter(count + 1) para actualizar el estado. B谩sicamente, le decimos a React que incremente el valor de count en 1 y actualice el componente con el nuevo valor.

Ah铆 vamos鈥

Los componentes pueden recibir parametros de 2 formas:

  1. A la hora de llamar el componente:
// Aqui dentro del componente TodoCounter usamos props.completed y props.total
<TodoCounter completed={3} total={5} />
  1. Pasandole m谩s elementos como en el caso del TodoList:
// Aqui dentro del componente TodoList usamos props.children para referenciar los TodoItem
<TodoList>
	<TodoItem />
	<TodoItem />
	<TodoItem />
</TodoList>

隆Acabo de darme cuenta de que el curso dura nueve horas鈥 ok hoy no nos vamos hasta que terminemos este curso!

function TodoButton(props){
return (
<input type=鈥渂utton鈥 value={props.value} />
);
}
export {TodoButton};

podr铆amos guardar todos los componentes de un tipo ( en este caso los Todo) en un solo archivo , para ahorrarme la lista de archivos?

Friendly reminder para comentar algo en VSCode

Shift + Alt + A 馃槈

Autocompletar Elementos JSX

Se debe agregar en la configuraci贸n de VSC de la siguiente manera:

Ctrl + , y luego clic en el icono 鈫煋 (Derecha superior), finalmente agregamos esto

{
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}

馃敟 Tutorial: Configurar autocompletado JSX

M谩s sobre configuraci贸n de VSC

Mi solucion

import React from 'react'

function CreateTodoButton(){
    return(
        <button>Add</button>
    );
}

export  {CreateTodoButton};

Les dejo mi soluci贸n, yo prefiero utilizar una arrow function 馃槃 y exportarla directamente, para crearla pueden utilizar el atajo rafc!

Dios les bendiga, para comentar en windows a mi me sirve en teclado gringo con control + k + c, pd: Recomiendo el uso de teclado gringo, no me refiero a literal un teclado gringo sino cambiar la configuraci贸n interna a causa de que siento m谩s ergonomico la posici贸n de los atajos de teclado como llaves, corchetes, m谩s y menos que, comillas invertidas, backslash, simbolos, etc. Incluso la pipe line y a veces siento que en espa帽ol puede ser muy engorroso hacer ciertos atajos de teclado

Hola, Yo creo que el nombre del componente deber铆a reflejar el objetivo de este. as铆 se hace mas clara su responsabilidad.

Excelente actualizaci贸n del curso. Va mucho m谩s pausada y se ha detenido a explicar conceptos de forma m谩s profunda. Excelente JuanDC, gracias por la actualizaci贸n.

1:41

Es de valientes saber borrar el c贸digo by Juan DC

Esta fue la organizaci贸n que le di, tengo entendido que mas adelante a cada componente se le agregara un estilo, por lo que considero que es mejor tener un orden por carpetas ![](https://static.platzi.com/media/user_upload/Untitled-d856c952-35e2-4abf-a04c-5a276c3946de.jpg)
Me gust贸 much铆simo la edici贸n de video donde se ve al profesor en el mismo IDE al lado del c贸digo. Creo que es mucho mejor que cuando aparece el profesor peque帽ito en un circulito en una esquina. Ojal谩 sigan haciendo videos con este estilo.

Componentes de Todo Machine

Antes de continuar debemos mencionar que tenemos dos formas de llamar a los componentes en JSX, el primero es con el autocerrado <componente />, y el segundo es con dos etiquetas de apertura y de cierre <componente></componente>. La forma de autocierre nos sirve cuando no vamos a poner componentes o elementos dentro de este componente, y la segunda forma nos permite poner componente dentro de componentes.


Maquetando la aplicaci贸n

A continuaci贸n, comenzaremos ya a maquetar los componentes necesarios para el Todo Machine, para esto primero borraremos todo lo que se encuentra adentro de nuestro componente App, el cual deber谩 quedar de la siguiente manera.

function App() {
  return (
    <div className="App">

        <TodoCounter />
        <TodoSearch />

        <TodoList>
            <TodoItem/>
            <TodoItem/>
            <TodoItem/>
        </TodoList>

        <CreateTodoButton>
    </div>
  );
}

鈿 La aplicaci贸n se romper谩 y no correr谩, ya que los componentes no se han creado a煤n. Entonces porque lo hacemos de esta forma, esto es una t茅cnica en la cual primero maquetamos la estructura de la aplicaci贸n y posteriormente creamos la funcionalidad de cada componente.


Creando los componentes

Para crear los componentes primero, crearemos archivos con el nombre de cada uno, esto nos permitir谩 tener una estructura m谩s limpia y en caso de modificar alg煤n componente poder encontrarlo con mayor facilidad. Recordemos que para los componentes tenemos que crear el archivo nombr谩ndolo con la primera letra en may煤scula, y el nombre debe ser igual al nombre del componente.

TodoCounter

Crearemos un nuevo componente llamado TodoCounter en un archivo llamado TodoCounter.js. Deber谩 quedar de la siguiente manera.

function TodoCounter() {
    <h1>
        Has completado 3 de 5 TODOS
    </h1>
}

export { TodoCounter }
<h5>Exportar la funci贸n</h5>

Para poder utilizar el componente, debemos exportar la funci贸n, en este caso hay dos formas de hacerlo: con export default o con export nombrado.

<h6>Export default</h6>

Utilizar el export default <funci贸n> puede no ser la mejor opci贸n, ya que al exportar de esta manera, tenemos la posibilidad de cambiar el nombre de la funci贸n al importar, lo que puede generar errores inesperados. Si quisi茅ramos manejarlo de esta manera, deber谩 quedar de la siguiente forma.

function TodoCounter() {
    <h1>
        Has completado 3 de 5 TODOS
    </h1>
}
export default TodoCounter
// Lo llamariamos de la siguiente forma

import NombreCualquiera from "./TodoCounter";

<h6>Export nombrado</h6>

El export nombrado con la sintaxis de objeto export { <funci贸n> }, es m谩s recomendado cuando trabajamos con componentes de React, ya que nos permite evitar errores. Este tipo de export quedar铆a de esta manera:

function TodoCounter() {
    <h1>
        Has completado 3 de 5 TODOS
    </h1>
}
export { TodoCounter }
// Lo llamariamos de la siguiente forma

import { TodoCounter } from "./TodoCounter";

TodoSearch

馃憠 Repetiremos los pasos para la creaci贸n de componentes, por lo que a partir de ahora solo mencionaremos caracter铆sticas propias de cada componente.

En este componente notaremos que tendr谩 un input en el cual posteriormente manejaremos informaci贸n. Sin embargo, por ahora solo pondremos el input.

function TodoSearch(){
    return (
        <input placeholder="Cortar Cebolla"/>
    )
}

export { TodoSearch }

TodoList

Este componente es un poco especial, ya que a diferencia de los otros componentes manejar谩 props. Por el momento no veremos m谩s acerca de las props, ya que este tema se retomar谩 m谩s adelante.

function TodoList(props){
    return (
        <ul>
            {props.children}
        </ul>
    )
}

export { TodoList }

CreateTodoButton

Por el momento, no crearemos este componente. Sin embargo, para poder ver el avance de la aplicaci贸n, lo comentaremos en nuestro archivo App.js. Para comentar dentro de JSX utilizaremos la sintaxis {/* */}, por lo que deber谩 quedar de la siguiente manera:

    {/* <CreateTodoButton /> */}

TodoItem

Este componente ya se encuentra creado dentro de nuestro archivo App.js. Entonces lo 煤nico que necesitaremos ser谩 moverlo a su propio archivo.


Importando los archivos

Una vez tengamos creados los componentes creados, los importaremos en nuestro archivo App.js, utilizando la sintaxis de importaci贸n de objeto:

import { TodoCounter } from './TodoCounter';
import { TodoSearch } from './TodoSearch';
import { TodoList } from './TodoList';
import { TodoItem } from './TodoItem';

function App() {
    return (
        <div className="App">

            <TodoCounter />
            <TodoSearch />

            <TodoList>
                <TodoItem />
                <TodoItem />
                <TodoItem />
            </TodoList>

            {/* <CreateTodoButton /> */}
        </div>
    );
}

export default App;

**Que son los .props?** Certainly! In React.js, the `.props` property is used to access the properties (props) that are passed to a React component. Props allow you to pass data from a parent component to a child component. Here are some examples of using `.props` in React: ### Example 1: Basic Usage jsxCopy code`import React from 'react'`; `class Greeting extends React.Component` { ` render(`) { ` return` ( `
` `

Hello, {this.props.name}!

` `
` ); } } `// Usage of Greeting component` `class App extends React.Component` { ` render(`) { ` return` ( `
` ` <Greeting name="John" />` ` <Greeting name="Jane" />` `
` ); } } In this example, the `Greeting` component receives a `name` prop, and it renders a personalized greeting based on that prop. ### Example 2: Handling Different Types of Props jsxCopy code`import React from 'react'`; `class Book extends React.Component` { ` render(`) { ` return` ( `
` `

Title: {this.props.title}

` `

Author: {this.props.author}

` `

Published Year: {this.props.publishedYear}

` `
` ); } } `// Usage of Book component` `class BookList extends React.Component` { ` render(`) { ` return` ( `
` ` <Book title="React in Action" author="Mark Thomas" publishedYear={2020} />` ` <Book title="JavaScript: The Good Parts" author="Douglas Crockford" publishedYear={2008} />` `
` ); } } Here, the `Book` component receives `title`, `author`, and `publishedYear` as props. The `BookList` component uses the `Book` component to display information about different books. ### Example 3: Conditional Rendering Based on Props jsxCopy code`import React from 'react'`; `class AlertMessage extends React.Component` { ` render(`) { ` return` ( `
` {this.props.isError ? ( `

Error: {this.props.message}

` ) : ( `

Success: {this.props.message}

` )} `
` ); } } `// Usage of AlertMessage component` `class Notification extends React.Component` { ` render(`) { ` return` ( `
` ` <AlertMessage isError={true} message="Failed to load data" />` ` <AlertMessage isError={false} message="Data loaded successfully" />` `
` ); } } In this example, the `AlertMessage` component renders different messages and styles based on the `isError` prop. These examples illustrate how to use `.props` to pass and access data between React components. Remember that props are read-only, and you should not directly modify them within the component.
Exelente forma de explicar grande profe Juan, los efectos visuales de primera, es bueno que se explique desde el inicio todo lo que se va a realizar para entrar a realizar con conciencia genial...

Create Todo Button

  • El componente Create Todo Button representa el bot贸n para crear nuevos TODOS en la aplicaci贸n.
  • Aunque actualmente no tiene funcionalidad implementada, su presencia es crucial para la futura interactividad de la aplicaci贸n.
  • Este bot贸n ser谩 utilizado para desencadenar la aparici贸n del formulario y modal que permitir谩 a los usuarios crear nuevos TODOS.
  • La estructura b谩sica del bot贸n incluye un elemento <button> con un icono de cruz (+) en su interior.
  • Aunque por ahora no tiene funcionalidad, su implementaci贸n es esencial para la completa experiencia de usuario planificada.

Communication Between Components with Props

  • La comunicaci贸n entre componentes en React se realiza a trav茅s de las 鈥減rops鈥 (propiedades).
  • En el componente TodoList, se utiliza props.children para permitir que otros componentes, como TodoItem, se rendericen dentro de la lista.
  • Las props son un mecanismo fundamental para pasar datos de un componente padre a sus componentes hijos.
  • En futuras clases, se explorar谩 m谩s a fondo el uso de props y c贸mo mejorar la comunicaci贸n entre componentes.

Conclusi贸n y Pr贸ximos Pasos

  • Hasta ahora, hemos creado la estructura principal de la aplicaci贸n de Todo Machine, con componentes como TodoCounter, TodoSearch, TodoList, TodoItem, y CreateTodoButton.
  • Aunque algunos componentes no tienen funcionalidad completa, su implementaci贸n b谩sica sienta las bases para futuras mejoras y caracter铆sticas.
  • En la pr贸xima clase, exploraremos m谩s a fondo la comunicaci贸n entre componentes mediante props y continuaremos construyendo la interactividad de la aplicaci贸n.

Reto: Create Todo Button

  • El reto consiste en crear el componente CreateTodoButton, un bot贸n que servir谩 para desencadenar la creaci贸n de nuevos TODOS en la aplicaci贸n.
  • Aunque la funcionalidad completa se abordar谩 en clases posteriores, es esencial tener este componente creado y presente en la interfaz de usuario.
  • Crea un archivo CreateTodoButton.js, exporta el componente, e int茅gralo en el componente App.
  • La estructura b谩sica incluye un elemento <button> con un icono de cruz (+) en su interior.

Recuerda seguir el enfoque de desarrollo progresivo, construyendo y mejorando cada componente paso a paso. 隆Buena suerte con el reto!

No soy experto, pero quise hacer la prueba de integrar algunas peque帽as cosas de Bootstrap, y les comparto mi humilde avance despu茅s de 2 horas.

Dios les bendiga, por fin entend铆 que el snippet rfce viene de react, function, component y export xd

Te amo juandc

Like si tomaste un curso de Richard B. Kaufman

mi boton creado en el archivo CreateTodoButton.js: `function CreateTodoButton() {聽 聽 return (聽 聽 聽 <button>Dale</button>聽 聽 )聽 }聽 聽 export { CreateTodoButton};`
bien explicado profe... super ese detalle
Excelente profesor. Las clases son claras, completas y entretenidas 馃槑
Para comentar un codigo o simplemente poner un comentario, se usa 馃捇馃憣 `shift + alt + A`
Les comparto mi soluci贸n al reto. 馃榿 ![](https://static.platzi.com/media/user_upload/code-df9e1dfd-619b-46a3-85d0-69f2117d30e8.jpg)
Cada vez m谩s satisfecho con esta clase. M谩s cursos as铆!
gracias, profe juan ![](https://static.platzi.com/media/user_upload/VALIENTES-d8aa67fe-f3fb-4099-ae97-2f89f40b6254.jpg)
CTRL + C + K para comentar c贸digo en windows

En Windows el atajo por defecto de VS es ctrl + k + c , y tambien funciona para JSX.

CreateTodoButton

function CreateTodoButton() {
    return(
        <button>Agregar</button>
    );
  }

export { CreateTodoButton };
"Recuerda que neeitamos un bot贸n" jajajajjajaja
`function CreateToDoButton() {聽 聽 return(聽 聽 聽 聽 <button>Add +</button>聽 聽 );}` `export { CreateToDoButton }`
```js function CreateToDoButton() { return( <button>Add +</button> ); } export { CreateToDoButton } ```function CreateToDoButton() {聽 聽 return(聽 聽 聽 聽 \<button>Add +\</button>聽 聽 );} export { CreateToDoButton }
TodoButton.js
function TodoButton() {
    return (
      <button>
        +
      </button>
    );
  }
  
  export { TodoButton };
App.js
import { TodoButton } from './TodoButton';

      <TodoButton />

Haz y Has: min 6:37 鉁煒

  • 鈥淗as鈥 es una conjugaci贸n del verbo 鈥渉aber鈥.
  • 鈥淗az鈥 viene del verbo 鈥渉acer鈥.

Mi solucion del componente Boton

function CreateTodoButton(){
    return (
        <button>Crear Tarea</button>
        )
};

export {CreateTodoButton};
function TodoButton() {
  return (
    <button> + </button>
  )
}

export { TodoButton }

gg

function CreateTodoButton() {
    return (
        <button> + </button>
    )
}

export { CreateTodoButton };
import { TodoCounter } from './TodoCounter';
import { TodoSearch } from './TodoSearch';
import { TodoList } from './TodoList';
import { TodoItem } from './TodoItem';
import { CreateTodoButton } from './CreateTodoButton'; 
import './App.css';

function App() {
  return (
    <div className="App">

      <TodoCounter />
      <TodoSearch />

      <TodoList>
        <TodoItem />
        <TodoItem />
        <TodoItem />
      </TodoList>

      <CreateTodoButton />

    </div>
  );
}

export default App;

Asi lo hice yo

Con el comando (ctrl + espace) + eligiendo el archivo, puedes importar el componente que detecta vscode.

-Creo un componente CreateTodoButton.js

function CreateTodoButton(){
    return(
        <button type="button">+</button>
    );
}
export  {CreateTodoButton}
  • Y final mente lo importa en App.js
import { CreateTodoButton } from './CreateTodoButton';

<div className="App">
....
 <CreateTodoButton />
</div>

La forma en que cre茅 mi componente fue:

// En el archivo TodoCreateButton.js
function TodoCreateButton () {
    return (
        <button>Crear TODO</button>
    );
}

export { TodoCreateButton };
//En el archivo App.js lo importo y agrego el componente dentro del componente App.
import { TodoCreateButton } from './TodoCreateButton';

    <div className="App">
      <TodoTitle />
      <TodoSearch />
      <TodoList>
        <TodoItem />
        <TodoItem />
        <TodoItem />
      </TodoList>
      <TodoCreateButton />
    </div>

function CreateTodoButton(){
return(
<button variant=鈥渃ontained鈥>Default</button>
)
}
export { CreateTodoButton }; // Export nombrados

As铆 es como quedo mi soluci贸n de Button

Ah铆 va

function CreateTodoButton() {
    return (
      <button>+ Agregar To-do</button>
    );
  }

  export { CreateTodoButton };

Prueben para comentar y descomentar control + shift + 7 ,uso linux y visual studio code

Componente Button

import React from 'react'

const CreateTodoButton = () => {
  return (
    <div>
        <button>+</button>
    </div>
  )
}

export {CreateTodoButton};
import { CreateTodoButton } from './components/CreateTodoButton';


function App() {
  return (
    <div className="App">
      {/*Contador*/}
      <TodoCounter />

      {/*Buscar Todo's*/}
      <TodoSearch />

      {/*Lista de Items*/}
      <TodoList> 
        <TodoItem/>
        <TodoItem/>
        <TodoItem/>
      </TodoList>

      {/*Crear ToDo*/}
      <CreateTodoButton/>

    </div>
  );
}

export default App;

Atajo para comentar en Windows :

CTRL + }

MI resoluci贸n del reto:
Cree un nuevo archivo con la siguiente funci贸n:

function CreateTodoButton(){
  return(
  <button>+</button>
  );
}

export {CreateTodoButton}

en el archivo App. js agregar la siguiente linea :

import { CreateTodoButton } from '' ;





Esta muy bien explicado

yo crre el componente de CreateTodoButton de una vez :V

Lo del chanclazo es epico 馃槃

Que buen atajo de teclado!! xd

function CreateTodoButton(){
    return(
      <button>Agregar</button>
      
    );
  }

  export { CreateTodoButton };

Mi componente 馃檶馃徏

function CreateTodoButton() {
  return (
    <button>鉃</button>
  )
}

Mi soluci贸n:

App.js

<TodoButtonCreate value="Add" />

TodoButtonCreate.js

function TodoButtonCreate(props){
    return (
        <input type="button" value={props.value}/>
    );
}

export {TodoButtonCreate};

Aqu铆 el reto de la clase.

function CreateTodoButton() {
    return (
        <button style={{ backgroundColor: 'blue', color: 'white' }}></button>
    );
  }
  export {CreateTodoButton}
bien
Hola!! Hice todo el c贸digo paso a paso como fue diciendo el profesor, pero cuando lo corro no veo nada en el navegador. Compar茅 con los c贸digos que dej贸 en recursos y los que fueron escribiendo ac谩 y nada. Qu茅 me puede estar faltando? instalar algo capaz? Muchas gracias
![]() Hola**, tengo un problema a la hora de que me muestre en el sitio web,** me sale la pagina en blanco, en la terminal no me reporta ningun error, ya no se que hacerrrr jajaja ![](https://static.platzi.com/media/user_upload/image-0ad839a6-58c3-4e3e-b905-57945c31e86c.jpg)

Si eres como yo que iniciaste el proyecto con Vite + React y te da error: Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.

Solo cambia las extensiones de los archivos .js a jsx y listo

```js file: CreateTodoButton---->function CreateTodoButton() { return ( <button type="button">鈽濔煆</button> ) }; export {CreateTodoButton}; import to file App.js----> import { CreateTodoButton} from './CreateTodoButton'; ```
## 馃鉁║tilic茅 bootstrap icons para insertar el icon de + para el bot贸n y el componente me qued贸 as铆: ```js const CreateTodoButton = () => { return ( <button className="primaryButton"></button> ); }; export { CreateTodoButton }; ``` Adicional tambi茅n a帽ad铆 unos peque帽os estilos para que el bot贸n se vea mejor c: ```js .primaryButton { background-color: var(--primary-color); color: var(--light-color); border: none; border-radius: 4px; padding: 10px; font-size: 16px; cursor: pointer; transition: background-color 0.2s; } .primaryButton:hover { background-color: var(--primary-color-dark); } .primaryButton:active { background-color: var(--primary-color-light); } ```Y finalmente as铆 qued贸 mi botoncito: ![](https://static.platzi.com/media/user_upload/Screenshot%202024-03-22%20165827-a528cbe2-3020-43a1-8248-e75dca1e0f4b.jpg) No s茅 por qu茅 no me deja subir Gifs :))
![](https://static.platzi.com/media/user_upload/image-3b057d8e-81c4-4e40-9ea4-ebc41a2f316c.jpg) ![](https://static.platzi.com/media/user_upload/image-75f9dfab-05cb-4e54-9c41-ac499e8f3afb.jpg)
```js import React from 'react' function TodoButton() { return (
) } export { TodoButton } ```

otra vez x aqui

No soy experto, pero quise hacer la prueba de integrar algunas peque帽as cosas de Bootstrap, y les comparto mi humilde avance despu茅s de 2 horas.

Asi hice el boton :
function CreateTodoButton() {
return (
<button
onClick={() => {
/* llslslsl*/
}}
>
Click Here
</button>
);
}

export { CreateTodoButton };

```js function CreateTodoButton(){ return( <label for="TodoButton"> <input type="button" id="TodoButton" value="+"/> </label> ); } export { CreateTodoButton }; ```Yo lo hice con un label y un input tratando de hacerlo diferente, me cuentan si les gusta asi :) function CreateTodoButton(){聽 *return*(聽 聽 \<label *for*="TodoButton">聽 聽 聽 \<input *type*="button" *id*="TodoButton" *value*="+"/>聽 聽 \</label>聽 );} export { CreateTodoButton };

Yo uso en windows para comentarear: ctrl + k y ctrl + c

Este curso me aburre por que se para todo el tiempo, no importa si lo uso en chrome, en la app o safari, es una pesadilla. por favor soluci贸nenlo.

Qu茅 extensi贸n usan para autocompletar JSX y html en VS code?
Estoy entrando en crisis, cuando tengo solamente "TodoItem" al inicio del capitulo, todo funciona correctamente, puedo verlo en el navegador.... pero conforme avanzo y llego al final, el navegador me muestra una pantalla blanca.... Ya repeti el video 3 veces paso a paso y no se que esta suceciendo
![]()![](https://ibb.co/SVLcFJ2)![](https://ibb.co/SVLcFJ2)El actajo en el minuto 16:38 funciona si tiene los archivos abiertos.
`` `function CreateTodoButton() {` `return (` `<button type="button">` `+` `</button>` `);` `};` export { CreateTodoButton };```js ```

Exportar e importar componentes

Crear componente y exportarlo

Se crea el componente en un archivo diferente que se llame igual que el componentes y su nombre comienza con mayuscula CreateTodoButton.js

Luego se exporta como un objeto

// Esta es la funcion que contiene el componente
function CreateTodoButton() {
    return (
        <button />
    )
};

// Se exporta como un objeto
export { CreateTodoButton };

Importar e incluir componente en la app

  1. Se importa el componente al inicio del codigo
  2. Se incluye dentro del return donde deba renderizarse
{/* Se importa el componente */}
import { CreateTodoButton } from './CreateTodoButton';

function App() {

  return (
    <div className="App">

			{/* Se situa el componente donde debe renderizarse */}
      <CreateTodoButton />

    </div>
  );
};

I 馃挌 Platzi

Se deber铆a poder ocultar esta parde de los comentarios es bastante molesto no poder expandir m谩s la pantalla.

El profesor hubiera sido mejor el actor de Luffy en la serie de OnePiece, excelente carisma

es decir que ay que hacer un archivo a cada funcionn

ctrl + ]} para comentar mas facil sin demorarse en comentar

Todo bien con los contenidos, con Juan David y la nueva forma de impartir la clase, pero que feo es el Theme de Visual Studio que eligi贸 Juan David!

bueno, sigan con lo suyo y nunca paren de aprender 馃