Introducing Learn React App

I am pleased to announce the release of an application called Learn React App. This application will help you learn React fundamentals.

The way this works is you checkout the code from git, install it locally and start the application. Open the browser and go to “localhost:3000”, voila you have the tutorial. The application goes through most of the fundamental concepts in React like JSX, state, props, handling events, component composition etc.

Each tutorial section goes through a concept with lots of different code snippets. And the most important thing is that it has exercises for each concept it goes through. The browser displays a split view for the exercise. The left side renders your solution whereas the right side renders the target solution. Understand the feature implemented in target solution (by typing in the input field, clicking the buttons etc) before diving into the exercise. The location of the exercise file and the target solution is displayed right above the split view.

You can open the exercise file on any code editor you feel comfortable with (IntelliJ, VS Code, Sublime, Atom or plain old textpad). Open the exercise file, make changes by following the instructions and save it. Your browser will be updated automatically to reflect your changes.

Each exercise files are heavily commented to help you solve the problem. Comments are coded with different characters like ✏️ (edit the code here), 🚨 (don’t touch the code here) etc. Full list of character coding inside exercise file can be found on the github page. If you feel like you got stuck, refer to the solution files.

This application also has a Capstone project at the very end. Capstone project brings together most of the concepts covered in the tutorial. For capstone project you need to edit several files and and obviously each one has a lot of instructions. Just like the exercise, if you feel like you got stuck feel free to refer to the solution files.

If you think there is something that can be improved on this tutorial please feel free to drop a note or create a PR.

Happy Learning!