├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.js ├── firebase └── credenciales.js ├── index.js └── styles ├── global.css └── reset.css /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Plantilla de React y Firebase 2 | 3 | Este proyecto es creado con [Create React App](https://github.com/facebook/create-react-app) y la adición de Firebase. 4 | 5 | ## Instrucciones 6 | 7 | Antes de comenzar a trabajar no olvides añadir las credenciales de tu aplicación en src/firebase/credenciales.js 8 | 9 | - Ejecuta npm install 10 | - Añade tus credenciales en src/firebase/credenciales 11 | - Ejecuta npm start para correr el ambiente de desarrollo 12 | - ¡A escribir código! 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-firebase", 3 | "author": "lasfito", 4 | "version": "0.1.0", 5 | "private": true, 6 | "dependencies": { 7 | "@testing-library/jest-dom": "^5.14.1", 8 | "@testing-library/react": "^11.2.7", 9 | "@testing-library/user-event": "^12.8.3", 10 | "firebase": "^9.1.3", 11 | "react": "^17.0.2", 12 | "react-dom": "^17.0.2", 13 | "react-scripts": "4.0.3", 14 | "web-vitals": "^1.1.2" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test", 20 | "eject": "react-scripts eject" 21 | }, 22 | "eslintConfig": { 23 | "extends": [ 24 | "react-app", 25 | "react-app/jest" 26 | ] 27 | }, 28 | "browserslist": { 29 | "production": [ 30 | ">0.2%", 31 | "not dead", 32 | "not op_mini all" 33 | ], 34 | "development": [ 35 | "last 1 chrome version", 36 | "last 1 firefox version", 37 | "last 1 safari version" 38 | ] 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lasfito/react-firebase/1dcc447f458738d5d348cab79e700b3764fc3b06/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 15 | 24 | Mi app 25 | 26 | 27 | 30 |
31 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lasfito/react-firebase/1dcc447f458738d5d348cab79e700b3764fc3b06/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lasfito/react-firebase/1dcc447f458738d5d348cab79e700b3764fc3b06/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React-Firebase", 3 | "name": "Plantilla de React y Firebase", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | //Importamos la aplicación/credenciales 3 | import firebaseApp from "./firebase/credenciales"; 4 | 5 | // Conforme se necesite, importar los demás servicios y funciones. Por ejemplo: 6 | 7 | /* import { getAuth, onAuthStateChanged } from "firebase/auth"; 8 | const auth = getAuth(firebaseApp); */ 9 | 10 | function App() { 11 | return ( 12 |
13 |

Hola

14 | 15 |
16 | ); 17 | } 18 | 19 | export default App; 20 | -------------------------------------------------------------------------------- /src/firebase/credenciales.js: -------------------------------------------------------------------------------- 1 | // Importamos la función para inicializar la aplicación de Firebase 2 | import { initializeApp } from "firebase/app"; 3 | 4 | // Añade aquí tus credenciales 5 | const firebaseConfig = { 6 | apiKey: "...", 7 | authDomain: "...", 8 | projectId: "...", 9 | storageBucket: "...", 10 | messagingSenderId: "...", 11 | appId: "...", 12 | }; 13 | 14 | // Inicializamos la aplicación y la guardamos en firebaseApp 15 | const firebaseApp = initializeApp(firebaseConfig); 16 | // Exportamos firebaseApp para poder utilizarla en cualquier lugar de la aplicación 17 | export default firebaseApp; 18 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import App from "./App"; 4 | //incorporamos estilos via global 5 | import "./styles/global.css"; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById("root") 12 | ); 13 | -------------------------------------------------------------------------------- /src/styles/global.css: -------------------------------------------------------------------------------- 1 | /* ELIMINAMOS LOS ESTILOS DE NAVEGADOR */ 2 | @import url("./reset.css"); 3 | 4 | /* AÑADE AQUÍ TUS ESTILOS */ 5 | 6 | -------------------------------------------------------------------------------- /src/styles/reset.css: -------------------------------------------------------------------------------- 1 | /* ESTO RESETEA/CANCELA TODOS LOS ESTILOS QUE PROVEE EL NAVEGADOR */ 2 | 3 | html, 4 | body, 5 | div, 6 | span, 7 | applet, 8 | object, 9 | iframe, 10 | h1, 11 | h2, 12 | h3, 13 | h4, 14 | h5, 15 | h6, 16 | p, 17 | blockquote, 18 | pre, 19 | a, 20 | abbr, 21 | acronym, 22 | address, 23 | big, 24 | cite, 25 | code, 26 | del, 27 | dfn, 28 | em, 29 | img, 30 | ins, 31 | kbd, 32 | q, 33 | s, 34 | samp, 35 | small, 36 | strike, 37 | strong, 38 | sub, 39 | sup, 40 | tt, 41 | var, 42 | b, 43 | u, 44 | i, 45 | center, 46 | dl, 47 | dt, 48 | dd, 49 | ol, 50 | ul, 51 | li, 52 | fieldset, 53 | form, 54 | label, 55 | legend, 56 | table, 57 | caption, 58 | tbody, 59 | tfoot, 60 | thead, 61 | tr, 62 | th, 63 | td, 64 | article, 65 | aside, 66 | canvas, 67 | details, 68 | embed, 69 | figure, 70 | figcaption, 71 | footer, 72 | header, 73 | hgroup, 74 | menu, 75 | nav, 76 | output, 77 | ruby, 78 | section, 79 | summary, 80 | time, 81 | mark, 82 | audio, 83 | video { 84 | margin: 0; 85 | padding: 0; 86 | border: 0; 87 | font-size: 100%; 88 | font: inherit; 89 | vertical-align: baseline; 90 | } 91 | article, 92 | aside, 93 | details, 94 | figcaption, 95 | figure, 96 | footer, 97 | header, 98 | hgroup, 99 | menu, 100 | nav, 101 | section { 102 | display: block; 103 | } 104 | body { 105 | line-height: 1; 106 | } 107 | ol, 108 | ul { 109 | list-style: none; 110 | } 111 | blockquote, 112 | q { 113 | quotes: none; 114 | } 115 | blockquote:before, 116 | blockquote:after, 117 | q:before, 118 | q:after { 119 | content: ""; 120 | content: none; 121 | } 122 | table { 123 | border-collapse: collapse; 124 | border-spacing: 0; 125 | } 126 | --------------------------------------------------------------------------------