Development
React.js Development
Components, state, and a small React interface built from pieces.
React.js Development introduces components, props, and state, then uses them in a small interface. You should already be comfortable with HTML, CSS, and basic JavaScript. The lectures move in that order so a component is never a mystery box.
Course syllabus
01. Components
- Why React splits the page
A component is a function of data.
- A project you can run
The start command, the page in the browser, and the file you will edit.
- A component is a function that returns UI
The name, the return, and where it is used.
- Put the component on the page
Render it once so you can see it.
- A second component
A header and a main piece, not one giant function.
- A file per component when it grows
The name of the file matches the name of the function.
- What stays out of the component
A fetch you have not learned yet does not belong in the first file.
- The tree in one sentence
App renders Header and Main. You can point at the screen and say which is which.
02. JSX
- JSX is the UI in the function
Tags that become elements, inside the return.
- One parent
A fragment or a div when you need two siblings at the top.
- A JavaScript expression in braces
A variable shown in the text.
- A className, not class
The attribute React expects.
- An image and a link
The same ideas as HTML, in this syntax.
- A conditional in the render
Show a line only when a value is present.
- Keep the return readable
If it is a puzzle, split a component out.
- The HTML you already know still matters
A button is a button. React does not rename the idea.
03. Props
- Props
Pass information in, and keep the component reusable.
- A title prop
The parent decides the words. The child displays them.
- A number prop
Passed as a number, not pasted into a string by accident.
- Use the same component twice
Two titles, one function.
- A prop with a default
What shows when the parent does not pass it.
- Do not change props inside the child
They are the parent's data.
- An object prop when the fields belong together
A person with a name and a role, passed as one value.
- Name the prop for what it is
label, not data1.
04. State
- State and events
A value that changes when the person acts.
- useState
The current value, and the function that sets the next one.
- A click that updates state
The button calls the setter. The screen follows.
- Do not edit the state value in place
A new value, passed to the setter.
- A count you can explain
Starts at zero, increases by one, shown on the page.
- State lives in the component that needs it
Not in a child that only displays.
- A second piece of state
Only when it changes for a different reason.
- The screen is a result of the state
If the number is wrong, the state is wrong. Do not patch the DOM.
05. Events
- An event function
The function you pass to onClick.
- Pass the event only if you need it
Often you only need to call the setter.
- An input's onChange
The field and the state stay in step.
- A controlled input
The value comes from state. The state comes from the field.
- Submit a form
preventDefault, then use the state you already have.
- Disable a button while a value is empty
The state decides. The attribute follows.
- A handler named for the action
addItem, not handleClick2.
- One event, one job
If the function does three things, say them in order inside it.
06. Lists
- Lists and conditional UI
Render a collection, and show a different view when data is missing.
- Map an array to elements
Each item becomes a component or a row.
- A key that identifies the item
An id from the data, not the index, when the list can change.
- An empty list
A sentence on the page, not a blank hole.
- Filter the array, then map
The items you mean, then the elements.
- A missing item
What the page shows when the id is not in the list.
- Do not mutate the array
A new array from filter or a copy, then set state.
- The list is the data
If a row is wrong, look at the array, not at the tag.
07. A small screen
- A small multi-part screen
Compose components into one interface you can explain.
- The data you will show
An array of three items, in state.
- A form component
The field and the button, talking to the parent through props.
- A list component
Receives the items. Does not own them.
- Add an item
The parent appends to the array and sets state.
- The empty state you already planned
Before the first item, the sentence is visible.
- Names of the components
App, ItemForm, ItemList. You can point at each.
- What you would add next
A remove button, named, even if you stop before building it.
08. Care
- A prop type you assumed
If title might be missing, the component should survive it.
- A list key warning
What it means, and the id that fixes it.
- State that resets
A component that unmounts loses its state. Know where it lives.
- A file that got too long
Move a component out when you scroll to find it.
- Read a component from the props down
What comes in, what state it has, what it returns.
- The browser and the code should match
If they do not, the state is not what you think.
- No fetch in this course's last file
This course ends with data you hold. The next course can ask a server.
- Explain the screen in a minute
The components, the state, and the event that changes it.
Lecture videos stay with the course. Playback for enrolled students will open once payments are available. Video links are not published on this page.