{"id":15318872,"url":"https://github.com/insin/react-lessons","last_synced_at":"2025-07-06T03:06:02.016Z","repository":{"id":33859825,"uuid":"37566459","full_name":"insin/react-lessons","owner":"insin","description":"Tool for creating and taking interactive React tutorials","archived":false,"fork":false,"pushed_at":"2015-07-17T23:32:40.000Z","size":374,"stargazers_count":103,"open_issues_count":0,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-02T00:01:38.040Z","etag":null,"topics":["experiment","interactive","lessons","react","react-app","tutorials"],"latest_commit_sha":null,"homepage":"http://insin.github.io/react-lessons/","language":"JavaScript","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/insin.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}},"created_at":"2015-06-17T01:54:07.000Z","updated_at":"2024-09-19T09:23:02.000Z","dependencies_parsed_at":"2022-08-07T23:30:11.457Z","dependency_job_id":null,"html_url":"https://github.com/insin/react-lessons","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/insin/react-lessons","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Freact-lessons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Freact-lessons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Freact-lessons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Freact-lessons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/insin","download_url":"https://codeload.github.com/insin/react-lessons/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Freact-lessons/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263841596,"owners_count":23518486,"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":["experiment","interactive","lessons","react","react-app","tutorials"],"created_at":"2024-10-01T09:02:53.511Z","updated_at":"2025-07-06T03:06:01.994Z","avatar_url":"https://github.com/insin.png","language":"JavaScript","funding_links":[],"categories":["[Redux](https://github.com/gaearon/redux)"],"sub_categories":["[React](http://facebook.github.io/react)"],"readme":"# React Lessons\n\nReact Lessons is a tool for creating - and taking - interactive [React](http://facebook.github.io/react/) tutorials, inspired by the [Ractive.js Tutorial](http://learn.ractivejs.org).\n\n## Taking tutorials\n\nA tutorial consists of a number of lessons. Each lesson can include one or more steps (numbered across the top-right of the page).\n\n![Tutorial screenshot](screenshot-use.png)\n\nA lesson step consists of:\n\n* Prose providing learning material.\n\n* An outline for code to be written to practice the step's material.\n\n### Writing JavaScript\n\nJavaScript can be written in the panel on the right and executed by pressing\nShift+Enter or using the Execute button.\n\nThe following variables are available for use in code:\n\n* `React` - the React library.\n* `output` - the DOM node for the output area below.\n\nCode is transformed with [Babel](http://babeljs.io) before being executed, so you can use:\n\n* [JSX](http://facebook.github.io/react/docs/jsx-in-depth.html) - the XML-like syntax React uses to make generating content in JavaScript more pleasant.\n* [ECMAScript 6 features](http://babeljs.io/docs/learn-es2015/#ecmascript-6-features)\n* [ECMAScript 7 proposals](http://babeljs.io/docs/usage/experimental/) experimentally supported by Babel.\n\n## Editing tutorials\n\nUse the \"Edit Mode\" checkbox to toggle editing mode.\n\n![Editing mode screenshot](screenshot-edit.png)\n\nIn editing mode, you can change the lesson name and edit the content of each step.\n\n### Step prose\n\nStep prose is written in [Markdown](http://daringfireball.net/projects/markdown/basics), with support for additional [GitHub Flavored Markdown](https://help.github.com/articles/github-flavored-markdown/) features.\n\n### Step code \u0026 solution\n\nIn editing mode, \"Code\" and \"Solution\" tabs will appear in the coding area:\n\n* Code is what the user will see in the coding panel when they open the step.\n\n  **Note:** Code will be automatically executed each time the step is opened.\n\n* Solution (if provided) will allow use of the \"Fix code\" button to see a solution for the coding challenge.\n\n### Creating and deleting lessons and steps\n\nIn editing mode, extra toolbar buttons are also displayed to allow you to add new lessons and steps, or to delete the current lesson or step.\n\nWhen you add more lessons to a tutorial, a menu will pop up on the left side of the page to allow you to navigate between them.\n\n### Exporting\n\nYou can export the current lesson using the \"Export Lesson\" button, or the complete tutorial using the \"Export Tutorial\" button.\n\nYou will be prompted to download a `.json` file containing exported data.\n\n### Importing\n\nTo import a lesson or a tutorial, use the \"Import Lesson(s)\" button to select a `.json` file, or drag and drop a `.json` file anywhere on the page.\n\n**Warning:** if you import a tutorial, its lessons will replace *everything* you currently have.\n\n## MIT Licensed\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finsin%2Freact-lessons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finsin%2Freact-lessons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finsin%2Freact-lessons/lists"}