{"id":20601977,"url":"https://github.com/bessouat40/reactjs-tutorial-project","last_synced_at":"2026-04-11T06:43:44.160Z","repository":{"id":224915909,"uuid":"613561663","full_name":"Bessouat40/reactjs-tutorial-project","owner":"Bessouat40","description":"Tutorial for ReactJS use","archived":false,"fork":false,"pushed_at":"2024-02-28T10:50:12.000Z","size":307,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-17T01:48:50.715Z","etag":null,"topics":["beginner-friendly","beginner-project","javascript","reactjs","tutorial","tutorial-code","tutorial-sourcecode"],"latest_commit_sha":null,"homepage":"","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/Bessouat40.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}},"created_at":"2023-03-13T20:15:50.000Z","updated_at":"2024-01-08T17:11:37.000Z","dependencies_parsed_at":"2024-02-28T11:48:21.652Z","dependency_job_id":"7d978a45-e704-429d-8c71-03317c183fd3","html_url":"https://github.com/Bessouat40/reactjs-tutorial-project","commit_stats":null,"previous_names":["bessouat40/reactjs-tutorial-project"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bessouat40%2Freactjs-tutorial-project","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bessouat40%2Freactjs-tutorial-project/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bessouat40%2Freactjs-tutorial-project/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bessouat40%2Freactjs-tutorial-project/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Bessouat40","download_url":"https://codeload.github.com/Bessouat40/reactjs-tutorial-project/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242241300,"owners_count":20095347,"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":["beginner-friendly","beginner-project","javascript","reactjs","tutorial","tutorial-code","tutorial-sourcecode"],"created_at":"2024-11-16T09:12:35.868Z","updated_at":"2025-12-31T00:50:58.395Z","avatar_url":"https://github.com/Bessouat40.png","language":"JavaScript","readme":"# Example project\n\nThis project is a little tutorial for ReactJS.\n\n## Table of contents\n\n1. [Usefull ressources](#usefull-ressources)\n2. [Usage](#usage)\n3. [Best practices](#best-practices)\n   1. [Component declaration](#component-declaration)\n   2. [Function declaration](#function-declaration)\n4. [Start tutorial](#start-tutorial)\n5. [First button](#first-button)\n6. [Hook](#hook)\n7. [Second component](#second-component)\n8. [Second component](#second-component)\n   1. [Display component](#display-component)\n9. [Webapp organization](#webapp-organization)\n\n## Usefull ressources\n\nThe ReactJS bible : `https://mui.com/`\n\nIf you want to declare a component, search in google : `react-mui button` and go to this site, you will have a large documentation with many examples:\n\n**_Ex :_**\n`https://mui.com/material-ui/react-button/`\n\n## Prerequisites\n\n- First install node on your computer\n\n**_Ressources :_**\n\n`https://radixweb.com/blog/installing-npm-and-nodejs-on-windows-and-mac`\n\n- Clone this repo\n- Then install npm dependencies :\n\n```bash\nnpm i\n```\n\n## Best practices\n\n### Component declaration\n\nA component is part of our webapp. It's composed by some objects (buttons, text, ...).\n\nWe declare our components as constants, it's a state of the art good practice. It makes the code more readable.\n\nWe declare all states and functions outside the return.\nThe render part is declared in the return part.\n\n```javascript\nconst SimpleButton = () =\u003e {\n  return \u003cButton\u003eClick here\u003c/Button\u003e;\n};\n```\n\nWe need to export our component at the end of our file :\n\n```javascript\nexport default SimpleButton;\n```\n\n### Function declaration\n\nWe declare our function as constants to :\n\n```javascript\nconst uselessFunction = () =\u003e {\n  return \"I'm useless...\";\n};\n```\n\n## Start tutorial\n\n- Open this project with your favorite IDE and go to `./src/components/App.js`\n\nDuring this tutorial, you juste need to change a single value :\n\n```javascript\nconst App = () =\u003e {\n  return \u003cStateAlignExample /\u003e; \u003c------- this value\n};\n```\n\n- Run the webapp :\n\n```bash\nnpm start\n```\n\nNow your webapp is running at `http://localhost:8000`.\n\n## First button\n\nReplace `StateAlignExample` by `SimpleButton`.\nGo to `http://localhost:8000`and see your first component display !!!\n\nThis button don't do anything at the moment.\n\n## Hook\n\nHooks are JavaScript functions that manage the state's behaviour and side effects by isolating them from a component.\n\n## Second component\n\nIn this step, we want to build a button that increase a value.\n\nFirst, we initialize a state for our value :\n\n```javascript\nconst [number, setNumber] = useState(0);\n```\n\nOur value is named `number`and we associate a function `setNumber` that update it's value. We initialize is value at 0.\n\n**_Ex :_**\n\n```javascript\nsetNumber(12) ----\u003e result : number = 12\n```\n\nWe add an `IconButton` with a bin icon for number value reset.\n\n### Display component\n\nReplace `SimpleButton` by `StateChange`.\nGo to `http://localhost:8000`and see your first component display !!!\n\n## Webapp organization\n\nIf we want to organize our components, we need to use `Stack`.\n\n**_Ressources :_**\n`https://mui.com/material-ui/react-stack/`\n\nWith `Stack` we can organize our webapp as we want.\nWe can write `Stack` inside `Stack` if we want a more complexe component structure.\n\n### Display organize component\n\nReplace `StateChange` by `StateChangeAlign`.\nGo to `http://localhost:8000`and see your first component display !!!\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbessouat40%2Freactjs-tutorial-project","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbessouat40%2Freactjs-tutorial-project","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbessouat40%2Freactjs-tutorial-project/lists"}