├── .devcontainer ├── devcontainer.json └── welcome.js ├── .github └── settings.yml ├── .gitignore ├── .gitpod.yml ├── .htaccess ├── .vscode └── settings.json ├── 4geeks.ico ├── README.es.md ├── README.md ├── deploy-to-github.js ├── index.html ├── learn.json ├── open-in-gitpod.svg ├── package-lock.json ├── package.json ├── src ├── img │ └── rigo-baby.jpg ├── js │ ├── components │ │ └── Home.jsx │ └── main.jsx └── styles │ └── index.css ├── vercel.json └── vite.config.js /.devcontainer/devcontainer.json: -------------------------------------------------------------------------------- 1 | // For format details, see https://aka.ms/devcontainer.json. For config options, see the 2 | // README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node 3 | { 4 | "name": "Node.js", 5 | // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile 6 | "image": "mcr.microsoft.com/devcontainers/javascript-node:0-20", 7 | 8 | // Features to add to the dev container. More info: https://containers.dev/features. 9 | // "features": {}, 10 | 11 | // Use 'forwardPorts' to make a list of ports inside the container available locally. 12 | "forwardPorts": [3000], 13 | 14 | // Use 'postCreateCommand' to run commands after the container is created. 15 | "postCreateCommand": "npm install && node .devcontainer/welcome.js" 16 | 17 | // Configure tool-specific properties. 18 | // "customizations": {}, 19 | 20 | // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root. 21 | // "remoteUser": "root" 22 | } 23 | -------------------------------------------------------------------------------- /.devcontainer/welcome.js: -------------------------------------------------------------------------------- 1 | console.log("Welcome!") -------------------------------------------------------------------------------- /.github/settings.yml: -------------------------------------------------------------------------------- 1 | repository: 2 | has_wiki: false 3 | 4 | # Labels: define labels for Issues and Pull Requests 5 | labels: 6 | - name: "bug" 7 | color: c10000 8 | - name: ":nerd_face: 4geeks student" 9 | color: 7057ff 10 | - name: "enhancement" 11 | color: a2eeef 12 | - name: "first-timers-only" 13 | color: 69db89 14 | - name: "good first issue" 15 | color: 7057ff 16 | - name: "help wanted" 17 | color: 008672 18 | - name: ":star: P1" 19 | color: fbca04 20 | - name: ":star: P2" 21 | color: fbca04 22 | - name: ":memo: bc-writter" 23 | color: 98bde2 24 | - name: ":computer: bc-coder" 25 | color: 98bde2 26 | - name: ":beetle: bc-inspector" 27 | color: 98bde2 28 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | 26 | # ignore all files starting with . 27 | .* 28 | 29 | # track this file .gitignore (i.e. do NOT ignore it) 30 | !.gitignore 31 | !.gitpod.yml 32 | !.devcontainer 33 | !.github 34 | !.vscode 35 | php_errorlog 36 | .log 37 | 38 | # track this file .gitignore (i.e. do NOT ignore it) 39 | !composer.json 40 | !webpack.config.js 41 | !package.json 42 | !webpack.production.js 43 | !webpack.development.js 44 | 45 | # track readme.md in the root (i.e. do NOT ignore it) 46 | !README.md 47 | 48 | # ignore OS generated files 49 | ehthumbs.db 50 | Thumbs.db 51 | 52 | # ignore Editor files 53 | *.sublime-project 54 | *.sublime-workspace 55 | *.komodoproject 56 | 57 | # ignore log files and databases 58 | *.log 59 | *.sql 60 | *.sqlite 61 | 62 | # ignore compiled files 63 | *.com 64 | *.class 65 | *.dll 66 | *.exe 67 | *.o 68 | *.so 69 | 70 | # ignore packaged files 71 | *.7z 72 | *.dmg 73 | *.gz 74 | *.iso 75 | *.jar 76 | *.rar 77 | *.tar 78 | *.zip 79 | 80 | # ignore node/grunt dependency directories 81 | node_modules/ 82 | 83 | # ignore the dist directory were our bundle files are going to be 84 | public/* 85 | !public/index.html 86 | 87 | dist/* 88 | !dist/index.html 89 | 90 | !.gitkeep 91 | !.htaccess 92 | !.eslintrc 93 | .now -------------------------------------------------------------------------------- /.gitpod.yml: -------------------------------------------------------------------------------- 1 | ports: 2 | - port: 8080 3 | onOpen: open-preview 4 | visibility: public 5 | 6 | tasks: 7 | - before: nvm install 16 8 | init: npm install 9 | command: npm run start 10 | 11 | 12 | vscode: 13 | extensions: 14 | - esbenp.prettier-vscode 15 | -------------------------------------------------------------------------------- /.htaccess: -------------------------------------------------------------------------------- 1 | 2 | 3 | RewriteEngine On 4 | RewriteBase / 5 | RewriteRule ^index\.html$ - [L] 6 | RewriteCond %{REQUEST_FILENAME} !-f 7 | RewriteCond %{REQUEST_FILENAME} !-d 8 | RewriteCond %{REQUEST_FILENAME} !-l 9 | RewriteRule . /index.html [L] 10 | 11 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnSave": true, 3 | "editor.defaultFormatter": "esbenp.prettier-vscode", 4 | "workbench.editorAssociations": { 5 | "*.md": "vscode.markdown.preview.editor" 6 | } 7 | } -------------------------------------------------------------------------------- /4geeks.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/4GeeksAcademy/react-hello/4ddd0828dc2290a40a6b8a6999ce9fcc6523f34f/4geeks.ico -------------------------------------------------------------------------------- /README.es.md: -------------------------------------------------------------------------------- 1 | # Hello World con la platilla de React 2 | 3 | > 🎥 Esta plantilla [cuenta con un video tutorial](https://youtu.be/oGpSVBsq7BA), para verlo haz clic aquí. 4 | 5 | Comienza a codificar una aplicación con React. 6 | 7 | > Si estás trabajando localmente en lugar de usar Codespaces o Gitpod, por favor sigue los [pasos de instalación local](#instalación-local-sáltalo-si-estás-trabajando-en-codespaces-o-gitpod) y regresa a esta parte del README. 8 | 9 | ## ¿Cómo comenzar a codificar? 10 | 11 | - Instala los paquetes con `$ npm install`. 12 | - Ejecuta el servidor de webpack con `$ npm run start`. 13 | 14 | Puedes actualizar los archivos `styles/index.css` o `js/index.js` dependiendo de tus necesidades. 15 | Agrega más archivos en las carpetas `./src/js/components` o `styles` según los necesites. 16 | 17 | ## Instalación local (sáltalo si estás trabajando en Codespaces o Gitpod) 18 | 19 | Descarga el boilerplate usando Git: 20 | 21 | ```bash 22 | $ git clone https://github.com/4GeeksAcademy/react-hello.git 23 | $ cd react-hello 24 | ``` 25 | ## ¡Publica tu sitio web! 26 | 27 | Este boilerplate es 100% compatible con los servicios de alojamiento gratuitos [GitHub Pages](https://pages.github.com/) y [Vercel](https://vercel.com/). 28 | 29 | Solo toma 2 minutos desplegarlo, [haz clic aquí para comenzar el proceso](https://4geeks.com/docs/start/deploy-to-render-com). 30 | 31 | ## Otras características 32 | 33 | - **Formateo automático de código**: Uso de [Prettier](https://prettier.io/) para la indentación y formateo automático del código. 34 | - **Reporte de errores**: Uso de [ESLint](https://eslint.org/) para un mejor reporte de errores. 35 | 36 | ## Contribuidores 37 | 38 | Esta plantilla fue creada como parte del [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) de 4Geeks Academy por [Alejandro Sánchez](https://twitter.com/alesanchezr) y otros contribuyentes. 39 | Descubre más sobre nuestro [Curso de Desarrollo Full Stack](https://4geeksacademy.com/us/coding-bootcamps/part-time-full-stack-developer) y [Bootcamp de Ciencia de Datos](https://4geeksacademy.com/us/coding-bootcamps/datascience-machine-learning). 40 | 41 | 42 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Hello World with React boilerplate 2 | 3 | Start coding a react application 4 | 5 | > If you are working locally instead of using codespaces or gitpod, please follow [local installation steps](#local-installation-skip-if-you-are-working-on-codespaces-or-gitpod) and come back to this part of the readme. 6 | 7 | ## How to start coding? 8 | 9 | - Install the packages with `$ npm install`. 10 | - Run the webpack server with `$ npm run start` 11 | 12 | You can update the `styles/index.css` or `js/index.js` depending on your needs. 13 | Add more files into your, `./src/js/components` or styles folder as you need them. 14 | 15 | ## Local Installation (skip if you are working on codespaces or gitpod) 16 | 17 | Download the boilerplate using git 18 | 19 | ``` 20 | $ git clone https://github.com/4GeeksAcademy/react-hello.git 21 | $ cd react-hello 22 | ``` 23 | 24 | ## Publish your website! 25 | 26 | This boilerplate is 100% compatible with the free [github pages](https://pages.github.com/) and [vercel](https://vercel.com/) hosting. 27 | 28 | It takes just 2 minutes to deploy, [click here to start the process](https://4geeks.com/docs/start/deploy-to-render-com). 29 | 30 | ## Other features 31 | 32 | - Automatic Code Formatting: Use of [Prettier](https://prettier.io/) for automatic code indentation and formatting. 33 | - Error reporting: Use of [eslint](https://eslint.org/) for better error reporting. 34 | 35 | ### Contributors 36 | 37 | This template was built as part of the 4Geeks Academy [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) by [Alejandro Sanchez](https://twitter.com/alesanchezr) and many other contributors. Find out more about our [Full Stack Developer Course](https://4geeksacademy.com/us/coding-bootcamps/part-time-full-stack-developer), and [Data Science Bootcamp](https://4geeksacademy.com/us/coding-bootcamps/datascience-machine-learning). 38 | 39 | You can find other templates and resources like this at the [school github page](https://github.com/4geeksacademy/). 40 | -------------------------------------------------------------------------------- /deploy-to-github.js: -------------------------------------------------------------------------------- 1 | var ghpages = require('gh-pages'); 2 | var Console = require('bc-console'); 3 | var webpack = require('webpack'); 4 | var path = require('path'); 5 | var fs = require('fs'); 6 | 7 | var remoteOriginUrl = require('remote-origin-url'); 8 | var gh = require('parse-github-url'); 9 | 10 | if (!fs.existsSync(path.resolve(__dirname,'.git'))){ 11 | Console.error("No repository found on this project"); 12 | Console.help("Follow this steps to create a new repository for your project: http://kbroman.org/github_tutorial/pages/init.html"); 13 | return; 14 | } 15 | 16 | const origin = remoteOriginUrl.sync(); 17 | if(!origin || origin==''){ 18 | Console.error("No remote origin has been found on this repository"); 19 | Console.help(`Check your remote by doing: 20 | $ git remote get-url origin 21 | 22 | Add your remote by doing: 23 | $ git remote add origin 24 | `); 25 | return; 26 | } 27 | Console.info("The remote was found successfully, starting the deploy from here: "+origin); 28 | 29 | const repository = gh(origin); 30 | const compiler = webpack(require(path.resolve(__dirname, 'webpack.config.js'))); 31 | compiler.run((err, stats) => { 32 | if (err || stats.hasErrors()) { 33 | console.log(stats.toString({ 34 | colors: true 35 | })); 36 | Console.error("There was an error compiling, review above"); 37 | return; 38 | } 39 | Console.info("Your code compiled successfully, proceding to deploy..."); 40 | ghpages.publish('public', function(err) { 41 | if(err){ 42 | console.error(err); 43 | Console.error("There was an error publishing your website"); 44 | return; 45 | } 46 | //https://.github.io/ 47 | Console.success(`Your website has been deployed successfully here: https://${repository["owner"]}.github.io/${repository["name"]}/`); 48 | Console.info(`Changes on your deployed website take 10 min aprox to show, please be patient. Happy coding!`); 49 | }); 50 | }); 51 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Hello Rigo with Vanilla.js 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /learn.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": { 3 | "en": "React.js Starter Template for Beginners", 4 | "es": "Plantilla Inicial para empezar proyectos de React.js para principiantes" 5 | }, 6 | "description": { 7 | "en": "This is a starter template for React.js projects. It includes a basic folder structure, a sample component, styles and other usual configurations to quicly kickstart your project.", 8 | "es": "Este es una plantilla inicial para proyectos de React.js. Incluye una estructura básica de carpetas, un componente de ejemplo, estilos y otras configuraciones habituales para iniciar rápidamente tu proyecto." 9 | }, 10 | "repository": "https://github.com/4geeksacademy/react-hello-vite", 11 | "preview": "", 12 | "projectType": "template", 13 | "difficulty": "beginner", 14 | "technologies": ["React.js", "Javascript", "Vite"] 15 | } 16 | -------------------------------------------------------------------------------- /open-in-gitpod.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | in Gitpod 7 | 8 | 9 | Open 10 | 11 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "project", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "start": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "bootstrap": "^5.2.2", 14 | "react": "^18.2.0", 15 | "react-dom": "^18.2.0" 16 | }, 17 | "devDependencies": { 18 | "@types/react": "^18.2.66", 19 | "@types/react-dom": "^18.2.22", 20 | "@vitejs/plugin-react-swc": "^3.5.0", 21 | "eslint": "^8.57.0", 22 | "eslint-plugin-react": "^7.34.1", 23 | "eslint-plugin-react-hooks": "^4.6.0", 24 | "eslint-plugin-react-refresh": "^0.4.6", 25 | "vite": "^5.2.0" 26 | }, 27 | "engines": { 28 | "node": ">=20.0.0" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/img/rigo-baby.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/4GeeksAcademy/react-hello/4ddd0828dc2290a40a6b8a6999ce9fcc6523f34f/src/img/rigo-baby.jpg -------------------------------------------------------------------------------- /src/js/components/Home.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | //include images into your bundle 4 | import rigoImage from "../../img/rigo-baby.jpg"; 5 | 6 | //create your first component 7 | const Home = () => { 8 | return ( 9 |
10 | 11 | 12 |

Hello Rigo!

13 |

14 | 15 |

16 | 17 | If you see this green button... bootstrap is working... 18 | 19 |

20 | Made by{" "} 21 | 4Geeks Academy, with 22 | love! 23 |

24 |
25 | ); 26 | }; 27 | 28 | export default Home; -------------------------------------------------------------------------------- /src/js/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | 4 | //Bootstrap 5 | import "bootstrap/dist/css/bootstrap.min.css"; 6 | import "bootstrap" 7 | 8 | // index.css' 9 | import '../styles/index.css' 10 | 11 | // components 12 | import Home from './components/Home'; 13 | 14 | ReactDOM.createRoot(document.getElementById('root')).render( 15 | 16 | 17 | , 18 | ) 19 | -------------------------------------------------------------------------------- /src/styles/index.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | You can write your own styles here... 4 | 5 | 6 | ...Or you can use the import command to include 7 | other sylesheets into your bunde as well, e.j: 8 | 9 | import 'relative/path/to/stylesheet.scss'; 10 | 11 | */ 12 | -------------------------------------------------------------------------------- /vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "builds": [{ 3 | "src": "package.json", 4 | "use": "@vercel/static-build" 5 | }], 6 | "rewrites": [{ 7 | "source": "/(.*)", 8 | "destination": "/index.html" 9 | }] 10 | } -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { 2 | defineConfig 3 | } from 'vite' 4 | import react from '@vitejs/plugin-react-swc' 5 | 6 | // https://vitejs.dev/config/ 7 | export default defineConfig({ 8 | plugins: [react()], 9 | server: { 10 | port: 3000 11 | }, 12 | build: { 13 | outDir: 'dist', 14 | } 15 | }) --------------------------------------------------------------------------------