React CourseWhat's new
What's new in the course
- Hide the menu and fold chaptersOn a computer, the « button next to the language switch hides the menu on the left – the lesson then gets the full width, and “☰ Lessons” at the top brings the menu back. The course remembers your choice. Another click on a chapter’s name (e.g. JavaScript) folds its lessons. On a phone, swipe the open menu to the left or tap “✕ Close” at the top to close it.
- The course language follows your choiceThe home page now really greets you in your browser’s language – a bug sent even Czech and Slovak browsers to English. The course also remembers only the language you pick yourself with the CS/EN switch in the top left; a link to a page in the other language no longer overrides your choice.
- New address: learn-react-course.pages.devThe course has moved from reactcourse.pages.dev to learn-react-course.pages.dev. Old links still work and bring you here. Your browser keeps progress and saved challenge code separately for each address: if you are signed in, everything comes back after you sign in; otherwise you start over here.
- The React lessons build on the TypeScript chapterTypeScript now comes before React in the course, and the React lessons count on it: every component example has typed props (added in React 01 and React 10), and instead of explaining unions, generics and the completeness check with never all over again there is a short reminder with a link to lesson TypeScript 01 or TypeScript 02, where it was covered.
- React 01: clearer component and props examplesIn lesson React 01, the examples in “Step 4: a recipe with an order”, “1. JSX and the first component”, “2. Props: the order for a component” and “3. Children” are split into two parts: ① the component’s definition and ② its use in another component’s JSX (App). Before, the component tags hung on their own under the definition and it wasn’t clear where they belong; the Panel component with slots also appeared without a definition. For props, a new table also shows which attribute on the tag ends up in which variable of the component and when the default value is used. The ProfileCard demo and the Panel with slots challenge no longer fall into the zero trap the lesson warns about – the condition for children and the footer is a real boolean. For lists in section 5, a new table shows which words are fixed (key, map) and which you name yourself, and the “key as a reset” trick has a step-by-step example with a form.
- Clearer challenges in the React chapterAll warm-ups and challenges in lessons React 01–15 have new comments at every step: what you have to work with (with an example value), what should come out, a “before and after” example with concrete data and a pointer to the part of the lesson that explains how. The briefs show what the data and state the component works with look like, and the skeletons are more prepared – effects come with their timer and cleanup, reducers with branches that copy the state and hooks with their skeleton. The Kanban project got an example and a lesson pointer at every milestone. If you have your own code saved for a challenge, you will see the new version after clicking “↺ Restore the starting code” above the editor.
- Clearer challenges in the JavaScript and TypeScript chaptersAll challenges in lessons JavaScript 01–10 and TypeScript 01–02 have a new description for every function: what it gets (with an example value), what it returns, an example with concrete data and a pointer to the part of the lesson that explains how. The briefs show what the data the functions work with looks like, and the solution skeletons are more prepared – often you only fill in one line. If you have your own code saved for a challenge, you will see the new version after clicking “↺ Restore the starting code” above the editor.
- A clearer JavaScript 03 lesson and its challengeLesson JavaScript 03 on objects has more detailed explanations with more step-by-step examples – reading a property through a variable, methods, array destructuring, shallow copies, going through an object and an object as a dictionary. The medium challenge Object tools is rewritten: each function says what it gets, what it returns, what it is good for and where in the lesson to look. If you have your own code saved for the challenge, you will see the new version after clicking “↺ Restore the starting code” above the editor.
- A clearer applyTwice and once in JavaScript 02The applyTwice and once functions in the Function factories challenge (JavaScript 02) have clearer briefs with concrete examples, a more prepared skeleton and their own hints. If you have your own code saved for the challenge, you will see the new version after clicking “↺ Restore the starting code” above the editor.
- Bonus lessons, free after signing inThe whole course is free and will stay free. Three lessons – React 09 Performance, React 10 Design patterns and React 16 Summary – are now bonus lessons: anyone can read the introduction and the first chapter, the rest unlocks after signing in. An e-mail is all it takes – no password and no payment – and signing in also saves your progress across devices.
- A new TypeScript chapter and new numberingThere is a new TypeScript chapter between JavaScript and React – so you know the types you meet in the React challenges beforehand. It has two lessons: where types go, and a new lesson on union types, narrowing, states as discriminated unions and handling data from outside safely. Every part of the course is now numbered from 01: JavaScript 01–10, TypeScript 01–02 and React 01–16. The challenges in the JavaScript chapter are plain JavaScript without types. Your progress is kept.
- Easier-to-follow easy challengesWarm-ups and easy challenges now come with a prepared skeleton: you only change the lines with TODO and the comment next to them says what goes there. Each step says which result is expected. The tests are hidden in the editor – you see only the code to edit and their results. If you have your own code saved for a challenge, you will see the new version after clicking “↺ Restore the starting code” above the editor.
- Anonymous visitor statisticsTo learn which lessons are read most, we now count visits with Cloudflare Web Analytics – no cookies and no way to identify you. Details are in the privacy policy.
- Version 1.0.0 beta and the English versionThe course now has its first public beta, version 1.0.0. All lessons, demos, challenges and cheat sheets are available in English too – switch the language in the top-left corner. Found a mistake or have an idea? Use the feedback form at the end of any lesson.
- Review with different questions every timeReview now includes generated questions with new values for the JavaScript lessons, and the answers are shuffled every time.
- Quiz reviewQuizzes from the lessons come back after 1, 3, 7, 14 and 30 days so you really remember them.
- Placement test: where to start?Ten questions recommend the lesson to start with and show topics to revisit.
- Progress, streaks and badgesContinue where you left off, track lessons read, keep your streak and collect badges.
- Challenges in the browser and warm-upsEvery challenge has a code editor on the page and every lesson an easy warm-up to begin with.
- Chapter 0: JavaScriptTen lessons of the JavaScript React needs – from variables to references and async code.