React Fundamentals

React.js is a component library, which expresses user interfaces in terms of components, properties passed into them, and state they manage internally. Through these encapsulated, expressive and composable building blocks, we can create complex and dynamic interfaces with code that is surprisingly simple and easy to manage.

React Fundamentals

  1. Courses
  2. React Fundamentals
  3. Hello React

Hello React

We will begin by using React in the simplest and most minimal way possible. You will quickly see the maintainability benefits of using components instead of “vanilla Javascript”.

  • Hello ReactWelcome and Tech Check

    We'll get set up and ensure everyone has the required software installed.

  • Hello ReactWhy React

    Before we start talking about how React works, we'll put it into context among the front-end technologies that came before and after React was introduced.

  • Hello ReactReact.createElement

    We’ll begin by creating a piece of web UI with the native DOM that comes for free with web browsers, and then move toward using React.createElement and ReactDOM.render. By the end, our code will be easier to maintain and more expressive.

  • Hello ReactEXERCISE: Input and Textarea

    We’ll begin by building the appropriate DOM structure for a form built with MUI CSS framework using React and ES5 JavaScript. Don’t worry about building custom components yet — just stick to using React and ReactDOM to make DOM creation more manageable.

  • Hello ReactJSX: JavaScript + HTML

    We have seen how React can make our life easier, but we have lost the ability to represent the HTML-ish portion of our UI as something that looks like HTML. React apps are typically written in JSX, an XML-like syntax extension to the ECMAScript Language Specification. We’ll learn about the new types of syntax you can use, and study what happens once JSX is transpiled into JavaScript.

  • Hello ReactEXERCISE: Upgrade to JSX

    Re-do the previous exercise, and use JSX to make the creation of DOM entities as expressive and declarative (close to HTML) as possible.