Skip to content
Learn how React Elements, Components and JSX work together in the browser and the server.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Class: Understanding React


Now that you understand the basics of React, it's time to dive a little deeper. In this class you'll learn more about the fundamental building blocks of React. You'll start off by understanding React Elements and Components. Then you'll learn what JSX is and what it looks like after it gets compiled. We'll play with the JSX build tool so you can see how to implement a custom build script on the server. Then we'll wrap up by exploring how React can be used on the server for server side rendering or as part of a client build process.

What's in this class?

  • Introduction To Understanding React - Introducing the Understanding React class.

  • Getting Set Up - In this lesson you'll clone the class project from GitHub, install the dependencies and explore the server.

  • React Elements - The React Element is the core building block of React components. It describes the elements that will end up in the browser page. Since they only exist in memory, sometimes it's referred to as the "Virtual DOM." So far, JSX has been giving us React Elements for free. In this lesson you'll see what React Elements actually look like by exploring them in the Chrome debugger.

  • React Components - React Components wrap React Elements with additional functionality like event handlers. They also let us define life cycle methods, functions that run at a particular time in the component's life. Finally, components are just classes which give us a nice way to organize our code.

  • Compiling JSX - JSX allows us to write regular HTML tags like

      along side JavaScript. These HTML tags get compiled into createElement function calls. In this lesson you'll see the compilation process in action on the server and in the browser.

    • JSX Build Options - Now that you've gotten an introduction to the JSX command line tool, you'll learn about some of its advanced options. In this lesson you'll start by updating the list component to use JSX syntax. Then you'll tell the jsx command line tool to perform ES6 compilation and output the compiled file to the build directory. Finally you'll see how to automatically build your jsx files when they change.

    • Introduction To Server Side Rendering - React allows server and browser rendering to work together, avoiding the need to render twice. To do this, React uses a special checksum attribute that gets added to the React component when it's rendered on the server. In this lesson you'll get an introduction to server side rendering by working with React directly in a NodeJS process on the server.

    • Using React Tools On The Server - Using the jsx command line tool is convenient. But you can also use the build tools directly from your server-side JavaScript code by using the react-tools npm module. In this lesson you'll see how to compile JSX files from a NodeJS process.

You can’t perform that action at this time.