Meteor Course Notes (1/4)

MongoDB

Create Document

1
SomeCollection.insert({ ... })

Find Document

1
2
3
SomeCollection.insert({ ... }).fetch() // returns an array

SomeCollection.insertOne({ ... }) // return one document

Update

Replace documents:

1
SomeCollection.update({ ... }, { ... })

Update specific field by specific operation:

1
2
3
4
5
SomeCollection.update({ ... }, { 
$set: {
someField: someValue
}
})

Remove

1
2
SomeCollection.remove({ ... })
SomeCollection.remove(id)

Form

Prevent form from default behavior:

1
2
3
4
5
6
7
<form onSubmit={handleSubmit}>
...
</form>

let handleSubmit = (e) => {
e.preventDefault()
}

Get value from an element in the form when form is submitted:

1
2
3
4
5
6
7
8
<form onSubmit={handleSubmit}>
<input type="text" name="someName">
</form>

let handleSubmit = (e) => {
e.preventDefault()
console.log(e.someName.target.value);
}

React Component

Pass data into component

In where TitleBar is created, pass the title:

1
<TitleBar title={"Jude Gao"} />

In TitleBar.js, refer to the title prop:

1
<h1>{ this.props.title }</h1>

Typechecking with PropTypes

Install prop-types via NPM:

1
npm install prop-types --save

title is a string and required:

1
2
3
4
TitleBar.propTypes = {
title: PropTypes.string.isRequired,
subtitle: PropTypes.string
};

Fix Callback this Binding

In the React component definition:

1
2
3
4
5
6
f() {}
render () {
return (
<form onSubmit={this.f.bind(this)}></form>
)
}

Conditional Render

If lst is empty, render a text; otherwise, render lst:

1
2
3
4
5
6
7
8
9
render () {
if (lst.length) {
return (
... // render your list
)
} else {
return <em>List is empty</em>
}
}

Sort Query Documents

In the mongodb console, show score in ascending order:

1
db.players.find().sort({ score: 1 })

Fetch score in descending order:

1
Players.find({}, {sort: {score: -1}}).fetch();

Use name as tie breaker:

1
Players.find({}, {sort: {score: -1, name: 1}}).fetch();

UI & UX

Install SCSS

1
meteor add fourseven:scss

Add Class to Component

1
<div className="myClass"></div>

Standardize Unit

1
2
3
4
5
6
7
html {
font-size: 62.5%;
}

h1 {
font-size: 2.4rem;
}

2.4rem kind of becomes 24px, but relative to the browser.

SCSS Import

Import a partial whose file name is _main.scss:

1
@import "../imports/client/styles/main";

BEM (Block-Element-Modifier)

1
2
3
4
some-block { ... }
some-block__some-element {...}
some-block--some-modifier {...}
some-block__some-element--some-modifier {...}

Transition Style

Transition background from white to brown:

1
2
3
4
5
6
7
8
button {
background: white;
transition: background .2s ease, transform .2s ease;

&:focus, &:hover {
background: black;
}
}

Transform Style

Scale the element:

1
transform: scale(2.4)

CSS Flex Box

Add flex to the display property of main class:

1
2
3
.main {
display: flex;
}

Take up all remaining space for child is defined as

1
2
3
.grow {
flex-grow: 1;
}

No space on the left and on the right but space between each child:

1
justify-content: space-between;

Never shrink the element:

1
flex-shrink: 0;

Align each element vertically:

1
align-items: center;

Responsive Website

1
<meta name="viewport" content="width=device-width, initial-scale=1">

Children Prop

1
2
3
<Component>
<Anything></Anything>
</Component>
1
2
3
4
5
6
7
8
9
render () {
return (
<div>
...
{ this.props.children }
...
</div>
)
}

Third-Party Package - react-flip-move

Install

1
meteor npm i react-flip-move --save

Import

1
import FlipMove from 'react-flip-move'

Use

1
2
3
4
5
render () {
<FlipMove>
{/* place the list here */}
</FlipMove>
}

Object Spread Operator

1
2
3
4
5
6
7
8
9
10
11
12
let user = {
name: 'Jude',
location: 'Philadelphia'
};

let person = {
name: 'Troy',
...user,
age: 25
};

console.log(person);

Print:

1
{ name: 'Jude', location: 'Philadelphia', age: 25 }

Numeral.js

Install

1
meteor npm install numeral --save

Import

1
import numeral from 'numeral'

Use

1
numeral(number).format('0o')