Introduction to React.js

Objectives

After this lesson, you will be able to:

• Understand what problem React.js solves
• Use JSX to create a React component
• Render basic React components using the ReactDOM

Preparation

Before this lesson, students should already be able to:

• Manipulate the DOM with vanilla Javascript
• Create individual views for design elements
• Identify the moving parts of an MVC framework

Introduction to React (10 mins)

The modern web is becoming compartmentalized. What does this mean to you?

There are a variety of front-end frameworks to choose from. From Backbone.js to Angular.js, we have frameworks that are great at binding your data to models. This week we are going to look into React.js - a modern front-end framework that was designed by three engineers at Facebook.

The goal of React was to create components based on views; views as in the view of model-view-control. Imagine breaking a webpage up into multiple elements - you already do that, right? React was designed to solve the problem of breaking front-end design elements into self-contained components. [Prompt]: What sort of design elements have you worked with that could be self-contained?

If you have a website and want to have encapsulated components for your front end, look no further. And, because React only creates components that act as views, we can use it alongside other frameworks as the view if we want to!