Lesson 1

Lesson 1 of 6

Basic Input and Output

Lesson Progress: 0%

Example Section

//import React from 'react';

function Ex2() {
  const message = "React rocks!";

  return (
    <div>
      <h1>Exercise 2: A Basic Component</h1>
      <h1>{message}</h1>
    </div>
  );
}

Exercise 2: A Basic Class Component

React rocks!

Instructions

▲ ← Click the triangle to hide or reveal instructions.

Just above is the Example Section.
The left side of the Example Section shows the react.js code.

The right side of the of the Example Section shows the result or output code.

The Practice Section is below.
The left side of the Practice Section can also be called a code editor.
The code editor is where you type your input code.
The right side of the practice section is where you see the output of your code.
Practice by typing the code example above, in the left side of the code editor below.
It is possible to copy and paste the code above into the code editor below.
Then click the "Run Code" button, to run the code.

There is an Error Feedback section below the Code Editor and Output Box.
When all the necessary code is entered properly, there will be no feedback, and the result/output will appear in the Outbox Box.
Try to make changes to the code to see how it changes the output.
The last line that you add here should be render(MyComponent); Replace MyComponent with the name of your controlling component function
This last line of code will look like:
render(Ex1Intro); or
render(Ex1);

Lesson Progress: 0%

Basic Input and Output

Lesson Incomplete

Lesson 1 of 6

Next: Lesson 2 →