-
Notifications
You must be signed in to change notification settings - Fork 0
/
Style.js
154 lines (132 loc) · 4.9 KB
/
Style.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
//JAVASCRIPT STYLE GUIDE
//last updated: 9/16/2019
//NAMING CONVENTIONS
//THESE WILL BE ENFORCED WITH A VENGANCE
//UpperCamelCase := React Component
//lowerCamelCase := function
//slither_case := object (anything that isn't a function or a React component)
//you should know the difference between default and non-default import statements
//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
import React, { Component } from 'react'
//we have three ways to declare variables in javascript
//CONST cannot be changed! They should be used for any static values
//CONST are block scoped - you should know what that means!
//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
const final_const = {
is_stylish: true,
can_change: false,
}
//VAR are defined in their execution context. If this is outside
//of a function, then it is declared in the global namespace!
//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
var initial_var = {
can_change: true,
}
initial_var.can_change = false
//LET are block scoped variables that can be altered
let initial_let = {
can_change: true,
will_use_a_lot: true,
}
//Example of a class based component in React
class Style extends Component {
//any props that are necessary for the component should be documented here
/*
simple_prop := boolean, an example of a simple prop with a single type
another_simple_prop := integer, another simple prop with a single type
more_complicated_prop := [ ints ], an array of integers
most_complicated_prop := {
data := [ {
text: string, data is an array of objects with a key text that maps to a string
}],
is_loaded: boolean, true if the data has been loaded
}
*/
constructor(props) {
//What is super?
//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super
super(props)
//Declare the initial state
this.state = final_const
//bind any functions that need `this` as context
//binding in the construtor is prefered so that methods are bound once per component mount
this.classFunction = this.classFunction.bind(this)
}
//an example of a simple function that needs to be bound
classFunction(event) {
this.setState({
trigged_function: event.target.id,
})
}
//an example of a simple function that does not need to be bound
classFunction2(value) {
value = value.split(", ").join("/")
return value
}
render() {
//always wrap JSX assignments and return statements in parentheses
return (
//opening and closing tags should always be at the same indentation level
<div
//each prop of a JSX component should be a newline
style={{ height: '10px' }}
onClick={ (event) => this.classFunction(event)}>
Out here with style
</div>
)
}
}
//alternatively, we can write our React elements as functional components
//what is object destructuring?
//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
export const Style2 = ({first_prop, second_prop}) => {
//document your props!
/*
first_prop := boolean, true if the sky is blue
second_prop := integer, I'm only here to make the destructuring example look cool
*/
//just like with return statements, wrap JSX assignments in parentheses
const content = (
<div>
The wonderful world of JSX
{ " You should be very comfortable with JSX's bracket notation" }
</div>
)
//when you are writing your components, try to keep things as D(ont)R(epeat)Y(ourself) as possible
//example
//this is pretty bad
let final_div
if (first_prop === 'whatever') {
final_div = (
<div> All I really needed to do was change the text! </div>
)
} else {
final_div = (
<div> But I made two divs for it! </div>
)
}
//now you have to make changes to the code in two places to keep a single div styled
//that's bad!
///this is better
let var_text
if (first_prop === 'whatever') {
var_text = "This is what I really needed!"
} else {
var_text = "Some DRY code!"
}
final_div = (
<div> { var_text } </div>
)
//or even more concise
final_div = (
<div> { (first_prop === 'whatever') ? "Use this string if the expression is true" : "Otherwise use this one!" } </div>
)
return (
<div>
Just another example
{ content }
{ final_div }
</div>
)
}
export default Style