Component-Based UI w/ React
Notes and slides available at https://github.com/jensen/components-notes.
Why React?
- Declarative - Describe the final result in our code, rather than describing the steps to achieve that result.
- Component-Based - Allows us to compose UI out of smaller pieces.
- Unidirectional Data Flow - Data only flows from parent to child, top to bottom of the tree.
What is a Component?
A component is a function that accepts a properties object as an argument and returns a tree of React elements.
function Component(props) {
return (
<div>
<h1>Hello</h1>
<p>Body text</p>
</div>
);
}
Props vs State
JSX
JSX is converted to JavaScript before it is run in the browser.
<div>Hello World</div>;
/* becomes */
React.createElement("div", {}, "Hello World");
<div className="root">
<h1>Hello</h1>
<p>Body text</p>
</div>
return (
React.createElement("div", { className: "root" },
React.createElement("h1", {}, "Hello"),
React.createElement("p", {}, "Body text")
)
);
ReactDOM.render(React.createElement("div", { className: "root" },
React.createElement("h1", {}, "Hello"),
React.createElement("p", {}, "Body text", React.),
React.
), document.getElementById("#root"))
```
Every tag must be closed in order.
```jsx
<ul><li></ul></li>
<input><textarea /></input>
```
Components must have a capital letter first.
```jsx
<div></div>
<MyComponent></MyComponent>
React.createElement(MyComponent, {});
```
Cannot use HTML comments.
```jsx
<div>
{ /* comment in here */ }
</div>
```
Can only return a single root element.
```javascript
return (
<>
<h1>First</h1>
<h1>Second</h1>
</>
)
return (
React.createElement(React.Fragment, {},
React.createElement("h1", {}, "First"),
React.createElement("h1", {}, "Second")
)
);
```
## Isolation
Building our components in isolation, allows us to focus on a simple interface.
## Creating React Apps
`npx create-react-app <app name>`
`npx -p @storybook/cli sb init`