Skip to content

fix: adding Context-React export #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
nachodiezgarcia wants to merge 2 commits into from
+82 −0
Closed

fix: adding Context-React export #10

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0e15340
fix: adding Context-React export
nachodiezgarcia Jun 9, 2026
a8d01d3
Merge branch 'main' into fix/02-fundamentos-react-review
nachodiezgarcia Jun 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 82 additions & 0 deletions 02-fundamentos-react/04-datos-globales.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@ Ahí entran los estados globales.

# Opción 1: Context de React

_.\src\01-Context-React.tsx_

```tsx
import React, { createContext, useContext, useState } from "react";

Expand Down Expand Up @@ -84,6 +86,86 @@ export const useNombre = () => {
};
```

_.\src\01-Context-React.tsx_

```diff
import React, { createContext, useContext, useState } from "react";

interface NombreContextValue {
nombre: string;
setNombre: (nuevoNombre: string) => void;
}

const NombreContext = createContext<NombreContextValue | null>(null);

interface Props {
children: React.ReactNode;
}

export const NombreProvider = ({ children }: Props) => {
const [nombre, setNombre] = useState("Pepe");

return (
<NombreContext.Provider value={{ nombre, setNombre }}>
{children}
</NombreContext.Provider>
);
};

export const useNombre = () => {
const context = useContext(NombreContext);

if (context === null) {
throw new Error("useNombre debe usarse dentro de NombreProvider");
}

return context;
};

+ const Header = () => {
+ return <header style={{ background: "#e0f0ff", padding: "8px" }}>Header</header>;
+ };
+
+ const Body = () => {
+ const { nombre, setNombre } = useNombre();
+ return (
+ <main style={{ padding: "8px" }}>
+ <p>Body: {nombre}</p>
+ <input value={nombre} onChange={(e) => setNombre(e.target.value)} />
+ </main>
+ );
+ };
+
+ const Footer = () => {
+ return <footer style={{ background: "#e0f0ff", padding: "8px" }}>Footer</footer>;
+ };
+
+ export const ContextDemo = () => (
+ <NombreProvider>
+ <Header />
+ <Body />
+ <Footer />
+ </NombreProvider>
+ );
```

__

```diff
+ import { ContextDemo } from "./01-Context-React"

function App() {

return (
<>
+ <ContextDemo />
</>
)
}

export default App
```

---

# Opción 2: Zustand
Expand Down