{"id":18886699,"url":"https://github.com/aburd/react-rails","last_synced_at":"2026-02-23T18:30:18.557Z","repository":{"id":91442386,"uuid":"107273698","full_name":"aburd/react-rails","owner":"aburd","description":null,"archived":false,"fork":false,"pushed_at":"2017-10-18T08:04:47.000Z","size":12728,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-12-31T05:16:44.210Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Ruby","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/aburd.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2017-10-17T13:38:56.000Z","updated_at":"2017-10-18T08:04:48.000Z","dependencies_parsed_at":"2024-05-03T00:47:04.377Z","dependency_job_id":null,"html_url":"https://github.com/aburd/react-rails","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aburd%2Freact-rails","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aburd%2Freact-rails/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aburd%2Freact-rails/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aburd%2Freact-rails/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aburd","download_url":"https://codeload.github.com/aburd/react-rails/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239859566,"owners_count":19708861,"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":"2024-11-08T07:30:04.629Z","updated_at":"2025-02-20T14:52:47.561Z","avatar_url":"https://github.com/aburd.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"# README\n\n## Introduction\n\nThis project was made using [Webpacker](https://github.com/rails/webpacker). It allows for easy integration of JS libraries that require precompilation. In additon, Hot Module Reloading has been enabled for the dev version of this project, so any changes made to React files will automatically be refreshed in the browser.\n\n## Running the project\n\nGit clone, cd into the directory and run the following commands in your terminal:\n\n```\nbundle install\nbundle exec foreman start -f Procfile.dev\n```\n\n## Front-end Notes\n\n### Important Directories\n\n```\n/app\n  |_ /javascript\n  |  |_ /packs\n  |  |_ /src\n  |\n  |_ /assets\n    |_ /javascripts\n    |_ /stylesheets\n```\n\nWebpacker, by default, puts all its entry point files inside `app/javascript/packs` and you only put the entry point file. Other files related to react are to be put elsewhere. Therefore, the bulk of React code will be put in the `app/javascript/src` directory, however, if you're looking for the final `ReactDOM.render` call, it's in the `packs/main.js` file.\n\nThe majority of styling will be embedded into the components through JS, but when the need arises, styling is done in the `assets/stylesheets` folder ala RoR defaults.\n\n### Webpacker Notes\n\nIn our config file, Webpacker aliases the `app/assets` directory, so React Code has convenient access to resources like images. For example,\n\n```\nconst fanpCharacter = require('images/character.png');\n```\n\n`styled-components` still cannot access assets from the asset pipeline, so import the images into the JS directly and use accordingly.\n\n```\nconst fanpCharacter = require('images/character.png');\n\nconst MyAwesomeBackground = styled.div`\n  background-image: url(${fanpCharacter})\n`\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faburd%2Freact-rails","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faburd%2Freact-rails","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faburd%2Freact-rails/lists"}