{"id":26446502,"url":"https://github.com/valera-rozuvan/react-from-scratch","last_synced_at":"2026-04-12T15:03:11.878Z","repository":{"id":279463010,"uuid":"938886199","full_name":"valera-rozuvan/react-from-scratch","owner":"valera-rozuvan","description":"just React, just WebPack - minimal NPM dependencies","archived":false,"fork":false,"pushed_at":"2025-02-25T17:18:48.000Z","size":56,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-17T18:01:00.259Z","etag":null,"topics":["react","typescript","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/valera-rozuvan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2025-02-25T16:51:06.000Z","updated_at":"2025-02-26T07:01:11.000Z","dependencies_parsed_at":"2025-02-25T18:29:35.301Z","dependency_job_id":"a50bc6b7-3875-4123-8a42-744c8ed9d974","html_url":"https://github.com/valera-rozuvan/react-from-scratch","commit_stats":null,"previous_names":["valera-rozuvan/react-from-scratch"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valera-rozuvan%2Freact-from-scratch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valera-rozuvan%2Freact-from-scratch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valera-rozuvan%2Freact-from-scratch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valera-rozuvan%2Freact-from-scratch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/valera-rozuvan","download_url":"https://codeload.github.com/valera-rozuvan/react-from-scratch/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244217950,"owners_count":20417677,"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":["react","typescript","webpack"],"created_at":"2025-03-18T12:18:01.035Z","updated_at":"2026-04-12T15:03:11.865Z","avatar_url":"https://github.com/valera-rozuvan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-from-scratch\n\njust React, just WebPack - minimal NPM dependencies\n\n## Rationale\n\nUsing latest React.js, WebPack, and TypeScript bootstrap a working application with the minimal required NPM dependencies. As of latest commit, the project is using ONLY the following essential packages:\n\n```text\n    \"react\": \"19.0.0\",\n    \"react-dom\": \"19.0.0\",\n    \"ts-loader\": \"9.5.2\",\n    \"typescript\": \"5.7.3\",\n    \"webpack\": \"5.98.0\",\n    \"webpack-cli\": \"6.0.1\",\n```\n\nThis project not only introduces a hello-world type starter kit, but goes on to show how to build something useful with it. Currently, this is a small application which generates GPG keys online. See it live at [gpg-keys-online.rozuvan.net](https://gpg-keys-online.rozuvan.net/).\n\n## Pre-requisites\n\nYou need [Node.js](https://nodejs.org/) version `16.x` or higher. Look into using [Node Version Manager](https://github.com/nvm-sh/nvm) if you aren't already using it.\n\n## Building\n\nClone this repository, change to it, and:\n\n```shell\ngit clone https://github.com/valera-rozuvan/react-from-scratch.git\ncd ./react-from-scratch\nnpm install -g uglify-js@3.19.3\nnpm install\n./build.sh\n```\n\nThis will generate a `./build` folder.\n\n## Running\n\nUse a server of your choice to serve the static files. For example, you can use the awesome [http-server](https://www.npmjs.com/package/http-server) NPM dependency like so:\n\n```shell\nnpm install -g http-server\nhttp-server --proxy \"http://localhost:8080?\" --port 8080 --cors -a 0.0.0.0 ./build\n```\n\nOnce the server is running, open the browser and navigate to [http://localhost:8080](http://localhost:8080) (use the proper port number!).\n\n## Debugging\n\nBy default, the script `./build.sh` is running [uglify-js](https://www.npmjs.com/package/uglify-js) to minify the build, and strip the source-map. If you are doing local development, and want to debug your application, you need the source-map. Simply comment out `STEP 4` in the `./build.sh` file.\n\n## Auto re-build\n\nThere is a helper script provided to watch for file changes, and re-build the application. You can run it in a separate terminal window:\n\n```shell\nnode ./watch.js\n```\n\nThe build folder will be automatically re-generated on each file save. Run the static file server in a separate tab for the full development experience!\n\n## YouTube tutorial\n\nI recorded several YouTube videos explaining the motivation behind this project, and how things work. You can watch these at:\n\n- [Setup React.js from scratch using TypeScript and WebPack](https://www.youtube.com/watch?v=FXvbgRYWxHc\u0026list=PL9R9HKRuWxbh3aDCiSS-wl4LUjcm-LgKN\u0026index=2)\n- [React with WebPack from scratch - part 2](https://www.youtube.com/watch?v=9QaqjGDx0xE\u0026list=PL9R9HKRuWxbh3aDCiSS-wl4LUjcm-LgKN\u0026index=1)\n- [React app using minimal NPM dependencies - part 3](https://www.youtube.com/watch?v=9Hwc4XftT8A\u0026list=PL9R9HKRuWxbh3aDCiSS-wl4LUjcm-LgKN\u0026index=1)\n\n## Next steps\n\nFor a more out-of-the-box experience, but maintaining the minimalist approach, consider [react-webpack-starter](https://github.com/valera-rozuvan/react-webpack-starter). That project is what would happen to this project if we go on to add routing, state management, asset (images, styles) loading, environment variables, linting, and builds for production.\n\n## License\n\nThis project is licensed under the MIT license. See [LICENSE](LICENSE) for more information.\n\nCopyright (c) 2025 [Valera Rozuvan](https://valera.rozuvan.net/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvalera-rozuvan%2Freact-from-scratch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvalera-rozuvan%2Freact-from-scratch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvalera-rozuvan%2Freact-from-scratch/lists"}