import { Head, Appear } from "mdx-deck"; import Logo from "./assets/images/logos/rdc-icon.svg"; export { default as theme } from "./theme"; import { CodeSurfer } from "mdx-deck-code-surfer"; import ultramin from "prism-react-renderer/themes/ultramin";
✨ Time to finally learn about React ✨
function add(a, b) {
return a + b
}
const add = function(a, b) { return a + b } // Anonymous Function
const add = (a, b) => { return a + b } // ES6 (new) SyntaxThree different ways of making a function!
const double = (x) => { return 2*x } // Most verbose
const double = (x) => (2*x) // No return statement needed!
const double = x => 2*x // No {} or () needed-
one statement functions don't need
returnor {} -
functions with one parameter don't need parenthesis
let a = {hello: 5, world: "hello there"}
a['hello'] // == 5
a.world // == "hello there"
a.instructors = ["Ethan", "Aivant"]A set of key-value pairs where the keys are strings and values can be anything
let calculator = {
double: x => 2 * x,
add: (x, y) => x + y
}
calculator.double(5) // == 10
calculator.subtract = function(x, y) { return x - y }The values of an object can also be functions!
let numbers = [1, 2, 3, 4, 5]
let doubled = numbers.map(x => 2 * x)
console.log(doubled) // [2, 4, 6, 8, 10]
console.log(numbers) // [1, 2, 3, 4, 5]Array.map transforms an array of one thing into an array of another
React is a JS Library that lets us modularize our app via reusable components
<body>
...
<script src="https://.../react.development.js" />
<script src="https://.../react-dom.development.js" />
</body>This adds the code for React to our project!
Best seen through a demo! Code will be available afterwards
Now you can start adding React to your websites :)
On Tuesday we'll build the beginnings of Twitter using React!