3 - Teaching style of this book

Why is this book written?

A great question!

The only reason to write this book is to teach the absolute basics of React differently. Usually, the books and videos on React teach in one of the two ways:

• Comprehensive guide: One of the more common teaching style is to write a book or make videos or write articles to comprehensively teach React fundamentals. Rather than solving a particular problem, the resources try to cover as much ground as possible. They build small apps here and there (like calculator, card, product display, etc.). There is nothing wrong with this style of teaching. After all, there is a reason why most of the resources follow this approach. However, it makes things tough for the absolute beginners. They have way too much to grasp. The task of learning React feels insurmountable. A lot of people give up at the start. Teaching too much quickly has a negative impact on beginner's psychology. The other reason to make books long is to justify the price tag (usually $20-40). The readers will feel cheated if they get a 50-page book for $30.

• Learn by example: This is the other style of teaching, although it is less common compared to comprehensive, value-for-money guides. On the plus side, these resources are relatively shorter, so they are easy for beginners. The psychological blockage of a steep learning curve is not there. These type of resources build some app grounds up as they navigate the React maze. One of the most commonly built app is e-commerce (of course inspired from Amazon). I personally like this style of teaching.

This brings down to the question:

Which teaching style this book adheres to?

The short answer is: A variant of learn by example

The long answer is a variant of style 2 (building an app along the way). With an exhaustive list of resources available for React, why was this book even written? What's unique about this book? We haven't addressed the question yet.

This book teaches the absolute basics of React in a slightly different way. It takes the second approach of building an app along the way and teach React it by migrating a practical vanilla JS app to React. This approach works due to the following reasons:

• Technological background of readers: The first reason is very important. As a learner, what's your background? Most likely you know Vanilla JS, jQuery, maybe Vue, Angular, etc. With these technologies in your arsenal, you want to expand your skills by learning React. This is how most people come to the React world. It is very unlikely (if not impossible) that someone will be learning React without knowing either vanilla JS. That simply isn't possible. Note that React is a framework built over JavaScript to help you write clean and maintainable frontends in UI. You can't learn React without knowing JavaScript. In short, you know & have used at least vanilla JS before learning React.

• Experience of readers: The second reason is the experience of readers. You are coming from a vanilla JS, jQuery background. What you have done in past? You likely would have built a number of projects/products in these technologies. You have been doing this for some years. You are very familiar with writing frontend apps that use vanilla JS or jQuery. This is the world you're coming from. This is your comfort zone.

As you're an experienced technologist, it would make sense to learn React by migrating a vanilla JS app. You'll be able to see step-by-step how the vanilla app gets converted to React. You'll learn the design principles of React when you decompose the vanilla app into React component. You'll learn the basics of app building like using state, simulating button clicks, making API calls in the React world. This way the book starts from a familiar territory and gradually takes you into the React world. You'll see how the very familiar document.getElementById gets converted to states. You'll be amazed to find that you don't see document.getElementById() or $('') at all.

To teach the React basics, a fairly simple but practical app has been chosen for migration. The app is: file.io service. The file.io service lets you upload files and get a link. Anyone can use the link to download the file. Once downloaded, the file gets deleted by the server. While server is not really in the scope of this book, we'll still write a server that's close to the file.io service. The file.io service is a simple service, but has enough meat to get you started on the React journey. The purpose of this book is not to write a comprehensive guide to cover everything React offers. Others do that work very well. The purpose of this book is to take you from a familiar territory to a new world.

A simple picture will summarize the idea of this book:

Again, the file.io service has been chosen for a reason. There were many other options like ecommerce site, ride hailing, rentals, etc. The only reason not to choose others is their complexity. They are too complicated for beginners. The file.io service has a very limited functionality, but is good enough to get you started with some of the basic building blocks. Once you're comfortable with React, the world is full of resources to help you.

---

Before we start with React, first let's take a look at the file.io app written in vanilla JS. That's the app we'll be migrating in this book.