{"id":13682940,"url":"https://github.com/Lemoncode/react-typescript-samples","last_synced_at":"2025-04-30T10:30:32.690Z","repository":{"id":38375659,"uuid":"52718939","full_name":"Lemoncode/react-typescript-samples","owner":"Lemoncode","description":"The goal of this project is to provide a set of simple samples, providing and step by step guide to start working with React and Typescript.","archived":false,"fork":false,"pushed_at":"2023-04-02T23:03:07.000Z","size":1344,"stargazers_count":1850,"open_issues_count":4,"forks_count":395,"subscribers_count":78,"default_branch":"master","last_synced_at":"2024-11-11T22:41:24.151Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Lemoncode.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-02-28T11:58:58.000Z","updated_at":"2024-11-11T19:40:48.000Z","dependencies_parsed_at":"2024-01-12T20:04:06.692Z","dependency_job_id":null,"html_url":"https://github.com/Lemoncode/react-typescript-samples","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/Lemoncode%2Freact-typescript-samples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lemoncode%2Freact-typescript-samples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lemoncode%2Freact-typescript-samples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lemoncode%2Freact-typescript-samples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Lemoncode","download_url":"https://codeload.github.com/Lemoncode/react-typescript-samples/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224206329,"owners_count":17273437,"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-08-02T13:01:56.031Z","updated_at":"2024-11-12T02:32:40.795Z","avatar_url":"https://github.com/Lemoncode.png","language":"TypeScript","readme":"# React Typescript by sample\n\n[🇪🇸 Versión Español](./readme_es.md)\n\nThe goal of this project is to provide a set of simple samples, providing and step by step guide to\nstart working with React and TypeScript.\n\nWe have incorporated a set of examples based on hooks.\n\nRight now you got two main folders:\n\n- [Hooks](./hooks): set of samples migrated to hooks (right now 15 samples migrated), if you are new to\n  React, or you are going to start working on a new project, We recommend you going through these\n  examples.\n\n- [Old_class_components_samples](./old_class_components_samples): The old samples, just in case you need to work with older react\n  versions or you need to maintain legacy code.\n\nIf you want to make a deeper dive on React Hooks you can check this repo [React Hooks By Example](https://github.com/Lemoncode/react-hooks-by-example)\n\nOther guided repos available (react / redux + typescript):\n\n- [Redux By Sample](https://github.com/Lemoncode/redux-by-sample)\n- [From React to Redux](https://github.com/Lemoncode/from-react-to-redux-ts)\n- [Redux Sagas](https://github.com/Lemoncode/redux-sagas-typescript-by-example)\n\n# Examples\n\nThe goal of this project is to provide a set of simple samples, providing and step by step guide to\nstart working with React and Typescript. Characteristics:\n\n- Bundling based on webpack.\n- React + Typescript based.\n- Simple navigation using react-router.\n- Managing async calls and updates.\n- Using Redux library (not available yet on hooks version, coming soon).\n- Handling async calls via Redux-Thunk + Redux Saga (not available yet on hooks version, coming soon)\n- Adding unit testing support (not available yet on hooks version, coming soon).\n- Implementing Lazy Loading (not available yet on hooks version, coming soon).\n- ...\n\n## To get started:\n\n1. Install [NodeJS](http://www.nodejs.org)\n2. Download this repo\n3. Open the command line of your choice and cd to a sample directory within this repo on your machine\n4. `npm install` - Installs packages\n5. `npm start` - Builds the project and launch a lite web server (webpack-dev-server).\n6. Navigate to [http://localhost:8080/](http://localhost:8080/) if your browser doesn't open automatically.\n\n# samples\n\n## Hooks\n\n### [00 Boiler plate](https://github.com/Lemoncode/react-typescript-samples/tree/master/hooks/00_BoilerPlate)\n\nBundling + npm start based on webpack.\n\n### [01 Hello React](https://github.com/Lemoncode/react-typescript-samples/tree/master/hooks/01_HelloReact)\n\nDisplay the text 'Hello React'.\n\nHello world, simples react render sample.\n\n### [02 Properties](https://github.com/Lemoncode/react-typescript-samples/tree/master/hooks/02_Properties)\n\nDisplay the text 'Hello {name}' (where name is a prop\nthat contains a given name).\n\nIntroduce a basic React concept, handling properties.\n\n### [03 State](https://github.com/Lemoncode/react-typescript-samples/tree/master/hooks/03_State)\n\nStarting from sample 02, let's the user change the name to be displayed.\n\nIntroduce a basic React concept, handling State using hooks.\n\n### [04 Callback](https://github.com/Lemoncode/react-typescript-samples/tree/master/hooks/04_Callback)\n\nStarting from sample 03, let the user change the name only\nwhen he hits a _change_ button.\n\nUsing callbacks.\n\n### [05 Refactor](https://github.com/Lemoncode/react-typescript-samples/tree/master/hooks/05_Refactor)\n\nRefactor sample 04, cleanup and discussion on where to place the state.\n\nRefactor the job done.\n\n### [06 Enable](https://github.com/Lemoncode/react-typescript-samples/tree/master/hooks/06_Enable)\n\nStarting from sample 05, enable / disable the _change_ button\nwhen the text is empty or same name as original name,.\n\nEnable/disable components.\n\n### [07 ColorPicker](https://github.com/Lemoncode/react-typescript-samples/tree/master/hooks/07_ColorPicker)\n\nSimple color picker demo (show how properties work).\n\n### [08 ColorPicker Refactor](https://github.com/Lemoncode/react-typescript-samples/tree/master/hooks/08_ColorPickerRefactor)\n\nColorPicker refactor.\n\n### [09 Sidebar](https://github.com/Lemoncode/react-typescript-samples/tree/master/hooks/09_Sidebar)\n\nImplementation of a single sidebar.\n\n### [10 Table Mock](https://github.com/Lemoncode/react-typescript-samples/tree/master/hooks/10_TableMock)\n\nRender a table and use a child component to render each row, using mock data.\n\n### [11 Table Axios](https://github.com/Lemoncode/react-typescript-samples/tree/master/hooks/11_TableAxios)\n\nStarting from sample 10, remove mock data, hit a real REST API (Github api), use\naxios to perform the fetch call.\n\n### [12 React Router](https://github.com/Lemoncode/react-typescript-samples/tree/master/hooks/12_ReactRouter)\n\nStarting from sample 03,start using React-Router (SPA navigation).\n\n### [13 Login Form](https://github.com/Lemoncode/react-typescript-samples/tree/master/hooks/13_LoginForm)\n\nStarting from sample 12, implement a basic login page, that will redirect the user to another page  whenever the login has completed successfully.\n\n### [14 Form Validation](https://github.com/Lemoncode/react-typescript-samples/tree/master/hooks/14_FormValidation)\n\nStarting from sample 13, add validation support to login form.\n\n### [15 Context](https://github.com/Lemoncode/react-typescript-samples/tree/master/hooks/15_Context)\n\nStarting from sample 14, learn how React 16 context api works.\n\n## Old Class folder\n\n### 00 Boiler plate\n\nBundling + npm start based on webpack.\n\n### 01 Hello React\n\nHello world, simples react render sample.\n\n### 02 Components\n\nCreating a common header and about page react components.\n\n### 03 Navigation\n\nCreating a \"members\" page, adding navigation using react-router.\n\n### 04 Display data\n\nCreate a read only list component (table \u003e\u003e tr \u003e\u003e td), reading list of members\nfrom a fake api and dumping it into component state.\n\n### 05 Presentational Components\n\nBreaking the list component into two: list and row compomenent, member row\nentity passed via props.\n\n### 06 Handling asynchronous calls\n\nMembers fake api replaced with async call to api github to retrieve list of\nmembers of a given organization.\n\n### 07 Forms\n\nIn this sample we will add a link in the members page that will navigate to a\n\"new member page\". This new page will display a form where you have to enter\nthe avatar url, login and id of a new member (just supossing we can edit that info).\n\n### 08 ParamNavigation + Validations\n\nEdit a given member, here we learn how to add params to a navigation link and\nhow to obtain them from a component.\n\nValidation performed so far:\n\n- Login: required, must be a string (at least length 3).\n\n### 09 Redux\n\nAdded Redux support, isolated state into Redux reducers, implement load, save,\nbasic validation cycle. This sample uses the fake api, in following samples\nwe will call async operations and fitting them into Redux architecture.\n\n### 10 SpinnerAsync\n\nDisplay a busy indicator while an ajax request is in progress.\n\nTo have a global count of promises gong on we are using\n[react-promise-tracker](https://github.com/Lemoncode/react-promise-tracker)\nand to display a cool spinner [react-spinner](https://github.com/davidhu2000/react-spinners)\n\n### 11 Testing reducers\n\nSample updated using Jest.\n\n### 12 Testing actions\n\nSample updated using Jest.\n\n### 13 Testing components (Containers and Presentationals)\n\nPending update Jest + Enzyme\n\n### 14 Replacing Redux Thunk with Redux Saga\n\nPending update\n\n### 15 Lazy Loading and React-Router\n\nPending update\n\n### 16 Add custom middlewares\n\nPending update\n\n### 17 Add support for ReactHotloader and ReduxDev Tools.\n\nPending update\n\n### 18 Hooks\n\nReplace class components by stateless components using Hooks.\n\n### 19 LoginForm\n\nAdd a login page using Material-UI.\n\n# Contributors\n\nThank you very much to the contributors for keeping the project updated in all the examples.\n\n- [Jehu Sagardoy](https://github.com/jsagardoy)\n- [Luis del Amo](https://github.com/delamux)\n\n# About Basefactor + Lemoncode\n\nWe are an innovating team of Javascript experts, passionate about turning your ideas into robust products.\n\n[Basefactor, consultancy by Lemoncode](http://www.basefactor.com) provides consultancy and coaching services.\n\n[Lemoncode](http://lemoncode.net/services/en/#en-home) provides training services.\n\nFor the LATAM/Spanish audience we are running an Online Front End Master degree,\nmore info: [http://lemoncode.net/master-frontend](http://lemoncode.net/master-frontend)\n","funding_links":[],"categories":["TypeScript","TypeScript 教程"],"sub_categories":["英文资源"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLemoncode%2Freact-typescript-samples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FLemoncode%2Freact-typescript-samples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLemoncode%2Freact-typescript-samples/lists"}