Quick Start

React apps are made out of components
A component is a piece of the UI(user interface) that has its own logic and appearance.
A component can be as small as a button, or as large as an entire page

React component names must always start with a capital letter, while HTML tags must be lowercase.

writing markup with JSX

1
2
3
4
5


export default function MyApp(){
    return (
        <div>MyApp</div>
    )
}

The export default keywords specify the main component in the file.
export default有点类似main函数

The rules of JSX

Return a single root element
close all Tags
camelCase most of the things

Displaying data

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


const user = {
    name: 'frank',
    imageUrl: '',
    imageSize: 90,
};

export default function Profile(){
    <>
      <h1>{user.name}</h1>
      <img
          className="avatar"
          src={user.imageUrl}
          alt={'Photo of ' + user.name}
          style={{
              width:user.imageSize,
              height:user.imageSize
          }}
      />
    </>
}
// style={{}} is not a special syntax, but a regular {} object inside the style={ } JSX curly braces.

Updating the screen

1
2
3
4
5


import { userState } from 'react';
function MyButton() {
    const [count, setCount] = userState(0);
    //
}

You’ll get two things from useState: the current state (count), and the function that lets you update it (setCount)

You can give them any names, but the convention is to write [something, setSomething]

[something, setSomething] 是约定俗成的写法, 并不是严格要求

Using Hooks

Function starting with use are called Hooks, useState is a built-in Hook provided by React.

You can only call Hooks at the top of your components(or other Hooks).
If you want to use useState in a condition or a loop, extract a new component and put it there.

curly braces

where to use curly braces

As text directly inside a JSX tag
As attributes immediately following the = sign

src={avatar} √ src="{avatar}" ×

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


const baseUrl = 'https://i.imgur.com/';
const person = {
  name: 'Gregorio Y. Zara',
  imageId: '7vQD0fP',
  imageSize: 's',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};
export default function TodoList() {
    return (
        <img
        className="avatar"
        src = {baseUrl + person.imageId + person.imageSize + '.jpg'}
        />
    )
}

Any JavaScript expression will work between curly braces, including function calls like formatDate()

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


const today = new Date()

function formatDate(date){
    return new Intl.DateTimeFormat(
        'en-US',
        {weekday: 'long'}
    ).format(date);
}
export default function TodoList() {
    return (
        <h1>To Do List for {formatDate(today)}</h1>
    )
}

passing props to a component

pass props to child component

1
2
3
4
5
6
7
8


export default function Profile() {
    return (
        <Avatar
        person={{name:'Frank Ma', age: 25}}
        size={100}
        />
    );
}

read props inside the child component

1
2
3


function Avatar({ person, size}) {
    // person and size are available here
}

passing JSX as children

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


import Avatar from './Avatar.js';

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

export default function Profile() {
  return (
    <Card>
      <Avatar
        size={100}
        person={{ 
          name: 'Katsuko Saruhashi',
          imageId: 'YfeOqp2'
        }}
      />
    </Card>
  );
}

条件渲染

1
2
3
4
5
6


function Item({ name, isPacked }) {
  if (isPacked) {
    return <li className="item">{name} ✔</li>;
  }
  return <li className="item">{name}</li>;
}

Quick Start – React