{"id":18268640,"url":"https://github.com/jharsh1202/learn-react-from-zero","last_synced_at":"2025-07-29T05:35:15.236Z","repository":{"id":186284257,"uuid":"674934339","full_name":"jharsh1202/learn-react-from-zero","owner":"jharsh1202","description":null,"archived":false,"fork":false,"pushed_at":"2023-08-05T08:59:24.000Z","size":57,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"initial","last_synced_at":"2025-04-09T02:47:22.527Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/jharsh1202.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":"2023-08-05T08:06:44.000Z","updated_at":"2023-08-05T08:59:27.000Z","dependencies_parsed_at":null,"dependency_job_id":"af8790f6-a7af-482e-9f90-ea761f036394","html_url":"https://github.com/jharsh1202/learn-react-from-zero","commit_stats":null,"previous_names":["jharsh1202/learn-react-from-zero"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jharsh1202/learn-react-from-zero","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jharsh1202%2Flearn-react-from-zero","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jharsh1202%2Flearn-react-from-zero/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jharsh1202%2Flearn-react-from-zero/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jharsh1202%2Flearn-react-from-zero/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jharsh1202","download_url":"https://codeload.github.com/jharsh1202/learn-react-from-zero/tar.gz/refs/heads/initial","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jharsh1202%2Flearn-react-from-zero/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267633682,"owners_count":24118778,"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","status":"online","status_checked_at":"2025-07-29T02:00:12.549Z","response_time":2574,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-05T11:32:38.877Z","updated_at":"2025-07-29T05:35:15.214Z","avatar_url":"https://github.com/jharsh1202.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Get started with Frontend from zero using Nextjs documentation: \n\nfor Js and React Basics (https://nextjs.org/learn/foundations/from-javascript-to-react)\n\nRead about React, DOM, React DOM methods\n\nwithout react, working with DOM is verbose\n\u003c!-- index.html --\u003e\n\u003chtml\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"app\"\u003e\u003c/div\u003e\n\n    \u003cscript type=\"text/javascript\"\u003e\n      // Select the div element with 'app' id\n      const app = document.getElementById('app');\n\n      // Create a new H1 element\n      const header = document.createElement('h1');\n\n      // Create a new text node for the H1 element\n      const headerContent = document.createTextNode(\n        'Develop. Preview. Ship. 🚀',\n      );\n\n      // Append the text to the H1 element\n      header.appendChild(headerContent);\n\n      // Place the H1 element inside the div\n      app.appendChild(header);\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n\n\nwith React\n\n\u003c!-- index.html --\u003e\n\u003chtml\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"app\"\u003e\u003c/div\u003e\n    \n    //load scripts from unpkg\n    \u003cscript src=\"https://unpkg.com/react@17/umd/react.development.js\"\u003e\u003c/script\u003e. //react (declarative UI library)\n    \u003cscript src=\"https://unpkg.com/react-dom@17/umd/react-dom.development.js\"\u003e\u003c/script\u003e // react-dom (DOM-specific methods that enable you to use React with the DOM)\n\n    \u003cscript type=\"text/javascript\"\u003e\n      const app = document.getElementById('app');\n      ReactDOM.render(\u003ch1\u003eDevelop. Preview. Ship. 🚀\u003c/h1\u003e, app);\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n\n\nthis will throw an error though as browsers don’t understand JSX, so you’ll need a JavaScript compiler, like  Babel, to transform JSX -\u003e Js.\n\nadd Babel\n\u003cscript src=\"https://unpkg.com/@babel/standalone/babel.min.js\"\u003e\u003c/script\u003e //also you will need to inform Babel what code to transform by changing the script type to type=text/jsx.\n\n\nHTML above represents the initial page content, whereas the DOM represents the updated page content which was changed by the JavaScript code you wrote, instead tell React what you want to happen to the user interface, and React will figure out the steps of how to update the DOM on your behalf.\n\n\n\n---------------------------------------------------------------------------------------------------------------------------------------\n\nJavaScript basics for React (Basic) (https://nextjs.org/learn/foundations/from-javascript-to-react/essential-javascript-react)\n\nReact (https://react.dev/learn/ and https://react.dev/learn/describing-the-ui)\n\n---------------------------------------------------------------------------------------------------------------------------------------\nNextJs (https://nextjs.org/docs/getting-started/installation)\n- install node.js from (https://nodejs.org/en)\n- create nextjs app with (npx create-next-app)\n    - What is your project named? \u003cyour-app-name\u003e\n    - Would you like to use TypeScript? \u003cNo/Yes\u003e (strongly typed superset of JS allows to catch errors during development)\n    - Would you like to use ESLint? \u003cNo/Yes\u003e (analyze and identify patterns of problematic or questionable code, helps maintaining code quality, enforce coding standards, and catch potential errors and bugs)\n    - Would you like to use Tailwind CSS? \u003cNo/Yes\u003e (CSS frameworks used for building user interfaces)\n    - Would you like to use `src/` directory? \u003cNo/Yes\u003e (ideal for larger projects)\n    - Would you like to use App Router? (recommended) \u003cNo/Yes\u003e (yes as recommended)\n    - Would you like to customize the default import alias? \u003cNo/Yes\u003e (No)\n- npm install\n- npm run build\n- npm start (check http://localhost:3000 on your browser)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjharsh1202%2Flearn-react-from-zero","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjharsh1202%2Flearn-react-from-zero","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjharsh1202%2Flearn-react-from-zero/lists"}