React i webpack
Wartości propsów i dzieci komponentu
<List title={['Things to do ', <sup>soon!</sup>]} />
<List title={['Things to do ', <sup key='1'>soon!</sup>]} />
<List title={['Things to do ', <sup>soon!</sup>]}>
<p>I'm planning on doing all these things sooner, rather than later!</p>
</List>
Wykorzystanie danych z dataStore.js
import {pageContents, listData} from '../../data/dataStore';
<main className={styles.component}>
<h1 className={styles.title}>{pageContents.title}</h1>
<h2 className={styles.subtitle}>{pageContents.subtitle}</h2>
<List {...listData} />
</main>
Parsowanie kodu HTML
<h2 className={styles.title}>{ReactHtmlParser(props.titleText)}</h2>
Modyfikacja stanu
<div className={styles.creator}>
<Creator text={settings.columnCreatorText} action={title => this.addColumn(title)}/>
</div>
addColumn(title){
this.setState(state => (
{
columns: [
...state.columns,
{
key: state.columns.length ? state.columns[state.columns.length-1].key+1 : 0,
title,
icon: 'list-alt',
cards: []
}
]
}
));
}
addColumn(title){
this.setState(function(currentState){
// create new column object with properties
let newColumn = {
key: state.columns.length ? state.columns[state.columns.length-1].key+1 : 0,
title,
icon: 'list-alt',
cards: []
};
// create copy of current state
let newState = Array.from(currentState);
// add new column to new state
newState.columns.push(newColumn);
// return new state
return newState;
});
}
Quiz powtórkowy
2.
var htmlString = '<strong>Hello World!</strong>';
var domElement = document.createElement('div');
domElement.classList.add('greeting');
domElement.innerHTML = htmlString;
var domElementStrong = domElement.querySelector('strong');
domElementStrong.classList.add('highlighted-text');
5.
<header id="page-header" class="wide-header">
<div class="container">
<a id="company-name" href="/">Lorem Company</a>
<a id="menu-trigger" class="button-link" href="#">MENU</a>
</div>
</header>
body {font-size: 12px;}
body header div a { color: red; }
#page-header .button-link { color: purple; font-size: 14px; }
.wide-header #menu-trigger { color: green; }
a { color: blue; }
[href="/"] { color: orange; }
header { font-size: 16px; }
Czym są testy jednostkowe?
const change = calcChange(100, 92.6);
const expectedResult = 7.4;
if(change != expectedResult) {
console.error('Function calcChange did NOT pass the test!');
}