{"id":21662922,"url":"https://github.com/urunov/frontend-modern-application","last_synced_at":"2026-04-13T15:31:25.112Z","repository":{"id":122919903,"uuid":"346270417","full_name":"Urunov/Frontend-Modern-Application","owner":"Urunov","description":"Modern Application Structure and Possible technology","archived":false,"fork":false,"pushed_at":"2021-10-12T06:24:53.000Z","size":4750,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-20T05:49:10.439Z","etag":null,"topics":["lifecycle","material-ui","practical-react","prevprops","props","react","react-hooks","react-player","reactjs","storybook","yarn"],"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/Urunov.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":"2021-03-10T07:32:35.000Z","updated_at":"2022-03-16T18:03:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"f8d4aba4-ef09-4d7f-bc30-0cab0670dbdd","html_url":"https://github.com/Urunov/Frontend-Modern-Application","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Urunov/Frontend-Modern-Application","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Urunov%2FFrontend-Modern-Application","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Urunov%2FFrontend-Modern-Application/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Urunov%2FFrontend-Modern-Application/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Urunov%2FFrontend-Modern-Application/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Urunov","download_url":"https://codeload.github.com/Urunov/Frontend-Modern-Application/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Urunov%2FFrontend-Modern-Application/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31759221,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T15:25:13.801Z","status":"ssl_error","status_checked_at":"2026-04-13T15:25:09.162Z","response_time":93,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["lifecycle","material-ui","practical-react","prevprops","props","react","react-hooks","react-player","reactjs","storybook","yarn"],"created_at":"2024-11-25T10:18:43.280Z","updated_at":"2026-04-13T15:31:25.094Z","avatar_url":"https://github.com/Urunov.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Modern Application \n\n\n## Frontend\n \n## 1. Storybook  \n   * Storybook is a development environment and playground for UI components\n   * Create cmomponents independently\n   * Showcase those components interactively in an isolation developlment developed\n   * Ability to view the different components that have already been developed\n   * View what are the different props that those developed components accept\n   * Ability to visually showcase those componenets to your stake holders for feedback\n   * Dynamically change props, accessibility score\n   * Update version on 2020 August.\n   \n\n  1.1 React + Storybook \n  \n  ** Commands\n   \u003e\u003e Create react app: [npx create-react-app my-app]\n   \n    \u003e\u003e Storybook v5: [npx -p @storybook/cli sb init] \n    \u003e\u003e Storybook v6: [npx sb init]  \n -----------\n \n # 2. ReactJs\n \n   ##  React Fundamentals\n   * What is React ?\n       \u003e\u003e Open Source library for building user interfaces \n       \u003e\u003e Not a framework\n       \u003e\u003e \n       \u003e\u003e Rich ecosystem\n       \u003e\u003e \n       \u003e\u003e ES6 - let\u0026const, arrow functions, template literals, default parameters, object literals, rest and spread operators and destructing assignment.\n       \u003e\u003e \n       \u003e\u003e npx is npm package runner\n       \u003e\u003e \n       \u003e\u003e Document Object Module(DOM)\n          \n       | MSA  |  SPA | \n       | :---        |    :----:   |   \n       | Multi-Page Application | Single-Page Appication|  \n       \n       \n       \n       \u003e\u003e Functional Components / Class Components\n       \n       | Functional Components  | Class Components | \n       | :---        |    :----:   |   \n       | Simple Functions  | More feature rich | \n       | Use Func components (as possible)   | Maintain their own private data - state|\n       | Absence of 'this' keyword |  Complex UI logic |\n       | Solution without using state | Provide lifecycle hooks |\n       | Mainly responsible for the UI\t| Stateful / Smart / Container|\n       | Stateless/ Dumb/ Presentational | |\n       \n   * JSX \n        \u003e\u003e JavaScript XML (JSX) - Extension to the JavaScript langugage syntax.\n        \u003e\u003e \n        \u003e\u003e Write XML-like code for elements and components\n        \u003e\u003e \n        \u003e\u003e JSX tags have a tag name, attributes, and children\n        \u003e\u003e \n        \u003e\u003e JSX is not a necessity to write React application\n        \u003e\u003e \n        \u003e\u003e JSX makes your react code simpler and elegant\n        \u003e\u003e \n        \u003e\u003e JSX ultimately transpiles to pure JavaScript which is understood by the browsers. \n        \u003e\u003e    \n       \n   ## React Practical \n   * [Icons](https://react-icons.github.io/react-icons/icons?name=md)\n    \u003e\u003e Command: \u003e\u003e npm install react-icons --save\n    \u003e\u003e\n    \u003e\u003e YARN \u003e\u003e yarn add react-icons\n   * [Toast Notifications](https://github.com/fkhadra/react-toastify)\n    \u003e\u003e Yarn \u003e\u003e yarn add react-tostify\n   * [React Modal](https://github.com/reactjs/react-modal)\n    \u003e\u003e Yarn \u003e\u003e yarn add react-modal\n    \u003e\u003e \n    \u003e\u003e Style-ReactModal\u003e\u003e [link](https://reactcommunity.org/react-modal/)\n   * Tooltip\n    \u003e\u003e YARN\u003e\u003e yarn add '@tippy.js/react'\n   * [Credit-Card](https://github.com/amarofashion/react-credit-cards)  \n   ![Screen Shot 2021-04-29 at 6 21 12 PM](https://user-images.githubusercontent.com/11626327/116529255-b622ad80-a917-11eb-9c5e-769302b0b406.png)\n\n   \u003e\u003e YARN \u003e\u003e yarn add react-credit-cards\n   * [MDX-DESC-Presentation](https://github.com/jxnblk/mdx-deck)\n   \u003e\u003e \n   \u003e\u003e YARN\u003e\u003e yarn add -D mdx-deck\n   * [React-Player](https://github.com/cookpete/react-player)\n   \u003e\u003e YARN \u003e\u003e yarn add react-player\n   * [Loading](https://github.com/davidhu2000/react-spinners)\n     \u003e\u003e YARN \u003e\u003e yarn add react-spinners\n     * [Chart](https://github.com/reactchartjs/react-chartjs-2)\n     \u003e\u003e YARN \u003e\u003e yarn add react-chartjs-2 chart.js\n     \u003e\u003e \n     \u003e\u003e rcc  (Auto generation of code react in IntelliJ)\n     \u003e\u003e rce (Auto generation of code react in VSC)\n\n   * React Advanced Topics\n   \u003e\u003e List and Key\n      \u003e\u003e Keys give the elements a stable identity\n     \u003e\u003e Keys help React identity which items have changed, are added, or are removed.\n     \u003e\u003e Help in efficient update of the user interface.\n  \n## React Lifecycle\n  * (1) Mounting - When an instance of a component is being created and inserted into the DOM\n      \u003e\u003e constructor, static getDerivedStateFromProps, render and componentDidMount\n  * (2) Updating - When a component is being re-rendered a result qof changes to either its props or state\n      \u003e\u003e static getDerivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate and componentDidUpdate \n  * (3) Unmounting - When a component is being remove from the DOM \n      \u003e\u003e component Will Unmount\n  * (4) Error Handling - When there is an error during rendering, in a lifecycle method, or in the constructor of any child component\n      \u003e\u003e static getDrivedStateFromError and componentDidCatch\n   \n  ### (2) Updating Lifecycle Methods: \n  * static getDerivedStateFromProps(props, state)\n     \u003e\u003e Method is called every time a component is re-rendered \n     \u003e\u003e Set the state\n     \u003e\u003e Do not cause side effects. EX: HTTP requests.\n     \u003e\u003e \n \n  * shouldComponentUpdate(nextProps, nextState)\n     \u003e\u003e Dictates if the component should re-render or not \n     \u003e\u003e Performance optimization\n     \u003e\u003e Do not cause side effects. Ex.HTTP requests. Calling the setState method\n     \u003e\u003e \n  *  render()\n     \u003e\u003e Do not change state or interact with DOM or make ajax calls.\n     \u003e\u003e Only required method\n     \u003e\u003e Read props \u0026 state and return JSX\n     \u003e\u003e \n  * getSnapshotBeforeUpdate(prevProps, prevState)\n     \u003e\u003e Called right before the changes from the virtual DOM are to be reflected in the DOM.\n     \u003e\u003e Cature some information from the DOM\n     \u003e\u003e Method will either return null or return a value. Returned value will be passed as the third parameter to the next method.\n     \u003e\u003e \n  \n  * componentDidUpdate(prevProps, prevState, snapshot)\n     \u003e\u003e Called after the render is finished in the re-render cycles\n     \u003e\u003e Cause side effects\n    \n  ## (3)componentWillUnmount()\n\n   * Method is invoked immediately before a components is unmounted and destoryed.\n   * Cancelling any network requests, removing event handlers, cancelling any subscriptions and also invalidating timers.\n   * Do not call the setState method\n \n  ## (4)ERROR handling Phase Methods\n\n   * static getDerivedStateFromError(error)\n   * componentDidCatch(error, info)\n-----\n  * Error Boundary\n  \n  \n -----------\n ## Higher Order Components (HOC) \n  * A pattern where a function takes a component as an argument and returns a new component.\n   \u003e\u003e const NewComponent = higherOrderComponent(orginalComponent)\n   \u003e\u003e const EnhancedComponent = higherOrderComponent(orginalComponent)\n------\n## Render props\n  \u003e\u003e The term \"render prop\" refers to a technique for sharing code between React components using a prop whose value is a function.\n  \u003e\u003e \n------\n## React: HTTP GET Request\n  \u003e\u003e jsonplaceholder.typicode.com\n  \u003e\u003e \n# 3. Typescript\nWhat is Typescript and why do we use it ?\n \u003e\u003e node install -g\n \u003e\u003e npm install -g typescript [yarn add typescript] \n \u003e\u003e version check: rsc --v\n \u003e\u003e \n \n # String Format\n      String.Format():\n      var id = image.GetId()\n      String.Format(\"image_{0}.jpg\", id)\n      output: \"image_2db5da20-1c5d-4f1a-8fd4-b41e34c8c5b5.jpg\";\n      Specifier available!\n\n      var value = String.Format(\"{0:L}\", \"APPLE\"); //output \"apple\"\n\n      value = String.Format(\"{0:U}\", \"apple\"); // output \"APPLE\"\n\n      value = String.Format(\"{0:d}\", \"2017-01-23 00:00\"); //output \"23.01.2017\"\n\n\n      value = String.Format(\"{0:s}\", \"21.03.2017 22:15:01\") //output \"2017-03-21T22:15:01\"\n\n      value = String.Format(\"{0:n}\", 1000000);\n      //output \"1.000.000\"\n\n      value = String.Format(\"{0:00}\", 1);\n      //output \"01\"\n\n----\n## TypeScript Static Methods and Properties [...](https://www.typescripttutorial.net/typescript-tutorial/typescript-static-methods-and-properties/)\n\nStatic methods\nSimilar to the static property, a static method is also shared across instances of the class. To declare a static method, you use the static keyword before the method name. For example:\n\n\n        class Employee {\n            private static headcount: number = 0;\n            constructor(\n                private firstName: string,\n                private lastName: string,\n                private jobTitle: string) {\n\n                Employee.headcount++;\n            }\n\n            public static getHeadcount() {\n                return Employee.headcount;\n            }\n        }\n\n\n## Typescrip System.in value entering\n\n**[Installation](https://yarnpkg.com/package/@types/readline-sync)**\n\n    -\u003e  npm install --save @types/readline-sync\n   \n    -\u003e  yarn add @types/readline-sync\n---\n## Using `this` with a Constructor\n\nFrom within a constructor, you can also use the this keyword to call another constructor in the same class. Doing so is called an explicit constructor invocation. Here's another Rectangle class, with a different implementation from the one in the Objects section.\n\n      public class Rectangle {\n          private int x, y;\n          private int width, height;\n\n          public Rectangle() {\n              this(0, 0, 1, 1);\n          }\n          public Rectangle(int width, int height) {\n              this(0, 0, width, height);\n          }\n          public Rectangle(int x, int y, int width, int height) {\n              this.x = x;\n              this.y = y;\n              this.width = width;\n              this.height = height;\n           }\n            ...\n         }\n\n\n-----\n  ## Get an object's class name at runtime [on Typescript](https://stackoverflow.com/questions/13613524/get-an-objects-class-name-at-runtime)\n---\nUnderstanding TypeScript’s type [notation](https://2ality.com/2018/04/type-notation-typescript.html)\n\n---\n## Install\n------\nbrew install node\n\n\n---\n\n ## 4. MobX\n ## 5. Material-UI\n \n \n \n Project:  Business Card: \n   \u003e\u003e [Business Card Resource](https://stackblitz.com/edit/business-card-react) \u003e\u003e \n   \u003e\u003e [Business Card Resource2](https://codesandbox.io/s/fpm15?file=/src/index.js:7237-7245)\n   \u003e\u003e [Business Card Resource3](https://npm.io/package/react-business-card)\n   \u003e\u003e [Business Caed Resource4](https://libraries.io/npm/react-business-card)\n   \u003e\u003e [Business CR5](https://askavy.com/react-card/)\n \n \n \n\n\n\n\nReference\n1. [React + Storybook](https://www.youtube.com/watch?v=eJd08j18EH8\u0026list=PLC3y8-rFHvwhC-j3x3t9la8-GQJGViDQk\u0026index=3)\n2. [Practical React](https://www.youtube.com/watch?v=4l0nsK4ezNc\u0026list=PLC3y8-rFHvwhAh1ypBvcZLDO6I7QTY5CM\u0026index=2)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Furunov%2Ffrontend-modern-application","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Furunov%2Ffrontend-modern-application","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Furunov%2Ffrontend-modern-application/lists"}