{"id":21459042,"url":"https://github.com/somikdatta/learning-react","last_synced_at":"2026-04-19T19:33:39.820Z","repository":{"id":39031717,"uuid":"284936219","full_name":"somikdatta/learning-react","owner":"somikdatta","description":"🌐 A repo for my very first React learning experience - courtesy of @QuentinWatt. 📃 Study notes available in repo README. ","archived":false,"fork":false,"pushed_at":"2023-01-06T13:17:18.000Z","size":2073,"stargazers_count":2,"open_issues_count":16,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-17T04:21:16.751Z","etag":null,"topics":["react-components","react-functional-components","react-hook","react-props","react-router","react-tutorial","react-views","reactjs"],"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/somikdatta.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}},"created_at":"2020-08-04T09:32:57.000Z","updated_at":"2021-01-16T06:10:05.000Z","dependencies_parsed_at":"2023-02-06T04:01:42.699Z","dependency_job_id":null,"html_url":"https://github.com/somikdatta/learning-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/somikdatta/learning-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/somikdatta%2Flearning-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/somikdatta%2Flearning-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/somikdatta%2Flearning-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/somikdatta%2Flearning-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/somikdatta","download_url":"https://codeload.github.com/somikdatta/learning-react/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/somikdatta%2Flearning-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32020695,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T20:23:30.271Z","status":"online","status_checked_at":"2026-04-19T02:00:07.110Z","response_time":55,"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":["react-components","react-functional-components","react-hook","react-props","react-router","react-tutorial","react-views","reactjs"],"created_at":"2024-11-23T06:26:22.517Z","updated_at":"2026-04-19T19:33:39.797Z","avatar_url":"https://github.com/somikdatta.png","language":"JavaScript","readme":"# Notes on my learnings\n\n##  Scripts\n\nIn the project directory, you can:\n\n### `yarn start`\n\nStarts a development server\n\n### `yarn test`\n\nLaunches the testner in the interactive watch mode.\n\n### `yarn build`\n\nBuilds the app for production to the `build` folder.\n\n#   Notes\n\n##  Lecture 1: React Components\n\n- React is shipped with a component i.e. App.js as an example and is a pretty great example of a stateless functional component.\n\n- All components must return at least one wrapper element.\n\n- There must be one parent wrapper for returning multiple components, e.g.\n\n    return (\n        \u003cdiv\u003e\n            \u003cdiv\u003e\u003c/div\u003e\n            \u003cdiv\u003e\u003c/div\u003e\n        \u003c/div\u003e\n    )\n\n- Components are of two kinds:\n1. Stateless Components or Functional Components\n2. Stateful Components or Class-Based Components\n\nExample 1: Stateless Component\n\n    function HelloWorld(){\n        return (\n        \u003ch1\u003eHello Drake\u003c/h1\u003e\n        )\n    }\n\nExample 2: Stateful Component\n\n    class HelloWorld extends React.Component{\n        render(){\n            return (\n            \u003ch1\u003eHello Drake\u003c/h1\u003e\n            )\n        }\n    }\n\n- To pass a component in another component\n\n    \u003cdiv\u003e\n      \u003cHelloWorld/\u003e\n    \u003c/div\u003e\n\n- Prop (Properties)\n \n    - Pass in a prop - \n\n        ```\n        \u003cHelloWorld name=\"Drake\"/\u003e\n        ```\n\n    - Access prop -\n\n        ```\n        function HelloWorld(props){\n            return (\n                \u003ch1\u003eHello {props.name}\u003c/h1\u003e\n            )\n        }\n        ```\n\n##  Lecture 2: Simple App Plus Minus \n\n`Features hooks, class based approach`\n\n- Functional approach\n\n    const [var, method_to_modify_var] = useState(initial_value_of_var)\n\nuseState(val) function returns a var and a function and that's the reason to declare the LHS const above\n\n    - To modify var we reference method_to_modify_var(new_data)\n\n##  Lecture 3: Conventional CSS class styling\n\n- Add styles in CSS file\n- Use the class name like so\n```\nfunction Header(){\n    return (\n        \u003cheader className=\"app-header\"\u003e\n            AppName\n        \u003c/header\u003e\n    )\n}\n```\n##  Lecture 4: Add Tailwind CSS\n\n- Remove App.css \u0026 all its imports\n- `yarn i tailwindcss`\n- `yarn tailwindcss init`\n- `yarn i postcss-cli \u0026\u0026 autoprefixer`\n- Create postcss.config.js with\n```\nmodule.exports = {\n    plugins: [\n        require('tailwindcss'),\n        require('autoprefixer')\n    ]\n}\n```\n- Modify package.json\n`\"build:css\": \"postcss src/index.css -o src/tailwind.css\",`\n`\"watch:css\": \"postcss src/index.css -o src/tailwind.css -w\",`\n`\"start\": \"yarn build:css \u0026\u0026 react-scripts start\",`\n`\"build\": \"yarn build:css \u0026\u0026 react-scripts build\",`\n\n- Restart server with yarn start\n\n##  Lecture 5: Conditional Rendering\n`Render HTML conditionally`\n\n- Using state for conditional rendering\n```\nlet menu=null;\n\n    if(showMenu){\n        menu = \n        \u003cdiv\u003e\n            The menu\n        \u003c/div\u003e\n    }\n```\n\n##  Lecture 6: React Spring (Animations)\n\n- Install react-spring\n`yarn add react-spring`\n- Define transitions\n```\nconst menuTransitions = useTransition(showMenu,null, {\n        from: {opacity: 0, transform: 'translateX(-100%)'},\n        enter: {opacity:1, transform: 'translateX(0%)'},\n        leave: {opacity: 0, transform: 'translateX(-100%)'}\n    })\n```\n- Use it as follows\n```\n{\n    maskTransitions.map(({item, key, props})=\u003e\n        item \u0026\u0026\n        \u003canimated.div\n            key={key}\n            style={props}\n            className=\"bg-black-t-50 fixed top-0 left-0 w-full h-full z-50\"\n            onClick={()=\u003e setShowMenu(false)}\u003e\n        \u003c/animated.div\u003e\n    )\n}\n```\n##  Lecture 6: React Router\n\n- Install React Router DOM\n`yarn add react-router-dom`\n- Add necessary imports\n```import {\n  BrowserRouter as Router,\n  Switch,\n  Route,\n  Link\n} from 'react-router-dom'\n```\n- Make sure `Router` encapsulates at the topmost level\n\n- Router can contain `Link` which defines navigation URL\n\n- Router can contain `Switch` which in turn contains `Route` which acts as a router outlet for specified links\n\n## Lecture 7: Axios - HTTP Requests\n\n- Install axios by\n`yarn add axios`\n- axios works on the mechanisms of promise (then, catch - resolve, reject)\n- Implementation\n```\naxios.method(url).then().catch()\n```\n\n## Lecture 8: Hooks\n\n- Hooks let us use state and other React features without using a class i.e. through classless components\n\n- Two introductory hooks\n\n1. useState(value)\n```\nconst [state,stateSetterMethod] = useState(initialValue)\n```\n`Example: const [count, setCount] = useState(0);`\n\n2. A great substitute for componentDidMount, componentDidUpdate, componentWillUnmount put together\n- No clearnup required\n- Tell React that component needs to do something after rendering\n```\nuseEffect(() =\u003e {\n    document.title = `You clicked ${count} times`;\n  });\n```\n\n- Rules\n1. Always call Hooks at the top-level, not within loops, conditionals, nested functions\n2. Only call Hooks from React function components or other custom Hooks","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsomikdatta%2Flearning-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsomikdatta%2Flearning-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsomikdatta%2Flearning-react/lists"}