Note: These notes are taken from Colt steele’s Modern React Bootcamp course
Popular, powerful front-end framework.
Developed by and sponsored by Facebook.
- Make it easy to make reusable
view components- These encapsulate logic and HTML into a class
- Often make it easier to build modular applications
Components :
- The building blocks of React
- Pieces of UI & view logic
- Classes that know how to render themselves into HTML
A bit like this…
1class Dog {
2 constructor(name, color) {
3 this.name = name;
4 this.color = color;
5 }
6 render() {
7 return `<p>${this.name}</p>`;
8 }
9}
A component is a React class with a render() method:
1class Hello extends React.Component {
2 render() {
3 return <p>Hi Everyone!</p>;
4 }
5}
We add our component to HTML with ReactDOM.render:
1ReactDOM.render(<Hello />, document.getElementById("root"));
Intro to JSX
1class Hello extends React.Component {
2 render() {
3 return <p>Hi Everyone!</p>;
4 }
5}
6
7ReactDOM.render(<Hello />, document.getElementById("root"));
JSX is like HTML embedded in JavaScript:
1if (score > 100) {
2 return <b>You win!</b>;
3}
You can also “re-embed” JavaScript in JSX:
1if (score > 100) {
2 return <b>You win, {playerName}</b>;
3}
(looks for JavaScript variable playerName)
Using JSX
- JSX isn’t legal JavaScript
- It has to be “transpiled” to JavaScript
- You can do this with Babel
Transpiling JSX in browser
- Load Babel standalone library:
1<script src="https://unpkg.com/babel-standalone"></script>
- Mark JSX files with
type="text/jsx":
1<script src="index.js" type="text/jsx"></script>
Serving demo
For security reasons, Babel won’t work with file://scripts
Run files under a simple static server:
1python3 -m http.server
or use Live server extension in VSCode.
Properties
aka. Props
A useful component is a reusable one. This often means making it configurable or customizable.
1class Hello extends React.Component {
2 render() {
3 return <p>Hi Everyone!</p>;
4 }
5}
It would be better if we could configure our greeting. Our greeting will be Hi _ _ _ _ from _ _ _ _
Let’s make two “properties”:
to -> Who we are greeting
from -> Who our greeting is from
hello2/index.js
1ReactDOM.render(<Hello to="me" from="you" />, document.getElementById("root"));
Set properties on element; get using this.props.propName.
1class Hello extends React.Component {
2 render() {
3 return (
4 <div>
5 <p>Secret Message: </p>
6 <p>
7 Hi {this.props.to} from {this.props.from}
8 </p>
9 </div>
10 );
11 }
12}
Reusing Component
You can use a component many times:
Adding to different places:
index.js
1ReactDOM.render(<Hello to="Kay" from="Kim" />, document.getElementById("root"));
2
3ReactDOM.render(<Hello to="me" from="you" />, document.getElementById("also"));
Adding several at once:
index.js
1ReactDOM.render(
2 <div>
3 <Hello to="Kay" from="Kim" />
4 <Hello to="me" from="you" />
5 </div>,
6 document.getElementById("root")
7);
Note div wrapper — JSX often renders a single top-level element.
Properties Requirements
- Properties are for configuring your component
- Properties are immutable
- Properties can be strings:
1<User name="Jane" title="CEO" />
For other types, embed JS expression using the curly braces:
1<User name="Jane" salary={100000} hobbies={["bridge", "reading", "tea"]} />
Using Properties
- Get to properties inside class with this.props.propertyName
- Properties are immutable — cannot change!
Conditionals in JSX
The render() method can return either:
- a single valid DOM object
(return <div>...</div>) - an array of DOM objects
- null (
undefinedis not ok!)
You can put whatever logic you want in your render() method for this:
1class Lottery extends React.Component {
2 render() {
3 if (this.props.winner) return <b>You win!</b>;
4 else return <b>You lose!</b>;
5 }
6}
Ternary
It’s very common in render() to use ternary operators:
1class Lottery extends React.Component {
2 render() {
3 return <b>You {this.props.winner ? "win" : "lose"}!</b>;
4 }
5}
Example: Slots!
demo/slots/Machine.js
1class Machine extends React.Component {
2 render() {
3 const { s1, s2, s3 } = this.props;
4 const winner = s1 === s2 && s2 === s3;
5
6 return (
7 <div className="Machine">
8 <b>{s1}</b> <b>{s2}</b> <b>{s3}</b>
9 <p>You {winner ? "win!" : "lose!"}</p>
10 </div>
11 );
12 }
13}
demo/slots/index.js
1ReactDOM.render(
2 <Machine s1="🍇" s2="🍇" s3="🍇" />,
3 document.getElementById("root")
4);
Looping in JSX
It’s common to use array.map(fn) to output loops in JSX:
1class Messages extends React.Component {
2 render() {
3 const msgs = [
4 { id: 1, text: "Greetings!" },
5 { id: 2, text: "Goodbye!" },
6 ];
7
8 return (
9 <ul>
10 {msgs.map((m) => (
11 <li>{m.text}</li>
12 ))}
13 </ul>
14 );
15 }
16}
Ecxample: Friends!
demo/friends/Friend.js
1class Friend extends React.Component {
2 render() {
3 const { name, hobbies } = this.props;
4 return (
5 <div>
6 <h1>{name}</h1>
7 <ul>
8 {hobbies.map((h) => (
9 <li>{h}</li>
10 ))}
11 </ul>
12 </div>
13 );
14 }
15}
demo/friends/index.js
1ReactDOM.render(
2 <div>
3 <Friend name="Jessica" hobbies={["Tea", "Frisbee"]} />
4 <Friend name="Jake" hobbies={["Chess", "Cats"]} />
5 </div>,
6 document.getElementById("root")
7);
Default Props
Components can specify default values for missing props
demo/hello-3/Hello.js
1class Hello extends React.Component {
2 static defaultProps = {
3 from: "Joel",
4 };
5
6 render() {
7 return <p>Hi {this.props.to} from {this.props.from}</p>;
8 }
9}
Set properties on element; get using this.props.propName.
demo/hello-3/index.js
1ReactDOM.render(
2 <div>
3 <Hello to="Students" from="Elie" />
4 <Hello to="World" />
5 </div>,
6 document.getElementById("root")
7);
Styling React
You can add CSS classes in JSX.
However: since class is a reserved keyword in JS, spell it className in JSX:
1class Message extends React.Component {
2 render() {
3 return <div className="urgent">Emergency!</div>;
4 }
5}
You can inline CSS styles, but now style takes a JS object:
1class Box extends React.Component {
2 render() {
3 const colors = {
4 color: this.props.favoriteColor,
5 backgroundColor: this.props.otherColor,
6 };
7
8 return <b style={colors}>{this.props.message}</b>;
9 }
10}