React

A JavaScript library to build interactive user interfaces

Start learning   Table of contents
Intermediate
12 hrs 36 mins
29 chapters

Overview

React is an open-source JavaScript library to help us build interactive UIs (User Interfaces), released in 2013. It emerged as a client-side technology, but is nowadays being used on the backend as well.

Initially, it was developed by a team of engineers at Facebook to be used internally within Facebook, but then later on as developers at Instagram wanted to use this awesome tool in Instagram too, Facebook decided to decouple React from being its proprietary technology to an open-source library.

React is extremely easy to get started with. It doesn't have a steep learning curve, believe it. People generally regard React to be slightly more complex than Vue.js while much simpler than Angular. Regardless, React is intuitive, has a breathtaking potential, and is extremely performant. The most notable features of React include the virtual DOM, the idea of using components to compose UIs instead of templates (as in other UI frameworks), immutability of data, uni-directional data flow, a system of synthetic events wrapping native DOM events, and much more.

The ecosystem of React is also pretty huge and diverse. Once you learn React, you unlock your way into a whole new world full of libraries and tools made to work alongside React and simplify the development process considerably. Learning React can also land you in developing applications for Android and iOS, thanks to React Native.

Today, there is an immense scope of React in the job market out there. Almost every other job lists React as a prerequisite (because it is awesome!). Likewise, investing your time in learning this astoundingly remarkable tool would definitely be a smart choice.

Prerequisites

  • HTML

    Every then and now, we'll need to JSX code which requires us to be familiar with HTML.

  • CSS

    Although CSS isn't directly associated with React, we'll also routinely use it to style our React applications.

  • JavaScript

    JavaScript is integral to be able to develop any kind of a React application.

Learning outcomes

  1. What is the challenge of building UIs in vanilla JavaScript and why we need a tool like React to abstract all of its complexity and tediousness.
  2. What exactly is React and whether it's a library or a framework.
  3. How to set up the environment for coding React applications, with the help of Visual Studio Code, Rollup, Babel, serve from npm, and a couple other related tools.
  4. How to construct a simplistic React program from absolute scratch.
  5. What is JSX and how to construct a React program with JSX, and why is Babel needed before we could run JSX code.
  6. Why is React termed as a 'declarative' library and what's the benefit of this approach over the imperative approach of building UIs using vanilla JavaScript.
  7. The basics of React, including elements, components, props, events, state, fragments, refs, and keys, and how to use all of these to create extremely complicated programs.
  8. What exactly are escape hatches and how to use them to escape out of the 'React mode'.
  9. What are hooks and how to use them to bring in given utilities and features to our function components.

Table of contents

  1. In this unit, we'll cover all the foundational ideas of React, including how to set up the environment to create React applications. We'll learn about various such ideas as elements, components, JSX, events and fragments, and use these to create some of the simplest programs. From there, we'll learn slightly intermediate-level concepts such as keys, hooks and render props.

  2. Forms are an integral part of the web and so are they in React. This unit focuses on exploring the various kinds of improvisations React performs on form inputs, what are controlled components, what are uncontrolled components, and so on.

  3. In this unit, we'll cover some of the slightly more advanced and relatively less used concepts in React, such as layout effects, forward refs, memoizations, contexts, reducers, and a lot more.

FAQs

If you're having a hard time understanding a given concept in the course, feel free to reach out to me at bilal@codeguage.com, describing the issue you're facing. I'll try my level best to help you out.

The courses on Codeguage are released while they are still under construction so that learners can get early previews. As I continuously work on adding more and more content to the courses, if a given topic isn't covered today, there's a high chance that it's already under way and will show up very soon. You can follow Codeguage on Twitter to be updated with all the latest content releases.

Write to me at bilal@codeguage.com.

Let's get learning!

Start learning

Recent courses

Pre-release

Node.js

A runtime environment executing JavaScript outside the browser

View course