├── .devcontainer ├── devcontainer.json └── welcome.js ├── .eslintrc ├── .github └── settings.yml ├── .gitignore ├── .gitpod.yml ├── .htaccess ├── .vscode └── settings.json ├── 4geeks.ico ├── CHANGELOG.md ├── README.md ├── deploy-to-github.js ├── dist └── index.html ├── docs ├── DEPLOY.md └── MANUAL_INSTALATION.md ├── learn.json ├── open-in-gitpod.svg ├── package-lock.json ├── package.json ├── public ├── .gitkeep └── index.html ├── src ├── img │ └── rigo-baby.jpg ├── js │ ├── component │ │ └── home.jsx │ └── index.js └── styles │ └── index.css ├── template.html └── webpack.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-16", 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!") -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "@babel/eslint-parser", 3 | "plugins": [ 4 | "react" 5 | ], 6 | "settings": { 7 | "react": { 8 | "version": "detect" 9 | } 10 | }, 11 | "env": { 12 | "browser": true, 13 | "es6": true 14 | }, 15 | "rules": { 16 | "strict":0, 17 | "no-unused-vars": 0, 18 | "no-mixed-spaces-and-tabs": 0, 19 | "no-debugger": 0, 20 | "no-console": 1, 21 | "semi": ["error", "always"], 22 | "allowImportExportEverywhere": 0, 23 | "comma-dangle": [1, { //when to use the last comma 24 | "arrays": "never", 25 | "objects": "never", 26 | "imports": "never", 27 | "exports": "never", 28 | "functions": "ignore", 29 | }], 30 | "react/prop-types": [2] 31 | }, 32 | "extends": ["eslint:recommended", "plugin:react/recommended"] 33 | } 34 | -------------------------------------------------------------------------------- /.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 | # ignore all files starting with . 2 | .* 3 | 4 | # track this file .gitignore (i.e. do NOT ignore it) 5 | !.gitignore 6 | !.gitpod.yml 7 | !.devcontainer 8 | !.github 9 | !.vscode 10 | php_errorlog 11 | .log 12 | 13 | # track this file .gitignore (i.e. do NOT ignore it) 14 | !composer.json 15 | !webpack.config.js 16 | !package.json 17 | !webpack.production.js 18 | !webpack.development.js 19 | 20 | # track readme.md in the root (i.e. do NOT ignore it) 21 | !README.md 22 | 23 | # ignore OS generated files 24 | ehthumbs.db 25 | Thumbs.db 26 | 27 | # ignore Editor files 28 | *.sublime-project 29 | *.sublime-workspace 30 | *.komodoproject 31 | 32 | # ignore log files and databases 33 | *.log 34 | *.sql 35 | *.sqlite 36 | 37 | # ignore compiled files 38 | *.com 39 | *.class 40 | *.dll 41 | *.exe 42 | *.o 43 | *.so 44 | 45 | # ignore packaged files 46 | *.7z 47 | *.dmg 48 | *.gz 49 | *.iso 50 | *.jar 51 | *.rar 52 | *.tar 53 | *.zip 54 | 55 | # ignore node/grunt dependency directories 56 | node_modules/ 57 | 58 | # ignore the dist directory were our bundle files are going to be 59 | public/* 60 | !public/index.html 61 | 62 | dist/* 63 | !dist/index.html 64 | 65 | !.gitkeep 66 | !.htaccess 67 | !.eslintrc 68 | .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-deprecated/910bfbf623c12c8c6e4167b35f1b2515b3565599/4geeks.ico -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | December 6, 2021 4 | 5 | - Upgraded all packages to latest version: Webpack v5, React 17, etc. 6 | - Disabled esLint. 7 | - The hot reload is not broken, we need to review how to implemented with the new webpack dev server because the `public` property is not allowed anymore as a paratmeter for the deServer, we tried the following iwthout any luck: 8 | 9 | ```js 10 | devServer: { 11 | port, 12 | hot: true, 13 | allowedHosts: "all", 14 | historyApiFallback: true, 15 | static: { 16 | directory: path.resolve(__dirname, "dist"), 17 | }, 18 | client: { 19 | webSocketURL: publicUrl 20 | }, 21 | }, 22 | ``` 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | > ⚠️ This repository is deprecated and has no maintenance; we recommend using the [React Hello Vite](https://github.com/4GeeksAcademy/react-hello-vite) template instead. 4 | 5 | # Hello World with React boilerplate 6 | 7 | Start coding a react application 8 | 9 | 10 | 11 | ## How to start coding? 12 | 13 | - Install the packages with `$ npm install`. 14 | - Run the webpack server with `$ npm run start` 15 | 16 | You can update the `styles/index.css` or `js/index.js` depending on your needs. 17 | Add more files into your, `./src/js/components` or styles folder as you need them. 18 | 19 | ## Local Installation (skip if you are working on codespaces or gitpod) 20 | 21 | Download the boilerplate using git 22 | 23 | ``` 24 | $ git clone https://github.com/4GeeksAcademy/react-hello.git 25 | $ cd react-hello 26 | ``` 27 | 28 | ## Publish your website! 29 | 30 | This boilerplate is 100% compatible with the free [github pages](https://pages.github.com/) and [vercel](https://vercel.com/) hosting. 31 | 32 | It takes just 2 minutes to deploy, [click here to start the process](https://github.com/4GeeksAcademy/react-hello/blob/master/docs/DEPLOY.md). 33 | 34 | ## Other features 35 | 36 | - Automatic Code Formatting: Use of [Prettier](https://prettier.io/) for automatic code indentation and formatting. 37 | - Error reporting: Use of [eslint](https://eslint.org/) for better error reporting. 38 | - Hot Deploy: Use of [Webpack Development Server](https://webpack.js.org/configuration/dev-server/) for hot deploy and live reload. 39 | - One-command publish of the code to github pages with `npm run deploy:github`. 40 | - Babel 7 (really fast). 41 | 42 | ### Contributors 43 | 44 | 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). 45 | 46 | You can find other templates and resources like this at the [school github page](https://github.com/4geeksacademy/). 47 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Hello React World 5 | 6 | 7 |
8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/DEPLOY.md: -------------------------------------------------------------------------------- 1 | # How to deploy your website using this boilerplate 2 | 3 | First make sure to choose your platform: 4 | 5 | ## Deploying to Github pages: 6 | 7 | It's great for small projects that don't require your own domain or real use with users and growth, for example: Personal portfolio websites. 8 | 9 | ```sh 10 | $ npm run deploy:github 11 | ``` 12 | 13 | ## Deploying to `Vercel` (recomended) 14 | 15 | This hosting is ideal for production ready website and requires only two steps. 16 | 17 | - Create an account on vercel.com and come back to this tutorial. 18 | - After creating the account type on the command line: `$ vercel` and follow the steps. 19 | -------------------------------------------------------------------------------- /docs/MANUAL_INSTALATION.md: -------------------------------------------------------------------------------- 1 | # React Hello World 2 | 3 | 1) Create a new NPM Package 4 | ```sh 5 | $ npm init -Y 6 | ``` 7 | 2) Add the webpack module bundler 8 | ```sh 9 | $ npm install --save-dev webpack webpack-cli 10 | ``` 11 | 3) Create a webpack.config.js 12 | 13 | ``` 14 | const path = require('path'); 15 | 16 | module.exports = { 17 | entry: './src/js/index.js', 18 | output: { 19 | filename: 'bundle.js', 20 | path: path.resolve(__dirname, 'dist') 21 | } 22 | }; 23 | ``` 24 | 4) Install babel 25 | 26 | ```sh 27 | $ npm install --save-dev babel-core babel-loader babel-cli babel-preset-env 28 | ``` 29 | 30 | Configure your webpack.config.js to use the babel loader 31 | ``` 32 | const path = require('path'); 33 | 34 | module.exports = { 35 | entry: './src/js/index.js', 36 | output: { 37 | filename: 'bundle.js', 38 | path: path.resolve(__dirname, 'dist') 39 | }, 40 | module: { 41 | loaders: [ 42 | { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } 43 | ] 44 | } 45 | }; 46 | ``` 47 | 48 | Also configure your package.json to use the "env" and "react" presets. 49 | ```json 50 | ... 51 | "babel":{ 52 | "presets": [ 53 | "env", 54 | "react" 55 | ] 56 | }, 57 | ... 58 | ``` 59 | 60 | 5) Install react pnm libraries (react is just a library) 61 | 62 | ```sh 63 | npm install --save react react-dom 64 | ``` 65 | 66 | ## Important note: 67 | 68 | If you want include Images, Fonts or any other types of files rather than JS you will have to add the loaders into the webpack.config.js and install the respective npm packages (image-loader, style-loader, etc). 69 | -------------------------------------------------------------------------------- /learn.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "React Template ideal for learners", 3 | "preview": "https://repository-images.githubusercontent.com/114170702/2101e080-78e0-11ea-98b1-b0f94e5e9dc7" 4 | 5 | } 6 | -------------------------------------------------------------------------------- /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": "react-hello", 3 | "version": "1.0.1", 4 | "engines": { 5 | "node": "16.x" 6 | }, 7 | "description": "", 8 | "main": "index.js", 9 | "scripts": { 10 | "start": "webpack-dev-server --mode development", 11 | "build": "webpack --mode development", 12 | "deploy:github": "node deploy-to-github.js" 13 | }, 14 | "author": "Alejandro Sanchez", 15 | "license": "ISC", 16 | "devDependencies": { 17 | "@babel/cli": "^7.16.0", 18 | "@babel/core": "^7.16.0", 19 | "@babel/plugin-proposal-class-properties": "^7.16.0", 20 | "@babel/plugin-transform-runtime": "^7.16.4", 21 | "@babel/preset-env": "^7.16.4", 22 | "@babel/preset-react": "^7.16.0", 23 | "@babel/runtime": "^7.16.3", 24 | "babel-eslint": "^10.1.0", 25 | "babel-loader": "^8.2.3", 26 | "babel-plugin-transform-class-properties": "^6.24.1", 27 | "bc-console": "0.0.2", 28 | "css-loader": "^6.5.1", 29 | "error-overlay-webpack-plugin": "^1.0.0", 30 | "eslint": "^8.4.0", 31 | "eslint-plugin-react": "^7.27.1", 32 | "eslint-webpack-plugin": "^3.1.1", 33 | "file-loader": "^6.2.0", 34 | "gh-pages": "^3.2.3", 35 | "html-loader": "^3.0.1", 36 | "html-webpack-plugin": "^5.5.0", 37 | "parse-github-url": "^1.0.2", 38 | "remote-origin-url": "^2.0.0", 39 | "style-loader": "^3.3.1", 40 | "webpack": "^5.65.0", 41 | "webpack-cli": "^4.9.1", 42 | "webpack-dev-server": "^4.6.0" 43 | }, 44 | "babel": { 45 | "presets": [ 46 | "@babel/preset-env", 47 | "@babel/preset-react" 48 | ], 49 | "plugins": [ 50 | "@babel/plugin-proposal-class-properties", 51 | [ 52 | "@babel/plugin-transform-runtime", 53 | { 54 | "regenerator": true 55 | } 56 | ] 57 | ] 58 | }, 59 | "dependencies": { 60 | "prop-types": "^15.7.2", 61 | "query-string": "^7.0.1", 62 | "react": "^18.3.1", 63 | "react-dom": "^18.3.1", 64 | "react-polyfills": "0.0.1", 65 | "react-router": "^6.0.2" 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /public/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/4GeeksAcademy/react-hello-deprecated/910bfbf623c12c8c6e4167b35f1b2515b3565599/public/.gitkeep -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hello Rigo with Vanilla.js 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/img/rigo-baby.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/4GeeksAcademy/react-hello-deprecated/910bfbf623c12c8c6e4167b35f1b2515b3565599/src/img/rigo-baby.jpg -------------------------------------------------------------------------------- /src/js/component/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 |

Hello Rigo!

11 |

12 | 13 |

14 | 15 | If you see this green button... bootstrap is working... 16 | 17 |

18 | Made by{" "} 19 | 4Geeks Academy, with 20 | love! 21 |

22 |
23 | ); 24 | }; 25 | 26 | export default Home; 27 | -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | //import react into the bundle 2 | import React from "react"; 3 | import ReactDOM from "react-dom/client"; 4 | 5 | // include your styles into the webpack bundle 6 | import "../styles/index.css"; 7 | 8 | //import your own components 9 | import Home from "./component/home.jsx"; 10 | 11 | //render your react application 12 | ReactDOM.createRoot(document.getElementById('app')).render(); 13 | 14 | -------------------------------------------------------------------------------- /src/styles/index.css: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | 4 | You can write your own styles here... 5 | 6 | 7 | ...Or you can use the import command to include 8 | other sylesheets into your bunde as well, e.j: 9 | 10 | import 'relative/path/to/stylesheet.scss'; 11 | 12 | */ 13 | -------------------------------------------------------------------------------- /template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hello Rigo with Vanilla.js 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | const path = require('path'); 3 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | const ESLintPlugin = require('eslint-webpack-plugin'); 5 | const ErrorOverlayPlugin = require('error-overlay-webpack-plugin'); 6 | 7 | const port = 3000; 8 | let publicUrl = `ws://localhost:${port}/ws`; 9 | //only for gitpod 10 | if(process.env.GITPOD_WORKSPACE_URL){ 11 | const [schema, host] = process.env.GITPOD_WORKSPACE_URL.split('://'); 12 | publicUrl = `wss://${port}-${host}/ws`; 13 | } 14 | //only for codespaces 15 | if(process.env.CODESPACE_NAME){ 16 | publicUrl = `wss://${process.env.CODESPACE_NAME}-${port}.app.github.dev/ws`; 17 | } 18 | 19 | module.exports = { 20 | entry: [ 21 | './src/js/index.js' 22 | ], 23 | output: { 24 | filename: 'bundle.js', 25 | path: path.resolve(__dirname, 'public'), 26 | publicPath: '/' 27 | }, 28 | module: { 29 | rules: [ 30 | { 31 | test: /\.(js|jsx)$/, 32 | exclude: /node_modules/, 33 | use: ['babel-loader'] 34 | }, 35 | { 36 | test: /\.(css)$/, use: [{ 37 | loader: "style-loader" // creates style nodes from JS strings 38 | }, { 39 | loader: "css-loader" // translates CSS into CommonJS 40 | }] 41 | }, //css only files 42 | { 43 | test: /\.(png|svg|jpg|gif)$/, use: { 44 | loader: 'file-loader', 45 | options: { name: '[name].[ext]' } 46 | } 47 | }, //for images 48 | { test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/, use: ['file-loader'] } //for fonts 49 | ] 50 | }, 51 | resolve: { 52 | extensions: ['*', '.js', '.jsx'] 53 | }, 54 | devtool: "source-map", 55 | devServer: { 56 | port, 57 | hot: true, 58 | allowedHosts: "all", 59 | historyApiFallback: true, 60 | static: { 61 | directory: path.resolve(__dirname, "dist"), 62 | }, 63 | client: { 64 | webSocketURL: publicUrl 65 | }, 66 | }, 67 | plugins: [ 68 | new webpack.HotModuleReplacementPlugin(), 69 | // new ESLintPlugin({ 70 | // files: path.resolve(__dirname, "src"), 71 | // }), 72 | new HtmlWebpackPlugin({ 73 | favicon: '4geeks.ico', 74 | template: 'template.html' 75 | }), 76 | ] 77 | }; 78 | --------------------------------------------------------------------------------