Introduction to the React for Beginners Series
Hey guys, my name is Vishwas and welcome to a brand new series on React for beginners. In this series we will start from scratch and learn the different concepts in React. In this introductory video, I will briefly talk about what is React, why you should you learn React, and also talk about the future content on React I will be creating on this channel. We will also quickly go over the prerequisites to get started with React.
What is React?
Let's begin with what is React. React is an open-source JavaScript library for building user interfaces. There are two key points in this definition. The first one is that React is a JavaScript library. It is not a framework, it is a library. It is focused on doing one thing and doing that one thing really well, and that is the second part: building user interfaces. So React does not focus on the other aspects of your application like routing or HTTP requests. It is responsible only for building rich user interfaces.
The React Ecosystem
Now if that raises a concern as to how you would handle routing, HTTP, and other functionality, you don't have to worry about it. React has a rich ecosystem and plays really well with other libraries and is more than capable of building full-fledged web applications.
Why You Should Learn React
Alright, now that we know what React is and for what purpose it is used, let's see why you might want to learn React. Let's start with the fact that React is a project created and maintained by Facebook. When a company like Facebook uses React in its own products and invests money and resources to keep the project alive, you can be rest assured it is not going to die down anytime soon. As of this recording, it has more than a hundred thousand stars on GitHub and a huge community behind it. This means to say you will be able to find tons of articles and Stack Overflow solutions to most of the problems that you will encounter when getting started with React. Also, if you read through Stack Overflow developer survey every year, you will quickly find out that React has become increasingly popular among developers and is also one of the most sought-out skill sets by companies right now. Learn React and you have a great chance of landing that front-end developer job you've always wanted.
Technical Deep Dive: Component-Based Architecture
Now, let me touch slightly on the technical aspects of React and why it is a good choice. React has a component-based architecture. This lets you break down your application into small, encapsulated parts which can then be composed to make more complex UIs. For example, a traditional website can be broken down into header, side nav, main content, and footer. Each section represents a component which, when composed in the right way, make up the entire website. Components also make it possible to write reusable code. For example, you could have the component for an article on React. The same component can be reused for articles on Angular or Vue by simply passing the right data into the article component. For enterprise applications, the ability to reuse code is a huge plus point.
Technical Deep Dive: The Declarative Paradigm
Another key point is that React is declarative. Now what does that mean? Well basically, we just have to tell React what we want and React, with its React DOM library, will build the actual UI. This is the declarative paradigm. Now this is in contrast with the imperative paradigm we are usually used to, which implements algorithms in explicit steps. Let me give you a relatable example. Let's say you go to an artist, you ask them to draw a landscape. You don't tell them how to draw it, it's up to them. This is declarative. You tell what has to be done and the artist will get it done for you. Now the same task you ask of a five-year-old child, but this time you tell them to first draw the mountains, then the river, then the trees, and so on. You explicitly specify each step and you control the flow of the landscape. That is the imperative paradigm. Why this is important to understand is because React is declarative. You have to tell React what the UI should look like and React will create the actual UI. React will make it painless for you to create complex UIs by abstracting away the difficult parts. React will handle efficiently updating and rendering just the right components in your application when your data changes. DOM updates, which is one of the more expensive operations, is handled gracefully in React.
Integration, React Native, and Prerequisites
Now React also makes no assumptions about the rest of the technology stack you are using for your project. You can seamlessly integrate React into any of your applications, be it just a portion of the page or a complete page or even an entire application itself. React will fit right in. And once you have a good grasp on React, you can also enter the world of mobile applications with React Native. The bottom line is that React will be a great addition to your skill set. Now then, what are the prerequisites to get started with React? HTML, CSS, and JavaScript fundamentals are absolutely necessary. For this course, I will also be making use of ES6, so a knowledge of modern JavaScript is also essential.
Essential JavaScript & ES6 Concepts for React
You don't have to be an expert by any means, but there are a few features that make it so much easier to write React code, and that is why I recommend learning React with ES6. To help you out, I've made a list of some of the JavaScript and ES6 concepts that you should be aware of. With JavaScript, make sure you're aware of the this keyword, filter, map, and reduce methods—mainly the map method. With ES6, please go through let and const declarations, arrow functions, template literals, default parameters, object literals, rest and spread operators, and finally destructuring assignment. I have a complete tutorial series on ES6 on all these topics, so please feel free to go through them and then continue with React. It will only take you an hour or so. Let me tell you that no prior knowledge of any other JavaScript libraries or frameworks is necessary. We will be learning React from scratch.
Course Roadmap and Conclusion
Let me also share my plan on the content I will be creating for React so that you will know what to expect in the coming future. We will start off with React fundamentals. After that, we will take a look at React and HTTP. That is followed by routing with React, and then we have state management with Redux. Finally, we will take a look at some useful utilities or libraries that will work well with React. One thing I do have to mention here is that React, just like any other framework, is also going to undergo breaking changes. As of this recording, we will be using React version 16.5.2. If you're watching this series a year or so from now, the major version might be different, but be rest assured, 90% of the content will remain valid. For the breaking changes, I will make sure to pin a comment in the particular video and also create an updated video for your reference. My goal is to make sure we all advance from a complete beginner to being an expert in React. All right then, with this introduction, let's get started with a simple hello world application in the next video. Thank you guys for watching, don't forget to subscribe, and I'll see you guys in the next one.
