{"id":24073496,"url":"https://github.com/4geeksacademy/react-hello-webapp-alberto","last_synced_at":"2026-08-07T23:30:36.363Z","repository":{"id":268618482,"uuid":"904860963","full_name":"4GeeksAcademy/react-hello-webapp-Alberto","owner":"4GeeksAcademy","description":null,"archived":false,"fork":false,"pushed_at":"2025-02-11T19:10:14.000Z","size":475,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-11T20:24:44.470Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/4GeeksAcademy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-17T17:31:34.000Z","updated_at":"2025-02-11T19:10:18.000Z","dependencies_parsed_at":"2024-12-17T22:30:02.433Z","dependency_job_id":"26c97369-0ce4-4c1a-a8d3-e73966c1b4e0","html_url":"https://github.com/4GeeksAcademy/react-hello-webapp-Alberto","commit_stats":null,"previous_names":["4geeksacademy/react-hello-webapp-alberto"],"tags_count":0,"template":false,"template_full_name":"4GeeksAcademy/react-hello-webapp-deprecated","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4GeeksAcademy%2Freact-hello-webapp-Alberto","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4GeeksAcademy%2Freact-hello-webapp-Alberto/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4GeeksAcademy%2Freact-hello-webapp-Alberto/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4GeeksAcademy%2Freact-hello-webapp-Alberto/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/4GeeksAcademy","download_url":"https://codeload.github.com/4GeeksAcademy/react-hello-webapp-Alberto/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240941518,"owners_count":19882063,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-09T17:29:12.015Z","updated_at":"2026-08-07T23:30:31.039Z","avatar_url":"https://github.com/4GeeksAcademy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WebApp boilerplate with React JS\n[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io#https://github.com/4GeeksAcademy/react-hello-webapp.git)\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://www.loom.com/share/f37c6838b3f1496c95111e515e83dd9b\"\u003e\u003cimg src=\"https://github.com/4GeeksAcademy/react-hello-webapp/blob/master/src/img/how-to.png?raw=true\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\n### Requirements:\n- Make sure you are using node version 10\n\n1. Install the packages:\n```\n$ npm install\n```\n2. Create a .env file:\n```\n$ cp .env.example .env\n```\n3. Start coding! and the webpack dev server with live reload, for windows, mac, linux or Gitpod:\n\n```bash\n$ npm run start\n```\n\n### Styles\nYou can update the `styles/index.css` or create new `.css` files inside `styles/` and import them into your current scss or js files depending on your needs.\n\n### Components\nAdd more files into your `./src/js/components` or styles folder as you need them and import them into your current files as needed.\n\n**Note (New changes)**: Components have been converted into functions to support the use of hooks:\n* Instead of a class component, we're using a `const` function.\n* Class `constructor` and `state` have been replaced by `useState()` hooks.\n* `componentDidMount()` was replaced by `useEffect({}, [])` - It runs at mount thanks to the second parameter (`[]`).\n* `Actions` and `Store` still work the same way.\n\n```jsx\n// Previous \"Class Oriented\"\nexport class Demo extends React.Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\n\t\tthis.state = getState('code here');\n\t}\n}\n\n// New \"Functional Oriented\"\nexport const Demo = () =\u003e (\n\tconst [state, setState] = getState('code here'); //using the state (if needed)\n  const { store, actions } = useContext(Context); // using the context (if needed)\n\n);\n```\n\n💡Note: There is an example using the Context API inside `views/demo.js`;\n\n### Views (Components)\nAdd more files into your `./src/js/views` and import them in `./src/js/layout.jsx`.\n\n### Context\nThis boilerplate comes with a centralized general Context API. The file `./src/js/store/flux.js` has a base structure for the store, we encourage you to change it and adapt it to your needs.\n\nReact Context [docs](https://reactjs.org/docs/context.html)\nBreathCode Lesson [view](https://content.breatheco.de/lesson/react-hooks-explained)\n\nThe `Provider` is already set. You can consume from any component using the useContext hook to get the `store` and `actions` from the Context. Check `/views/demo.js` to see a demo.\n\n```jsx\nimport { Context } from \"../store/appContext\";\nconst MyComponentSuper = () =\u003e {\n  //here you use useContext to get store and actions\n  const { store, actions } = useContext(Context);\n  return \u003cdiv\u003e{/* you can use your actions or store inside the html */}\u003c/div\u003e\n}\n```\n\n## Publish your website!\n\n1. **Vercel:** The FREE recomended hosting provider is [vercel.com](https://vercel.com/), you can deploy in 1 minutes by typing the following 2 commands:\n\nLogin (you need to have an account):\n```sh\n$ npm i vercel -g \u0026\u0026 vercel login\n```\nDeploy:\n```sh\n$ vercel --prod\n```\n✎ Note: If you don't have an account just go to vercel.com, create a account and come back here.\n\n![Vercel example procedure to deploy](https://github.com/4GeeksAcademy/react-hello-webapp/blob/4b530ba091a981d3916cc6e960e370decaf2e234/docs/deploy.png?raw=true)\n\n2. **Github Pages:** This boilerplate is 100% compatible with the free github pages hosting.\nTo publish your website you need to push your code to your github repository and run the following command after:\n```sh\n$ npm run deploy\n```\nNote: You will need to [configure github pages for the branch gh-pages](https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/#enabling-github-pages-to-publish-your-site-from-master-or-gh-pages)\n\n## Contributors\n\nThis 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).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F4geeksacademy%2Freact-hello-webapp-alberto","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F4geeksacademy%2Freact-hello-webapp-alberto","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F4geeksacademy%2Freact-hello-webapp-alberto/lists"}