{"id":13639924,"url":"https://github.com/fullstackreact/30-days-of-react","last_synced_at":"2025-05-15T06:05:37.143Z","repository":{"id":38903501,"uuid":"78477480","full_name":"fullstackreact/30-days-of-react","owner":"fullstackreact","description":"30 Days of React Content and Source Code","archived":false,"fork":false,"pushed_at":"2023-10-09T07:18:29.000Z","size":35291,"stargazers_count":2208,"open_issues_count":158,"forks_count":660,"subscribers_count":63,"default_branch":"master","last_synced_at":"2025-04-14T10:42:29.553Z","etag":null,"topics":["30-days-of-code","code-examples","fullstackreact","react","reactjs","tutorial"],"latest_commit_sha":null,"homepage":"https://www.fullstackreact.com/30-days-of-react/","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/fullstackreact.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":"2017-01-09T23:05:23.000Z","updated_at":"2025-04-14T02:41:30.000Z","dependencies_parsed_at":"2024-11-29T17:12:16.545Z","dependency_job_id":null,"html_url":"https://github.com/fullstackreact/30-days-of-react","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/fullstackreact%2F30-days-of-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstackreact%2F30-days-of-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstackreact%2F30-days-of-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstackreact%2F30-days-of-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fullstackreact","download_url":"https://codeload.github.com/fullstackreact/30-days-of-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254283339,"owners_count":22045140,"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":["30-days-of-code","code-examples","fullstackreact","react","reactjs","tutorial"],"created_at":"2024-08-02T01:01:06.148Z","updated_at":"2025-05-15T06:05:32.131Z","avatar_url":"https://github.com/fullstackreact.png","language":"JavaScript","funding_links":[],"categories":["Frameworks","Learn React"],"sub_categories":["Resources YouTube"],"readme":"![](https://www.fullstackreact.com/assets/images/30days/30-days-of-react-header.jpg)\n\n\u003chr /\u003e\n\u003ch1 align=\"center\"\u003e\n  30 Days of React\n\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"./images/readme/30-days-of-react-book-cover-2-as-book-220.png\"/\u003e\n\u003c/p\u003e\n\u003ch2 align=\"center\"\u003e\n  ✨ An Introduction to React - \u003cb\u003ein 30 Bite-Size Morsels\u003c/b\u003e ✨\n\u003c/h2\u003e\n\u003cp align=\"center\"\u003e\nWritten by \u003ca href=\"https://fullstack.io\"\u003eFullstack.io\u003c/a\u003e and \u003ca href=\"#contributors\"\u003efriends\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://app.monstercampaigns.com/c/opsh28ygz42xhvtlq4vd/\"\u003e\n\u003cimg src=\"./images/readme/download-the-pdf-button.png\" width=\"484\" height=\"83\" /\u003e\n\u003c/a\u003e\n\u003c/p\u003e\n\u003chr /\u003e\n\n# 🚀 Introduction\n\nOver the next 30 days, we'll walk through everything you need to know to work with React. From the very beginning through testing and deployment of our first app.\n\nThis repository contains the entire source and content for the article series of [30 Days of React](https://www.fullstackreact.com/30-days-of-react) hosted by the [Fullstack React](https://www.fullstackreact.com/) team.\n\n## 👀 What's inside?\n\n\u003c!-- prettier-ignore --\u003e\n| \u003ca href='./day-01'\u003e\u003cimg src='./day-01/cover.jpg' width='140px;' /\u003e\u003c/a\u003e\u003ch4 align='center'\u003e\u003ca href='./day-01'\u003eWhat is React?\u003c/a\u003e\u003ch4\u003e | \u003ca href='./day-02'\u003e\u003cimg src='./day-02/cover.jpg' width='140px;' /\u003e\u003c/a\u003e\u003ch4 align='center'\u003e\u003ca href='./day-02'\u003eWhat is JSX?\u003c/a\u003e\u003ch4\u003e | \u003ca href='./day-03'\u003e\u003cimg src='./day-03/cover.jpg' width='140px;' /\u003e\u003c/a\u003e\u003ch4 align='center'\u003e\u003ca href='./day-03'\u003eOur First Components\u003c/a\u003e\u003ch4\u003e | \u003ca href='./day-04'\u003e\u003cimg src='./day-04/cover.jpg' width='140px;' /\u003e\u003c/a\u003e\u003ch4 align='center'\u003e\u003ca href='./day-04'\u003eComplex Components\u003c/a\u003e\u003ch4\u003e | \u003ca href='./day-05'\u003e\u003cimg src='./day-05/cover.jpg' width='140px;' /\u003e\u003c/a\u003e\u003ch4 align='center'\u003e\u003ca href='./day-05'\u003eData-Driven\u003c/a\u003e\u003ch4\u003e |\n| :---: | :---: | :---: | :---: | :---: |\n| \u003ca href='./day-06'\u003e\u003cimg src='./day-06/cover.jpg' width='140px;' /\u003e\u003c/a\u003e\u003ch4 align='center'\u003e\u003ca href='./day-06'\u003eState\u003c/a\u003e\u003ch4\u003e | \u003ca href='./day-07'\u003e\u003cimg src='./day-07/cover.jpg' width='140px;' /\u003e\u003c/a\u003e\u003ch4 align='center'\u003e\u003ca href='./day-07'\u003eLifecycle Hooks\u003c/a\u003e\u003ch4\u003e | \u003ca href='./day-08'\u003e\u003cimg src='./day-08/cover.jpg' width='140px;' /\u003e\u003c/a\u003e\u003ch4 align='center'\u003e\u003ca href='./day-08'\u003ePackaging and PropTypes\u003c/a\u003e\u003ch4\u003e | \u003ca href='./day-09'\u003e\u003cimg src='./day-09/cover.jpg' width='140px;' /\u003e\u003c/a\u003e\u003ch4 align='center'\u003e\u003ca href='./day-09'\u003eStyles\u003c/a\u003e\u003ch4\u003e | \u003ca href='./day-10'\u003e\u003cimg src='./day-10/cover.jpg' width='140px;' /\u003e\u003c/a\u003e\u003ch4 align='center'\u003e\u003ca href='./day-10'\u003eInteractivity\u003c/a\u003e\u003ch4\u003e |\n| \u003ca href='./day-11'\u003e\u003cimg src='./day-11/cover.jpg' width='140px;' /\u003e\u003c/a\u003e\u003ch4 align='center'\u003e\u003ca href='./day-11'\u003ePure Components\u003c/a\u003e\u003ch4\u003e | \u003ca href='./day-12'\u003e\u003cimg src='./day-12/cover.jpg' width='140px;' /\u003e\u003c/a\u003e\u003ch4 align='center'\u003e\u003ca href='./day-12'\u003ecreate-react-app\u003c/a\u003e\u003ch4\u003e | \u003ca href='./day-13'\u003e\u003cimg src='./day-13/cover.jpg' width='140px;' /\u003e\u003c/a\u003e\u003ch4 align='center'\u003e\u003ca href='./day-13'\u003eRepeating Elements\u003c/a\u003e\u003ch4\u003e | \u003ca href='./day-14'\u003e\u003cimg src='./day-14/cover.jpg' width='140px;' /\u003e\u003c/a\u003e\u003ch4 align='center'\u003e\u003ca href='./day-14'\u003eFetching Remote Data\u003c/a\u003e\u003ch4\u003e | \u003ca href='./day-15'\u003e\u003cimg src='./day-15/cover.jpg' width='140px;' /\u003e\u003c/a\u003e\u003ch4 align='center'\u003e\u003ca href='./day-15'\u003eIntroduction to Promises\u003c/a\u003e\u003ch4\u003e |\n| \u003ca href='./day-16'\u003e\u003cimg src='./day-16/cover.jpg' width='140px;' /\u003e\u003c/a\u003e\u003ch4 align='center'\u003e\u003ca href='./day-16'\u003eDisplaying Remote Data\u003c/a\u003e\u003ch4\u003e | \u003ca href='./day-17'\u003e\u003cimg src='./day-17/cover.jpg' width='140px;' /\u003e\u003c/a\u003e\u003ch4 align='center'\u003e\u003ca href='./day-17'\u003eClient-side Routing\u003c/a\u003e\u003ch4\u003e | \u003ca href='./day-18'\u003e\u003cimg src='./day-18/cover.jpg' width='140px;' /\u003e\u003c/a\u003e\u003ch4 align='center'\u003e\u003ca href='./day-18'\u003eIntroduction to Flux\u003c/a\u003e\u003ch4\u003e | \u003ca href='./day-19'\u003e\u003cimg src='./day-19/cover.jpg' width='140px;' /\u003e\u003c/a\u003e\u003ch4 align='center'\u003e\u003ca href='./day-19'\u003eData Management with Redux\u003c/a\u003e\u003ch4\u003e | \u003ca href='./day-20'\u003e\u003cimg src='./day-20/cover.jpg' width='140px;' /\u003e\u003c/a\u003e\u003ch4 align='center'\u003e\u003ca href='./day-20'\u003eRedux actions\u003c/a\u003e\u003ch4\u003e |\n| \u003ca href='./day-21'\u003e\u003cimg src='./day-21/cover.jpg' width='140px;' /\u003e\u003c/a\u003e\u003ch4 align='center'\u003e\u003ca href='./day-21'\u003eRedux Middleware\u003c/a\u003e\u003ch4\u003e | \u003ca href='./day-22'\u003e\u003cimg src='./day-22/cover.jpg' width='140px;' /\u003e\u003c/a\u003e\u003ch4 align='center'\u003e\u003ca href='./day-22'\u003eIntroduction to Testing\u003c/a\u003e\u003ch4\u003e | \u003ca href='./day-23'\u003e\u003cimg src='./day-23/cover.jpg' width='140px;' /\u003e\u003c/a\u003e\u003ch4 align='center'\u003e\u003ca href='./day-23'\u003eImplementing Tests\u003c/a\u003e\u003ch4\u003e | \u003ca href='./day-24'\u003e\u003cimg src='./day-24/cover.jpg' width='140px;' /\u003e\u003c/a\u003e\u003ch4 align='center'\u003e\u003ca href='./day-24'\u003eTesting the App\u003c/a\u003e\u003ch4\u003e | \u003ca href='./day-25'\u003e\u003cimg src='./day-25/cover.jpg' width='140px;' /\u003e\u003c/a\u003e\u003ch4 align='center'\u003e\u003ca href='./day-25'\u003eBetter Testing with Enzyme\u003c/a\u003e\u003ch4\u003e |\n| \u003ca href='./day-26'\u003e\u003cimg src='./day-26/cover.jpg' width='140px;' /\u003e\u003c/a\u003e\u003ch4 align='center'\u003e\u003ca href='./day-26'\u003eIntegration Testing\u003c/a\u003e\u003ch4\u003e | \u003ca href='./day-27'\u003e\u003cimg src='./day-27/cover.jpg' width='140px;' /\u003e\u003c/a\u003e\u003ch4 align='center'\u003e\u003ca href='./day-27'\u003eDeployment Introduction\u003c/a\u003e\u003ch4\u003e | \u003ca href='./day-28'\u003e\u003cimg src='./day-28/cover.jpg' width='140px;' /\u003e\u003c/a\u003e\u003ch4 align='center'\u003e\u003ca href='./day-28'\u003eDeployment\u003c/a\u003e\u003ch4\u003e | \u003ca href='./day-29'\u003e\u003cimg src='./day-29/cover.jpg' width='140px;' /\u003e\u003c/a\u003e\u003ch4 align='center'\u003e\u003ca href='./day-29'\u003eContinuous Integration\u003c/a\u003e\u003ch4\u003e | \u003ca href='./day-30'\u003e\u003cimg src='./day-30/cover.jpg' width='140px;' /\u003e\u003c/a\u003e\u003ch4 align='center'\u003e\u003ca href='./day-30'\u003eWrap-up and More Resources\u003c/a\u003e\u003ch4\u003e |\n\n## 👩‍🏫 How to use this repository\n\nEach day contains a full React application, following the same procedure used to create the article series. Most days can be run using the same basic steps (and for the days that require a bit more work, check out the tutorial series on the blog).\n\nThe steps run any _30 Days of React_ project are:\n\nWe can run these steps using the following commands:\n\n```bash\n# install the dependencies\nyarn install\n\n# start the project\nyarn start\n```\n\nSince all of the days are built using the fantastic [create-react-app](https://github.com/facebookincubator/create-react-app) tool, all of the commands are available from that project in every day.\n\n## Contributors\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore --\u003e\n| \u003ca href='http://willcodeforfoo.com'\u003e\u003cimg src='https://avatars1.githubusercontent.com/u/529?v=4' width='140px;'/\u003e\u003ch4 align='center'\u003e\u003ca href='http://willcodeforfoo.com'\u003eAri\u003c/a\u003e\u003c/h4\u003e | \u003ca href='https://newline.co'\u003e\u003cimg src='https://avatars2.githubusercontent.com/u/4318?v=4' width='140px;'/\u003e\u003ch4 align='center'\u003e\u003ca href='https://newline.co'\u003eNate Murray\u003c/a\u003e\u003c/h4\u003e | \u003ca href='https://codepen.io/PeterHYChan/'\u003e\u003cimg src='https://avatars3.githubusercontent.com/u/32804449?v=4' width='140px;'/\u003e\u003ch4 align='center'\u003e\u003ca href='https://codepen.io/PeterHYChan/'\u003ePeter Ho Yeung Chan\u003c/a\u003e\u003c/h4\u003e | \u003ca href='https://github.com/harms280'\u003e\u003cimg src='https://avatars2.githubusercontent.com/u/10542951?v=4' width='140px;'/\u003e\u003ch4 align='center'\u003e\u003ca href='https://github.com/harms280'\u003eAaron\u003c/a\u003e\u003c/h4\u003e |\n| :---: | :---: | :---: | :---: |\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\n---\n\n# Fullstack React Book\n\n\u003ca href=\"https://fullstackreact.com\"\u003e\n\u003cimg align=\"right\" src=\"images/readme/fullstack-react-hero-book.png\" alt=\"Fullstack React Book\" width=\"155\" height=\"250\" /\u003e\n\u003c/a\u003e\n\nThis repo was written and is maintained by the [Fullstack React](https://fullstackreact.com) team. In the book we cover many more projects like this. We walk through each line of code, explain why it's there and how it works.\n\n_30 Days of React_ covers only the early basics of React. If you're looking to learn how to build real-world React apps, including libraries from the React ecosystem, there's no faster way than by spending a few hours with the Fullstack React book.\n\n\u003cdiv style=\"clear:both\"\u003e\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffullstackreact%2F30-days-of-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffullstackreact%2F30-days-of-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffullstackreact%2F30-days-of-react/lists"}