Search⌘ K
AI Features
Home
Courses
Quick Start Full Stack Web Development

Tinker with the Live React App

Explore how to create and modify React components using class-based methods. Learn to handle component data with props and children while experimenting with live coding exercises to see immediate changes in the 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.

JavaScript (JSX)
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

...