react-fundamentals/example.js at master · mlars84/react-fundamentals · GitHub

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
// //Composing functions together in order to get the end result, which is an object
// //with a pic property and a link property.
// var getProfilePic = function (username) {
//   return 'https://photo.fb.com/' + username
// }
//
// var getProfileLink = function (username) {
//   return 'https://www.fb.com/' + username
// }
//
// var getAvatarInfo = function (username) {
//   return {
//     pic: getProfilePic(username),
//     link: getProfileLink(username)
//   }
// }
//
// getAvatarInfo('tylermcginnis')
//
// //Component example ( in ES6 )
// const ProfilePic = () => {
//   return (
//     <img src={'https://photo.fb.com/' + this.props.username} />
//   )
// }
//
// const ProfileLink = () => {
//   return (
//     <a href={'https://www.fb.com/' + this.props.username}>
//       {this.props.username}
//     </a>
//   )
// }
//
// const Avatar = () => {
//   return (
//     <div>
//       <ProfilePic username={this.props.username} />
//       <ProfileLink username={this.props.username} />
//     </div>
//   )
// }
//
// <Avatar username="tylermcginnis" />
//
// //Imperative (How)
// let numbers = [4,2,3,6]
// let total = 0
// for (let i = 0; i < numbers.length; i++) {
//   total += numbers[i]
// }
//
// //Declarative (What)
// let numbers2 = [4,2,3,6]
// numbers.reduce((previous, current) => {
//   return previous + current
// })
// console.log(numbers2);
//
// //Just JavaScript
// <ul>
//   {friends.map((name) => {
//     <li>
//       {name }
//     </li>
//   })}
// </ul>
//
// //React Router
// <Router>
//   <div>
//     <ul>
//       <li><Link to="/">Home</Link></li>
//       li><Link to="/">about</Link></li>
//       li><Link to="/">topics</Link></li>
//     </ul>
//
//     <Route exact path="/" component={Home} />
//     <Route exact path="/about" component={About} />
//     <Route exact path="/topics" component={Topics} />
//   </div>
// </Router>

//Write a function called double which takes in an array of numbers and returns
//a new array after doubling every item in that array. double([1,2,3]) -> [2,4,6]

let doubled = []
let numbers = [1, 2, 3, 4]

double = (numbers) => {
  console.log(numbers)
  for (let i = 0; i < numbers.length; i++) {
    return doubled.push(numbers[i] * 2)
  }
}
double(doubled)

// console.log(doubled)