React

React is a JavaScript library used to build interactive interfaces, introduced to the worldwide community in 2013 by Facebook.

Difficulty

Intermediate

Course Duration

10 hrs 3 mins

Chapters

29

Exercises

15

Quizzes

5

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.

Course 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.

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. Foundation

  2. Forms

    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. Advanced

    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

  • What if I get stuck somewhere in the course?

    If you're having a hard time understanding a given concept in the course, feel free to reach out to us via our email mail@codeguage.com, describing the issue you're facing. We'll try our level best to help you out.

  • Some important topics are missing from the course. Why is that so?

    Our courses are released while they are still under construction so that our learners can get early previews. As we continuously work on adding more and more content to our 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 us on Twitter to be updated with our latest content releases.

  • How can I ask any general questions related to the course's content?

    Write to us at mail@codeguage.com.

It's different the 'Codeguage way'

Fundamentals-focused

When you have a robust foundation, with the fundamentals crystal-clear, your mind will intrinsically get that ability to handle any kind and level of complexity.

Comprehensive

With a comprehensive resource that covers literally every aspect of a given topic, your time is spent practicing the learnt concepts, not resolving confusions and basic questions.

Detailed

Coding is a detailed craft. Likewise, any resource trying to teach it in any way should be detailed as well, or else people will have to acquire those integral details from different places in a fragmented and haphazard manner.

Well-structured

Structure is vital to an intuitive learning experience of a given resource. Without structure, the right concepts get introduced at the wrong times, ultimately leading to confusion and breaking the desired flow of comprehension.

Let's start the learning!