programadorEmerson · June 23, 2023 21:13 · Apr 27, 2023 · Apr 27, 2023 · Apr 27, 2023 · Apr 27, 2023
diff --git a/checklist-context.md b/checklist-context.md
@@ -3,7 +3,7 @@
 *Vamos começar criando nossos arquivos dentro da pasta `src`:*
 
 - [ ] Criar uma pasta `contexts`;
-- [ ] Dentro da pasta `contexts` vamos criar um arquivo `myContext.js`;
+- [ ] Dentro da pasta `contexts` vamos criar um arquivo `MyContext.js`;
 
 *Dentro do arquivo `MyContext.js`:*
 

diff --git a/checklist-context.md b/checklist-context.md
@@ -2,10 +2,10 @@
 
 *Vamos começar criando nossos arquivos dentro da pasta `src`:*
 
-- [ ] Criar uma pasta `context`;
-- [ ] Dentro da pasta `context` vamos criar um arquivo `myContext.js`;
+- [ ] Criar uma pasta `contexts`;
+- [ ] Dentro da pasta `contexts` vamos criar um arquivo `myContext.js`;
 
-*Dentro do arquivo `myContext.js`:*
+*Dentro do arquivo `MyContext.js`:*
 
 - [ ] Importar do react o `createContext`;
 - [ ] Criar uma variável `context` que vai receber o resultado do `createContext()`;
@@ -25,7 +25,7 @@ export default context;
 
 Lembrando que o Provider é um componente que vai conter nossos estados globais da aplicação, geralmente importamos ele no `index.js` que é o ponto mais alto da hierarquia de componentes para prover nossos estados para todos os seus filhos.
 
-- [ ] Dentro da pasta `context` vamos criar um arquivo `myProvider.js`;
+- [ ] Dentro da pasta `context` vamos criar um arquivo `MyProvider.js`;
 - [ ] Vamos importar nosso `MyContext` nesse arquivo e criar o componente `Provider`;
 - [ ] Recebemos via props os `children` da árvore de componentes;
 - [ ] No retorno do Provider vamos chamar via tag o nosso `MyContext.Provider` que recebe um `value` como prop;
@@ -39,7 +39,7 @@ OBS: A construção dos estados dentro do Provider depende do componente ser fun
 // EXEMPLO
 
 import React, { useState, useMemo } from 'react';
-import MyContext from './myContext';
+import MyContext from './MyContext';
 
 const INITIAL_STATE1 = { nome: 'Xablau1', idade: 101 };
 const INITIAL_STATE2 = { nome: 'Xablau2', idade: 102 };
@@ -66,7 +66,7 @@ export default Provider;
 - [ ] Vamos importar o nosso componente `Provider` englobando nosso app;
 
 ```js
-import Provider from './context/myProvider'
+import Provider from './context/MyProvider'
 
 <Provider>
    <App />
@@ -81,7 +81,7 @@ Por fim só precisamos resgatar esses dados em qualquer componente da nossa apli
 // Uso com hook useContext
 
 import React, { useContext } from 'react';
-import MyContext from './context/myContext';
+import MyContext from './context/MyContext';
 
 const value = useContext(MyContext); // recebe o value provido pelo Contexto
 ```
diff --git a/checklist-context.md b/checklist-context.md
@@ -2,7 +2,7 @@
 
 *Vamos começar criando nossos arquivos dentro da pasta `src`:*
 
-- [x] Criar uma pasta `context`;
+- [ ] Criar uma pasta `context`;
 - [ ] Dentro da pasta `context` vamos criar um arquivo `myContext.js`;
 
 *Dentro do arquivo `myContext.js`:*

diff --git a/checklist-context.md b/checklist-context.md
@@ -2,7 +2,7 @@
 
 *Vamos começar criando nossos arquivos dentro da pasta `src`:*
 
-- [ ] Criar uma pasta `context`;
+- [x] Criar uma pasta `context`;
 - [ ] Dentro da pasta `context` vamos criar um arquivo `myContext.js`;
 
 *Dentro do arquivo `myContext.js`:*

diff --git a/checklist-context.md b/checklist-context.md
@@ -0,0 +1,87 @@
+# Checklist do Context API
+
+*Vamos começar criando nossos arquivos dentro da pasta `src`:*
+
+- [ ] Criar uma pasta `context`;
+- [ ] Dentro da pasta `context` vamos criar um arquivo `myContext.js`;
+
+*Dentro do arquivo `myContext.js`:*
+
+- [ ] Importar do react o `createContext`;
+- [ ] Criar uma variável `context` que vai receber o resultado do `createContext()`;
+- [ ] Exportar a nossa variável;
+
+Exemplo:
+
+```js
+import { createContext } from 'react';
+
+const context = createContext();
+
+export default context;
+```
+
+### Criando o `Provider`
+
+Lembrando que o Provider é um componente que vai conter nossos estados globais da aplicação, geralmente importamos ele no `index.js` que é o ponto mais alto da hierarquia de componentes para prover nossos estados para todos os seus filhos.
+
+- [ ] Dentro da pasta `context` vamos criar um arquivo `myProvider.js`;
+- [ ] Vamos importar nosso `MyContext` nesse arquivo e criar o componente `Provider`;
+- [ ] Recebemos via props os `children` da árvore de componentes;
+- [ ] No retorno do Provider vamos chamar via tag o nosso `MyContext.Provider` que recebe um `value` como prop;
+- [ ] Passamos dentro da tag os nossos `children` que serão alimentados pelo `value` do Provider;
+
+OBS: A construção dos estados dentro do Provider depende do componente ser funcional ou de classe:
+ - Para classes utilizamos o `this.state`;
+ - Para funções utilizamos hooks, `useState`;
+
+```js
+// EXEMPLO
+
+import React, { useState, useMemo } from 'react';
+import MyContext from './myContext';
+
+const INITIAL_STATE1 = { nome: 'Xablau1', idade: 101 };
+const INITIAL_STATE2 = { nome: 'Xablau2', idade: 102 };
+
+function Provider({ children }) {
+  const [state1, setState1] = useState(INITIAL_STATE1);
+  const [state2, setState2] = useState(INITIAL_STATE2);
+
+  const values = useMemo(() => ({
+    state1, state2, setState1, setState2
+  }), [state1, state2, setState1, setState2])
+
+  return (
+    <MyContext.Provider value={ values }>
+      {children}
+    </MyContext.Provider>
+  )
+}
+
+export default Provider;
+```
+
+### No arquivo `index.js`
+- [ ] Vamos importar o nosso componente `Provider` englobando nosso app;
+
+```js
+import Provider from './context/myProvider'
+
+<Provider>
+   <App />
+</Provider>
+```
+
+Agora toda nossa aplicação está sendo alimentada pelos dados disponibilizados no value do nosso Provider.
+Por fim só precisamos resgatar esses dados em qualquer componente da nossa aplicação.
+
+
+```js
+// Uso com hook useContext
+
+import React, { useContext } from 'react';
+import MyContext from './context/myContext';
+
+const value = useContext(MyContext); // recebe o value provido pelo Contexto
+```
No results found