A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

CSS en React

7/23
Recursos

Aportes 177

Preguntas 22

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Mi version del app

Aqu铆 les dejo como me va quedando la aplicaci贸n

Asi se ver谩 la version mobile del proyectito en React. Tuve que hacer una pausa para dise帽arlo

Al final del curso, cuando tengamos a煤n m谩s claros los fundamentos de React, tendremos un reto (y su soluci贸n) para cambiar los 鈥溍璫onos鈥, que en realidad solo son texto, por 铆conos de verdad.

Mientras tanto, yo us茅 un 鈭 y una X. 馃槈

Hasta el momento asi va mi aplicacion
(desplegar comentario para ver imagen completa)

As铆 va quedando mi TODO 馃槃

Aqu铆 les dejo mi versi贸n!!

Les comparto como me qued贸.

asi va quedando

驴Qu茅 tal?
.
.

Aqu铆 dejo el m铆o, para los iconos utilice emojis y para las tareas le hice un scroll al cual le cambie la apariencia.

隆As铆 va quedando gente!

Bueno as铆 va quedando el m铆o 馃憞

<link href="https://fonts.googleapis.com/css2?family=Montserrat:[email protected];700&display=swap" rel="stylesheet" />

Es poco pero es trabajo honesto :p

Quise darle un poco de mi toque con los estilo y me qued贸 asi

En lo personal me gusta m谩s usar Styled Components.

Tengo todo en un solo archivo del componente y as铆 tener mejor orden en los archivos, ademas de otras funcionalidades como pasarle los props a las propiedades de los selectores y anidamiento parecido a Sass.

Este es comando con npm para instalar:

npm install --save styled-components

Aqu铆, la documentaci贸n: https://styled-components.com/docs/basics

En el archivo index.css suelo colocar las variables y selectores globales


Este es mi dise帽p

mi peque帽o proyecto

As铆 vamos:

Va quedando!

As铆 lo tengo por ahora. Luego experimentar茅 un poco m谩s con los colores 馃檶 馃専.

Actualmente HTML tiene una lista de Emojis que podemos agregar a nuestro codigo utilizando un simple codigo, pueden revisar lo que les menciono aqui: https://www.w3schools.com/charsets/ref_emoji.asp

Asi va quedando el mio:

Podemos utilizar un condicional ternario en vez del operador && por que cuando la condici贸n se eval煤a en falso con el operador && se va a agregar el valor false a la lista de clases de la etiqueta.

${props.Completed ? 'TodoItem-p-complete' : ' '}

Si usas Sass puedes instalar

yarn add sass

Despu茅s de un largo rato, escribir las clases y estilos se vuelve un poco engorroso. Cambias y copias y pegas y vuelves a cambiar 鈹 Ser铆a m谩s sencillo si entiendes los conceptos clave de CSS y consideras que todo es una caja y as铆 puedes ver de manera general que todos los estilos est谩n siendo aplicados a una caja que t煤 vas pintando. Pero, 驴C贸mo lograr grabarse cada porpiedad CSS en este tiempo? Y quiz谩 cuando ya incluso sabes los nombres de propiedades CSS, 驴c贸mo ahorras tiempo?
.
Te recomiendo mucho Tailwind.
Es muy f谩cil de instalar y muy intuitivo de entender.

  1. Ya que nosotros creamos el app con create-react-app, Tailwind te permite una configuraci贸n tipo plug-and-play.
    .
    Se usa PostCSS para agregar las funciones de preprocesador que usan en lugar de setear un preprocesador separado.
    .
    Se usa Autoprefixer que es un complemento de PostCSS para agrega autom谩ticamente cualquier prefix vendor (-webkit-, -moz-, etc) que el navegador necesita admitir.
    .
  2. Instalaci贸n
    Se instalan los tres paquetes
npm install -D tailwindcss postcss autoprefixer

Y despu茅s inicializas el archivo tailwind.config.js, para eso, ejecutas el siguiente comando

npx tailwindcss init

Cuando se termina el comando anterior, se crea el archivo tailwind.config.js. Agrega las rutas a todos tus archivos. Ve a ese archivo y escribe esto:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Agrega las directivas @tailwind para cada una de las cosas que necesita Tailwind a tu archivo ./src/index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;
  1. YA LO TIENES INSTALADO. Ahora solo vuelve a correr:
npm run start

.
4. Su forma de uso es intuitiva, Tengo a e este momento de escrito esto, hecho solo el t铆tulo y le铆do los conceptos clave que la documentaci贸n sugiere鈥 te muestro c贸mo va鈥 mira:

import React from 'react';

const TodoCounter = () => {
  return (
    <div className="p-6 max-w-lg mx-auto">
      <h2 className="text-3xl font-bold underline">Has completado 2 de 3 tareas</h2>
    </div>
  );
};

export default TodoCounter;


.
Quiz谩 te parezca poco鈥 sin embargo, cuando entiendas el potencial y c贸mo te hace la vida f谩cil, entonces le tomas valor.

.
Te dejo la web directa a instalaci贸n. Navega y aprende

Les comparto como qued贸 mi dise帽o de la aplicaci贸n. 馃槂

Yo s茅 que no es mucho, pero es trabajo honesto jajajaja a煤n tengo que mejorar en cuestiones de dise帽o, solo trat茅 de hacer este en modo oscuro, cualquier sugerencia es bienvenida 馃挌锔

Saludos muchachos, aqui les dejo como va quedando mi todo list:

Cualquier aporte o comentario es bien recibido, saludos 馃槃

Podr铆amos optimizar el envi贸 del text y completed en el TodoItem utilizando el spread operator

{
	todos.map(todo=>(
     <TodoItem key={todo.text} {...todo} />
 	))
}

ustedes est谩n en otro nivel, el dise帽o de todos son brutales, Felicitaciones espero pronto estar en ese nivel!

si estan en windows y usan vs code, con el boton windows + . pueden sacar emojis propios de el sistema

una buena practica tambien seria, es crear una carpeta dentrode src que se llame components, ahi poner todos los componestes creados para tener un mejor orden, igualmente crear otra carpeta dentro de src llamada style y ahi colocar todas las archivos de css. y asi se lleva un oreden mejor del proyecto

Esta es mi ToDo App, que les parece?? 馃サ馃憣


Mi versi贸n 馃槃 Estoy amando este curso!!

As铆 va quedando mi versi贸n:

Estoy imitando una UI de 鈥frontendmentor鈥, asi vamos c:

Asi va quedando la mia!

Ay vamos!

As铆 deje mi front, simple pero lindo a mi parecer =D

Aqui mi trabajo hasta el momento 馃挭馃徑
Para los iconos de completado y borrar, us茅 esta pagina que convierte los SVG en componentes de React y asi pude tambi茅n cambiar su color mediante las props
pagina

Falta cambiar a iconos y darle alguna vuelta m谩s

Vale鈥 Empezamos 馃槂

Ayuda! no soy nada bueno con el dise帽o.
Espero puedan ayudarme a mejorarlo. Gracias por su ayuda.

No se que version deberia dejar 馃

Este es mi todo list, a煤n puede mejorar much铆simo m谩s

Aqui mi versi贸n

As铆 voy con mi proyecto 鈥 Un poco de morado--

As铆 me va quedando mi TO-DO List

Mi propuesta 馃槂

Mi dise帽o 馃槃


Asi va quedando mi dise帽o.


As铆 va quedando hasta ahora, a煤n le faltan algunas cositas m谩s por a帽adir 馃構

As铆 qued贸 mi aplicaci贸n: https://brandonargel.github.io/todo-app/

Maquetado listo ! 馃槃

mi dise帽o, el maquetado en proceso 鈥

Lo llevo asi hasta el momento:

Por si no entendiste lo que puso en la clase &&
es lo mismo que hacer esto className={ variable ? 鈥渇ondoNegro鈥 : 鈥渇ondoBlanco鈥潁
si la variable es true pones 鈥渆sta clase鈥 sino pones la otra

Primer avance

As铆 quedo mi app:

De momento:

Este seria mi diseno, algo simple

Mi versi贸n

Aqu铆 les dejo mi versi贸n

As铆 qued贸 el dise帽o, ahora s贸lo falta la funcionalidad!

No es mi mejor dise帽o, pero ya va a haber tiempo para mejorarlo!

Este es mi humilde dise帽o
![](

Mi aporte

Pueden a帽adir la libreria de react-icons para el check y el delete ya que es muy facil de utilizar.
https://react-icons.github.io/react-icons/

Aun hay cosas que me gustaria hacer, pero estoy feliz por como qued贸 y debo seguir con el curso

Hola, este es el dise帽o de mi app 馃槈
.
desktop

.
mobile

Este es mi dise帽o, pienso agregarle a las tareas la fecha de creaci贸n, no le e quitado el buscador ni el bot贸n de delete, es solo que aun no se dond茅 colocar esos componentes 馃槄. Que les parece como va quedando?


As铆 va quedan mi app. Saludos!!

As铆 quedaron mis estilos.
Me cuesta mucho a煤n con el CSS siempre tengo que andar buscando en Google como se llama la regla y modificando estilos en la consola del navegador; siento que pierdo mucho tiempo, pero lo logre.

Interesante tocar esta tecnolog铆a, de momento vamos as铆


css react
aprendiendo a combinar y cambiar estilos en react

Mi versi贸n de la app

As铆 va quedando mi Todo App. A煤n me falta agregarle los 铆conos, pero como dijo Juan eso ser谩 en pr贸ximas clases.

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';

const todos=[
  {text: "Cortar cebolla", completed: true},
  {text: "ir al curso de react", completed: false},
  {text: "picar cebolla", completed: false},
  {text: "lalalal", completed: false}
]

function App() {
  return (
  <React.Fragment>
      <TodoCounter/>
      <TodoSearch/>      
      <TodoList>
        {todos.map(todo =>(
          <TodoItem 
          key={todo.text} 
          text={todo.text}
          completed={todo.completed}
          />
        ))}
      </TodoList>
      <CreateTodoButton/>
  </React.Fragment>
  );
}

export default App;

![](

Asi qued贸 mi version de la app:

As铆 quedaron mis estilos

Pueden ver mi c贸digo en mi repositorio:
https://github.com/AstrikTorres/todo-app/commit/23158695e553999ef53249a8a182384f30afe725

Mi version minimalista:


.
Hecho con tailwindcss debido a que estoy aprendiendo este framework de CSS.

.

type todoType = {
  text: string;
  completed: boolean;
}

const todos: todoType[] = [
  {text: 'Crear smart app', completed: false},
  {text: 'Lavar loza Lorem ipsum in dolor sit amet', completed: false},
  {text: 'Mirar las plantas', completed: true},
  {text: 'Mirar las plantas Lorem ipsum in dolor sit amet', completed: false},
];

function App() {
  return (
    <div className="App max-w-lg mx-auto flex flex-col justify-center">
      <TodoCounter />
      <TodoSearch />
      <TodoList>
        {todos.map((todo) => (
          <TodoItem
            key={todo.text}
            text={todo.text}
            completed={todo.completed}
          />
        ))}
      </TodoList>
      <CreateTodoButton />
    </div>
  );

.

const TodoCounter = () => {
  return (
    <div className="p-6">
      <h2 className="text-3xl font-bold">Tareas</h2>
      <p className="text-xl text-center">Has completado <b>2 de 3</b> tareas</p>
    </div>
  );
};

.

const TodoSearch = () => {

  return (
    <div className="p-6 flex justify-center">
      <input
        type="text"
        className="border p-2 border-slate-300 hover:border-b-indigo-900 focus:outline-none"
        placeholder='Buscar o crear nueva tarea'
      />
    </div>
  );
};

.

type ListProps = {
  children: ReactNode;
}

const TodoList = (props: ListProps) => {
  
  return (
    <section className="p-6">
      <ul className="flex flex-col items-center justify-between">
        {props.children}
      </ul>
    </section>
  );
};

.

type ItemProps = {
  text: string;
  completed: boolean;
}

const TodoItem = (props: ItemProps) => {
  
  return (
    <li className="grid grid-cols-3 items-center gap-3 my-2 text-center w-full border-b-2">
      <span className="cursor-pointer hover:bg-green-700 hover:text-gray-100"></span>
      <p className={`${props.completed && 'line-through'}`}>{props.text}</p>
      <span className="cursor-pointer hover:bg-red-600 text-gray-400 hover:text-gray-100">X</span>
    </li>
  );
};

.

const Button = () => {
  return (
    <div className="p-6 flex justify-center">
      <button className="border-2 w-52 hover:bg-gray-50">+</button>
    </div>
  );
};

Es lo que pude hacer, que me cuesta mucho el dise帽o web 馃槙

Este es mi dise帽o:

React es muy interesante!