Quick Start Full Stack Web Development/

...

/

Tinker with the Live React App

Tinker with the Live React App

Learn the basics of interacting with the React application.

We'll cover the following...

React Application

A React component can be defined as a function or class inheriting from the Component class. In some cases, the function-based components are preferable, but we’ll only use the class-based approach.

Press + to interact
import React, { Component } from 'react';
class App extends Component {
    render() {
        return (
            <div className="App">
                <p>FRAP applications are fun and powerful</p>
            </div>
        );
    }
}
export default App;

We’ve stripped off all of the non-essential imports, leaving only React and Component. An App component must be defined and exported so that index.js will know what to render. The component class defines the render method, and that method returns an HTML element.

Components

...
Ask