Workshop
Slides: goo.gl/bPBbiy
About Cybercom
Who are we?
Agenda
Breakfast
React Introduction
Fika
Examples
Coding! & Lunch
Who are you?
What is React?
"A JavaScript library for building user interfaces"
Why is it worth knowing about?
- Very popular in lots of companies
- Used in Web, Mobile, VR and hopefully AR
- Simplifies building complex user interfaces
- Very attractive in the job market
- We really like it!
So lets dive in!
But first...
A note about JavaScript
ES6 usage is rampant in our examples
ES6 Arrow functions
const alwaysTrue = function () {
return true;
}
// Can be written in ES6 as
const alwaysTrue = () => true;
Arrow functions has
very short syntax
Which is great in callback functions
onClick(function(event) {
return event.target.value;
});
// Becomes this when using arrow functions
onClick(event => event.taget.value);
ES6 Variable declarations
(() =>{
var foo = 1
let bar = 1 // Block scoped
if (true){
var foo = 2 // Same variable
let bar = 2 // Dif. scope
}
console.log('foo = ' + foo)
console.log('bar = ' + bar)
})()
//Returns
foo = 2
bar = 1
const x = 123 //Cannot be reassigned & block scoped
ES6 Classes
function Boo() {}; // Is hoisted
class Far {}; // Has a constructor & is not hoisted
var object = new Far() // Instantiate a class object
Enough is enough, show me some React!
Actually
HTML in JavaScript?
Time to test it out!
Lab 1
Create your first component
goo.gl/tKtNxn
Lab 1
Lab 1 - Solution
How do you pass data to components?
Via props
Lets try it
Lab 2
Use props to pass data
goo.gl/fyk14n
Lab 2
Lab 2 - solution
How do you build dynamic applications?
Via state
Component state
Each component can have its own state
State can be passed down to other components
Different types of components
Stateless (functional)
const Hello = ({you}) => (Hello, {you}!)
class Hello extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
Hello {props}
)
}
}
Lab 3
Use state to make application dynamic
goo.gl/xSTQln
Lab 3
Lab 3 - solution
How to think "in React" when building applications?
Create a static prototype of the application
Could be on paper, whiteboard or a HTML prototype
Break the UI into components
How does the data flow through the app?
Which components has a shared state?
"Data down, actions up"
How to handle async operations
Via Fetch web API
Fetch example
Lab 4
React and Fetch
goo.gl/9h3n2I
Lab 4
Lab 4 - solution
Lab 4 - Extra
- Use the code in your last example
- Check the API for fetching jokes via query
- Add the functionality to search via input field
- Only show the first 5 hits!
- Correct error handling for empty field and when query is not found