Components and JSX · Lesson 1 of 21

Why React?

UI as a function of data, components, and your first App.

7 minutes2 games

In plain JavaScript, when data changes you find elements on the page and update them one by one: "change this text, add that element, remove this class". In big apps that gets very hard and breeds bugs.

React flips it: you describe what the page looks like for any given data, and React works out what changed and updates the page. That's the declarative style: UI = f(state).

React

function Welcome({ name }) {
  return <h2>Welcome, {name}!</h2>
}

function App() {
  return (
    <div>
      <Welcome name="Laila" />
      <Welcome name="Omar" />
      <p>Built from small, reusable components.</p>
    </div>
  )
}

Welcome is a component: a function returning part of the page. Its name must start with a capital letter. We use it like an HTML tag: <Welcome name="Laila" />. Whole pages are built from small components nested inside each other, like LEGO.

<App>
- <Header>
  - <Logo>
  - <SearchBox>
- <CourseList>
  - <CourseCard> × 6
- <Footer>

Any page (SeaCode's included) is a tree of components.

Quick question

What does it mean that React is "declarative"?

Exercise

Make a Badge component that takes a label and returns a <span> with it. Use it three times in App: HTML, CSS and React.

The page should show: HTML CSS React

React

function Badge({ label }) {
  return null
}

function App() {
  return (
    <div>
      
    </div>
  )
}

Learn more from

Played 0 of 2 games

React

Components and JSX · Lesson 1 of 21

Why React?

UI as a function of data, components, and your first App.

7 minutes2 games

React flips it: you describe what the page looks like for any given data, and React works out what changed and updates the page. That's the declarative style: UI = f(state).

React

function Welcome({ name }) {
  return <h2>Welcome, {name}!</h2>
}

function App() {
  return (
    <div>
      <Welcome name="Laila" />
      <Welcome name="Omar" />
      <p>Built from small, reusable components.</p>
    </div>
  )
}

<App>
- <Header>
  - <Logo>
  - <SearchBox>
- <CourseList>
  - <CourseCard> × 6
- <Footer>

Any page (SeaCode's included) is a tree of components.

Quick question

What does it mean that React is "declarative"?

Exercise

Make a Badge component that takes a label and returns a <span> with it. Use it three times in App: HTML, CSS and React.

The page should show: HTML CSS React

React

function Badge({ label }) {
  return null
}

function App() {
  return (
    <div>
      
    </div>
  )
}

Learn more from

Played 0 of 2 games