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

Tinker with the Live React App

Explore how to build and tinker with a live React app by understanding class-based React components, JSX syntax, and props. Learn to create and render components dynamically, using internal data and JavaScript expressions to control the output. This lesson helps you gain hands-on experience working with React's fundamentals for building client-side pages.

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

...