Untitled

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!');
}