AMA Deep Dive On React + React Native

A quick note from the editor:

I recently got to join and moderate a live AMA call that Yihua Zhang did with our students in the Zero To Mastery virtual campus.

Students and I asked questions about React, how it works, how best to learn it, how it compares to Angular, Flutter, and Next.js, some technical questions on the best component libraries to use, and much more.

You can check out some of Yihua’s answers to the questions from his AMA call below, but first, let me introduce him.

Who is Yihua Zhang, and why should you listen to him?

Yihua has been teaching students how to code for over a decade now and was actually the 2nd instructor to join ZTM after Andrei.

Having worked as a Senior Software Developer for numerous years for some of the largest tech companies in the world, Yihua is currently the Lead Software Engineer at Bonsai but started out as a self-taught developer.

Funny story but he used to be a personal trainer and own a gym, so talk about a wild career switch!

He understands the challenges and mindset of coming into this industry from various other backgrounds. Having been both a student as well as an instructor, he can empathize with the difficulty of learning something new and the challenges that brings.

Yihua is the teacher of both our Master The Coding Interview (FAANG) course, and the recently updated Complete React Bootcamp course.

That’s over 70+ hours of in-depth training so as you can see, Yihua clearly knows what he's talking about.

We figured with the new updates to his React course, this was the perfect time to pick his brain about why the course was updated and also any changes to the React ecosystem.

It was a great interview so with the intro out of the way, let’s dive into his AMA answers 😀.

🙋AMA with Yihua Zhang on React.js

Want to watch the video, ask questions in our Discord, or join in live on our next expert AMA?

These are all exclusive access for members of Zero To Mastery. You can find out more details about every course and the other benefits of being a ZTM member here.

What is React and what is it used for?

React is commonly called a front-end framework, but personally, I think of it more as a UI library.

The typical React use case is to build interactable websites. When people say that React is a front-end framework, they're really talking about using it for front-end web development i.e all the features and processes that have to go into building the elements that you interact with.

React is built by Meta (formerly known as Facebook), and is probably one of the most popular front-end frameworks, especially if you’re an engineer, as React is one of the easiest frameworks to learn and use.

It’s also incredibly popular due to how quickly you can learn it and then get a high-paying job asap in the industry.

Is it true that React was built so that Meta would have an easier time getting apps built for them?

Kind of. In reality, React was actually built as a response to Angular.

If you look at the market, there are 3 major players:

• Google with Angular
• Facebook with React, and
• And Evan You with Vue.js

Back in 2009, Google started working on the idea of having a single-page application-focused ("SPA") framework.

SPAs are sites that seem to be a single page but actually dynamically render and rerender new content, relying only on the resources of the web browser.

The goal for this was to get fast-loading sites by bypassing slow server delays, and they achieved this by creating the Angular framework.

When this happened, the whole architecture of the web completely changed but the first version of Angular had a few problems.

Facebook in response then addressed and solved those problems with React, making it the most popular framework among engineers, and helped to create a level of standardization between what people were using to build sites.

In fact, React can be seen as the impetus for Web 2.0 and the focus on front-end user experience. We’ve become so used to fast loading web experiences, thanks to the improvements with these frameworks.

Is React a framework or a programming language, and what's the difference?

React is a framework, and here’s how languages and frameworks differ:

A programming language is a set of rules and syntax that dictates how you can build a program. You can think of it as the lowest level of a tool that you can use to build programs i.e something executable that a computer can run.

A framework is more like a tool that is built within a specific programming language. It helps you bypass a lot of issues or tasks by including pre-set ‘mini programs’ inside the framework that make it easier for you to build programs in that particular language.

To help you picture this, imagine cooking food.

In cooking, there are different culinary styles but within each style, there are also different tools that you use to cook those meals.

So in this example, Chinese cuisine would be the language, but a wok would be the tool or framework to help you cook Chinese food.

What is the difference between React and React Native?

React comes with 2 packages:

• The base React library or ‘React DOM’ is the web browser version of React. You can think of it as the engine that drives the underlying logic of the tool
• And a front-end UI library

Why a separate library?

Well, every interface needs a different UI. The difference between a desktop and a mobile device is incredibly different and varies between devices. This is why we also have React Native, which serves as the UI library for mobile devices.

What is React.js?

React.js is just plain old normal React, just referred to differently.

Why?

Well, React is built in JavaScript and so some people add the js when talking about it, but they still mean the same thing. React = React.js

Is React easy or difficult to learn? What is the best way to learn it?

It really does depend on if you have any prior experience with other languages.

For Example

If you already have JavaScript experience then you’ll find React much easier to learn than Angularor Vue.

Why?

Because React is designed so that it mimics JavaScript for easy adoption from JavaScript Developers. It was literally built with these users in mind and how they were currently working.

Compare that to something like Angular where you have to learn the intricacies, patterns, and specific methods for writing in that language that doesn’t exist outside of Angular, and it means there’s a slightly steeper curve.

That being said, even if you have zero experience with JavaScript, you still won’t struggle as React’s not too complicated to learn. The difficulty only really comes in when you want to become a master of it, as there are some difficulties when scaling (same as with JavaScript).

That being said, if you can get to that level of experience with React then you’re going to see a lot of very lucrative job opportunities, seeing a jump from $110,000 to $167,000 per year.

TL;DR

React is easy to learn, but hard to master, and you’ll pick it up even quicker if you have JavaScript experience as it will feel very similar.

What are some examples of large-scale React websites?

The best example is Facebook itself!

Meta built and uses React for their own websites and apps, and it shows you just how well React can scale once you master it.

There are thousands of components and millions of active users, which just goes to show how well React handles scale both vertically and horizontally.

What are the best component libraries to use with React? Which UI library do you prefer to use?

I really like to use Material, which I know is a pretty generic answer as Material is probably the most popular among other users also.

Why is it so popular?

Well, Material is Google's own component library, but its main benefit is its documentation on how they determine how Material works as a design system.

So let me explain:

If we think about a website and how it’s built, we have all these components that make it work, such as buttons and elements, etc.

Now the rules that dictate how these components look, their size, how they scale, the colors they use, etc are all determined by the design system, and Material encapsulates all those already into a component library that you can reuse, and it’s incredibly well designed.

Honestly, the designers and engineers thought about everything. Material was the first component library that considered the z-index, which affects the user's perception of depth on a screen. Ie which elements are in front or behind each other.

Why care?

Well not only does it help provide a better visual aesthetic, but it can also help provide context clues that can improve the user experience and let them know what can be pressed or interacted with.

What are the main pros and cons of React?

This is a difficult question because I would say that React’s main pro is also its con in some respects.

So let me explain:

Unlike other frameworks such as Angular, React doesn’t really care how you manage other things.

It doesn’t care how you handle routing, data management, or anything else. All it cares about is how you handle rendering the UI, and the elements that govern how that UI interacts.

This means that:

• React is super focused and powerful at what it’s designed for
• And, it’s also flexible and easy to pick up, meaning that you can bring in other tools or even build your own tools to make it work

This means that you can pick and choose and build it how you like, but it also used to be a con.

Why?

Well, thanks to this flexibility, a React project at one company can be vastly different at another, which can cause a little bit of a learning curve as you need to learn the other tools that the company might be using instead.

This is becoming less of an issue recently with specific tools becoming the norm across other projects, but it can still happen.

How do you decide which State Management library to use with React?

There are so many state management options available, and they all have their gimmicks, so it can be a little overwhelming.

That being said, 80% of the time there won’t be too many technical constraints that will make you pick one option over another. Usually, the main conversation that you’ll have about state management with React libraries (and you may even have this question in React interviews), is

“What's the advantage of Redux vs React Context?”

To clarify, Redux and Context are the 2 more popular forms of state management, usually chosen just because it’s what people have experience with already but also because they’re good at what they’re used for.

So how do we choose which to use?

React comes by default with React Context, whereas Redux is arguably built on top of Context and extends on some of the things that you can do with it, and was actually developed by a lead engineer at React.

My best advice is to pick the right tool for the goal and look at the features each has and any trade-offs you might have to make.

But honestly, Redux is probably the best option and the ‘unofficial’ choice for most React developers and probably the first state management you should learn to use with React, both from a features standpoint, and volume of job opportunities.

For Example

If we look at Web Development, one of the major goals is being able to scale the engineering team and have people start delivering features asap right? Well, Redux has been scaled time and time again and can handle this easily.

Is React better than Angular, Next.js, or Flutter?

Let’s break each of these down…

React vs Angular

If you’re working on an enterprise application and you have a lot of developers with a Java background, then Angular is probably your best option due to some similarities.

That being said, if you don’t have people with a Java background then React is much easier and faster to learn and pick up.

React vs Next.js

Next.js is a framework that does server-side rendered React.

So with normal React, you’re doing all of the rendering and re-rendering inside the web browser, which helps to make the site fast loading and responsive. If you remember from earlier, this was one of the main goals for React and was designed to help bypass slow server times.

However, servers have improved greatly since then though and just because you can do everything in the browser, doesn’t mean you have to.

I would recommend Next.js for when you need to build huge sites with a lot of components and dynamic and static resources. This way you can look at combining server-side rendering alongside dynamically rendered browser-based rendering. This way you get the benefit of the 2 options, while also saving on resources for static elements.

That being said, just because you can get a high performance like this in Next.js, you only really need this if your site needs all those factors. Until then you’ll be totally fine using React and can bypass the complexity of Next.js.

React vs Flutter

Flutter is a new language made by Google and it has its pros and cons, but it’s hard to measure a framework against a language.

I will say this though, due to Flutter's recent creation there isn’t a heap of job opportunities for Flutter developers.

You would think that this would mean that Flutter developers would get paid higher, but it actually has a lower average salary than React.

What is in the latest update to the complete React course?

As a course creator, you play a balancing act.

You need to figure out the best way to deliver the most valuable information as quickly as possible, but you also need to focus on the content that can help a student do 80% of their work.

This way we can ensure that more people not only finish the training but also come out of it with a huge advantage over other self-taught developers.

One of the biggest updates to the course right now is a focus on a few key areas of how React works, such as how and when React re-renders something and then helps you to understand this.

Why focus here?

Because if you can understand what drives this framework and its limitations and strengths, you’ll also be able to adapt and grasp solutions that might not be clear otherwise.

Not only that, but we’ve reshot all new lessons and structure so that you learn more about this as you go through the entire course, vs a single video on the topic. This way you also get to apply each area and comprehend it better.

Ultimately, the entire update is about helping you learn React asap, learn it well, and know what you need so that you can go out and get a job using this framework asap.

🔥Want to learn more about React?

You can check out the updated Complete React course here for more details, as well as our dedicated Discord channel for React.

You can ask questions there and get answers and help from Yihua, as well as from other experienced and beginner Developers.

Also? To give you an idea of the quality in that course, here's a small segment of it that you can follow, and learn how to build your first app in React!