Introduction to React


If you are looking to learn React using an easy to grasp course, then you have come to the right place. In this lesson, we are going to teach you, step by step, how to use react in the next web development app. This course consists of 26 lessons. It’s very important to study this course by the order the lessons are ordered. Should you have any question, please do not hesitate to contact us.

React

What is react?

React is an open-source JavaScript library created by Facebook. It was released back in 2013 and since then its popularity has increased every year. It is a view library that aims to simplify the development of user interfaces by dividing the whole UI into a number of components.

In recent years, single-page applications frameworks, like Angular, Ember, and Backbone have become really popular. React is a view library and not the SPA framework, but still, you can build Single page applications using React’s ecosystem.


React is famous for two reasons:

  1. It has a small API that makes it really easy to learn and use it.
  2. React minimizes the number of DOM visits

Why you should learn React?

Before you begin your journey to learn React, let’s take a pause momentarily and see why you should use React library for web applications, instead of developing something in just vanilla JavaScript.

  1. One of the things you will hear about React library is how fast it is compared to web applications that are developed in regular JavaScript. React is able to speed up the whole rendering process using the concept of Virtual DOM.
  2. Virtual DOM is a simple way of re-thinking about the rendering of the web pages.
  3. Another really awesome feature of React is its ability to create reusable web components for the UI. React components allow us to take big pieces of HTML and put it into a component of our own. It makes the code a lot easier to read, manage, and change. The ability to do so make it really easy to reuse these components wherever we need to.
  4. Another reason to learn React is that it’s maintained by Facebook. And whether you care for Facebook or not, there is a huge community who work on React. It is already adopted by giant tech companies like Airbnb, Netflix, Instagram, and Facebook.
  5. React has a small API and a quite flexible ecosystem. React is still new as compared to other frameworks, but surely holds a place in the future.
  6. Last but not least, React is very hirable. So, if your goal is to get a job as a front-end developer, React is the JS library that you must to learn.

How virtual DOM works in React?

Like the actual DOM, the virtual DOM is a tree-like representation of web page that lists web elements, and their attributes as objects and properties. Each time the data model experience some changes, a new virtual DOM representation will be created.

Whenever anything changes, the browser re-render the entire UI in a virtual DOM. The actual DOM will be updated only from where the changes have been done. It is like putting a patch which seems fasters in many cases than re-creating the whole DOM.


The pre-requisite of this course

To learn React, you must have some knowledge of HTML, CSS, and JavaScript.

In the ideal world, you should have a strong grip on JavaScript, but as we are not living in the ideal world, many of you will try to learn React with the only familiarity with JS.

Even if you are only familiar with JS, there is only 20% of the JS which is used 80% of the time.

Minimum JavaScript you need to learn React is:

  1. React and JavaScript classes
  2. Arrow functions
  3. Var, let, and const in React
  4. Functions as components
  5. Libraries in React
  6. Async/Await
  7. High-order functions in React
  8. Map, Reduce, and Filter
  9. React component class
  10. Shorthand object assignment
  11. & some more ES6 concepts

What you will learn in this course?

Components in React

When we talk about React, we can’t avoid the concepts of web components. These are the core building blocks of React for creating re-usable pieces of HTML.

Let’s say you have a star rating functionality in your website and the code is more than 40 lines.

Star Rating

Now you have choices; You can copy-paste these 40 lines of code at every page you need this rating functionality which we have been using traditionally, or you can convert this HTML code into a reusable component <starrating/> to use whenever needed. Without any doubts, the second option is more readable and convenient.


Other topics in React

We will also learn about JSX, which is propriety wrapper around JavaScript. It simply allows you to build reusable components using the HTML-like syntax you are already familiar with.  You will also learn about styling, data, props, forms, events handling, and life cycle methods.


React in the Future

React is relatively new but its core functionality is fairly stable now. Future versions of React will probably try to increase the rendering speed even further. React isn’t limited to web applications. React Native was released in 2015 which allows you to create React applications into iOS and Android native apps. There is also a React VR which is used to build interactive, virtual reality apps using React and JavaScript.


In the next lesson, we will revisit some important concepts of JavaScript to learn to program in React.

Tutorial Home React JavaScript Requirements

 

Tutorials Panel

About Tutorials Panel

programming tutorial and source code for Software Engineers and developers. https://twitter.com/TutorialsPanel

View all posts by Tutorials Panel →

Leave a Reply