From 78bc4177da515a4f38a99ee51425873e1a2c75c9 Mon Sep 17 00:00:00 2001 From: Misael-GC Date: Tue, 5 Sep 2023 09:08:20 -0600 Subject: [PATCH 01/36] add components, estructure of the app --- src/App.js | 33 ++++++++++++++++++--------------- src/CreateTodoButton.js | 11 +++++++++++ src/TodoCounter.jsx | 12 ++++++++++++ src/TodoItem.js | 11 +++++++++++ src/TodoList.js | 12 ++++++++++++ src/TodoSearch.js | 10 ++++++++++ 6 files changed, 74 insertions(+), 15 deletions(-) create mode 100644 src/CreateTodoButton.js create mode 100644 src/TodoCounter.jsx create mode 100644 src/TodoItem.js create mode 100644 src/TodoList.js create mode 100644 src/TodoSearch.js diff --git a/src/App.js b/src/App.js index 952c8f1fd..3635caf37 100644 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,28 @@ -import logo from './platzi.webp'; +import { TodoCounter } from './TodoCounter'; +import { TodoSearch } from './TodoSearch'; +import { TodoList } from './TodoList'; import './App.css'; +import { TodoItem } from './TodoItem'; +import { CreateTodoButton } from './CreateTodoButton'; function App() { return (
-
- logo -

- Edita el archivo src/App.js y guarda para recargar. -

- - Learn React - -
+ + + + + + + + +
); } + + + + export default App; diff --git a/src/CreateTodoButton.js b/src/CreateTodoButton.js new file mode 100644 index 000000000..dba2752fe --- /dev/null +++ b/src/CreateTodoButton.js @@ -0,0 +1,11 @@ +function CreateTodoButton(){ + return( + + ); +} + +export {CreateTodoButton}; \ No newline at end of file diff --git a/src/TodoCounter.jsx b/src/TodoCounter.jsx new file mode 100644 index 000000000..72e9e47b2 --- /dev/null +++ b/src/TodoCounter.jsx @@ -0,0 +1,12 @@ +import React from 'react'; + +function TodoCounter(){ + return( +

+ Has completado 3 de 5 TODOs +

+ ); +} + + +export { TodoCounter }; \ No newline at end of file diff --git a/src/TodoItem.js b/src/TodoItem.js new file mode 100644 index 000000000..b79845281 --- /dev/null +++ b/src/TodoItem.js @@ -0,0 +1,11 @@ +function TodoItem() { + return ( +
  • + [/] +

    Tarea a cumplir

    + x +
    • + ); + } + +export { TodoItem }; \ No newline at end of file diff --git a/src/TodoList.js b/src/TodoList.js new file mode 100644 index 000000000..1cde740ba --- /dev/null +++ b/src/TodoList.js @@ -0,0 +1,12 @@ +import React from 'react'; + +function TodoList(props){ + return( + + ); +} + + +export { TodoList }; \ No newline at end of file diff --git a/src/TodoSearch.js b/src/TodoSearch.js new file mode 100644 index 000000000..73e8615f2 --- /dev/null +++ b/src/TodoSearch.js @@ -0,0 +1,10 @@ +import React from 'react'; + +function TodoSearch(){ + return( + + ); +} + + +export { TodoSearch }; \ No newline at end of file From 46c8e01e860ce4c1f6506fc30fbdedbd154850f1 Mon Sep 17 00:00:00 2001 From: Misael-GC Date: Thu, 7 Sep 2023 09:44:40 -0600 Subject: [PATCH 02/36] props, children, react.fragment --- src/App.js | 25 ++++++++++++++++++------- src/TodoCounter.jsx | 4 ++-- src/TodoItem.js | 4 ++-- src/TodoList.js | 4 ++-- 4 files changed, 24 insertions(+), 13 deletions(-) diff --git a/src/App.js b/src/App.js index 3635caf37..904e3c02c 100644 --- a/src/App.js +++ b/src/App.js @@ -1,23 +1,34 @@ import { TodoCounter } from './TodoCounter'; import { TodoSearch } from './TodoSearch'; import { TodoList } from './TodoList'; -import './App.css'; import { TodoItem } from './TodoItem'; import { CreateTodoButton } from './CreateTodoButton'; +import './App.css'; + +const defaultTodos = [ + { text: 'Cortar cebolla', completed: true }, + { text: 'Tomar el Curso de Intro a React.js', completed: false }, + { text: 'Llorar con la Llorona', completed: false }, + { text: 'LALALALALA', completed: false }, +]; function App() { return ( -
    - + // Ract.Fragments = <> + <> + - - - + {defaultTodos.map(todo => ( + ))} -
    + ); } diff --git a/src/TodoCounter.jsx b/src/TodoCounter.jsx index 72e9e47b2..23ded98ad 100644 --- a/src/TodoCounter.jsx +++ b/src/TodoCounter.jsx @@ -1,9 +1,9 @@ import React from 'react'; -function TodoCounter(){ +function TodoCounter({ total, completed }){ return(

    - Has completado 3 de 5 TODOs + Has completado {completed} de {total} TODOs

    ); } diff --git a/src/TodoItem.js b/src/TodoItem.js index b79845281..102930923 100644 --- a/src/TodoItem.js +++ b/src/TodoItem.js @@ -1,8 +1,8 @@ -function TodoItem() { +function TodoItem(props) { return (
  • [/] -

    Tarea a cumplir

    +

    {props.text}

    x
    • ); diff --git a/src/TodoList.js b/src/TodoList.js index 1cde740ba..511f43712 100644 --- a/src/TodoList.js +++ b/src/TodoList.js @@ -1,9 +1,9 @@ import React from 'react'; -function TodoList(props){ +function TodoList({children}){ return( ); } From 095a330af5bdf5ec648f73ffbbeb9ca2fc64387e Mon Sep 17 00:00:00 2001 From: Misael-GC Date: Thu, 14 Sep 2023 10:36:33 -0600 Subject: [PATCH 03/36] =?UTF-8?q?preparando=20manipulaci=C3=B3n=20del=20DO?= =?UTF-8?q?M?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/TodoCounter.css | 8 ++++++++ src/TodoCounter.jsx | 5 +++-- 2 files changed, 11 insertions(+), 2 deletions(-) create mode 100644 src/TodoCounter.css diff --git a/src/TodoCounter.css b/src/TodoCounter.css new file mode 100644 index 000000000..0082c6576 --- /dev/null +++ b/src/TodoCounter.css @@ -0,0 +1,8 @@ +.TodoCounter{font-size:24px; + text-align:center;margin:0; + padding:48px;font-weight:400 +} + +.TodoCounter span{ + font-weight:700 +} diff --git a/src/TodoCounter.jsx b/src/TodoCounter.jsx index 23ded98ad..70f6e5dfd 100644 --- a/src/TodoCounter.jsx +++ b/src/TodoCounter.jsx @@ -1,9 +1,10 @@ import React from 'react'; +import "./TodoCounter.css" function TodoCounter({ total, completed }){ return( -

    - Has completado {completed} de {total} TODOs +

    + Has completado {completed} de {total} TODOs

    ); } From 8b374515508c4ced265ca9f4cb3289a44e632f1e Mon Sep 17 00:00:00 2001 From: Misael-GC Date: Thu, 14 Sep 2023 17:28:11 -0600 Subject: [PATCH 04/36] agregando boostrap, navbar, footer --- public/index.html | 2 ++ src/App.js | 4 ++++ src/Footer.css | 29 +++++++++++++++++++++++++++++ src/Footer.js | 21 +++++++++++++++++++++ src/Nadvar.css | 4 ++++ src/Nadvar.js | 33 +++++++++++++++++++++++++++++++++ 6 files changed, 93 insertions(+) create mode 100644 src/Footer.css create mode 100644 src/Footer.js create mode 100644 src/Nadvar.css create mode 100644 src/Nadvar.js diff --git a/public/index.html b/public/index.html index e5b37b15c..9974acf54 100644 --- a/public/index.html +++ b/public/index.html @@ -25,6 +25,7 @@ Learn how to configure a non-root public URL by running `npm run build`. --> React App + @@ -39,5 +40,6 @@ To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. --> + diff --git a/src/App.js b/src/App.js index 904e3c02c..f25c8faab 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,8 @@ import { TodoSearch } from './TodoSearch'; import { TodoList } from './TodoList'; import { TodoItem } from './TodoItem'; import { CreateTodoButton } from './CreateTodoButton'; +import { Nadvar } from './Nadvar'; +import { Footer } from './Footer'; import './App.css'; const defaultTodos = [ @@ -16,6 +18,7 @@ function App() { return ( // Ract.Fragments = <> <> + @@ -28,6 +31,7 @@ function App() { />))} +