Uppdaterad 2024-09-17

React

Typer

React Native

Moduler

Tillägg för Mozilla Firefox Tillägg för Google Chrome

Webbplats

Github.io Facebook React Boilerplate https://fb.me/react-devtools

HTML och Javascript

<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.min.js"></script>

React is a declarative, efficient, and flexible JavaScript library for building user interfaces.

Förkortningar

NDK - Native Development Kit
JSX - JavaScript XML
HMR - Hot Module Replacement
FAB - floating action button
SSR - Server Side Rendering

Uppsättning med NPM

npm i create-react-app npx create-react-app . --use-npm --typescript "use strict"; <GreenBubble noMarginLeft={true} /> margin-left: ${props => props.noMarginLeft ? '0' : '5px'}; ${({ level }) => colorsBasedOnLevel[level]}; ${(props) => colorsBasedOnLevel[props.level]};

How to combine multiple inline style objects to a Component

<div style={{...styles1, ...styles2}} />

How to add multiple classes to a Component

<div className={[styles.class1, styles.class2].join(' ')} />

JSON som görs om till CSS

const divStyle = {
  backgroundColor: '#000',
  color: '#fff'
};
function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

Loop för lista (länk)

render: function() {
  const elements = ['one', 'two', 'three'];
  return (
    <ul>
      {elements.map((value, index) => {
        return <li key={index}>{value}</li>
      })}
    </ul>
  )
}

Använd en komponent `App.tsx`

import Table from './Table.tsx';

<Table data={locations} />

Skapa en komponent `Table.tsx`

function Table(props) {

export default Table;

Skapa en klass-komponent `Table.tsx`

import React, { Component } from 'react';

class Table extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      {this.props.data}
    );
  }
}

export default Table;

Hämta JSON från filer

import { text } from './data.json';

console.log(text);

React component closing tag

<Component /> = <Component></Component>
<Component foo="bar" /> = <Component foo="bar"></Component>
<Component children={<span>foo</span>}></Component> = <Component><span>foo</span></Component>

Example

messagesContainer.tsx

import { Jimmy } from '../../layout/layout';
...
return <Jimmy />;

layout.tsx

import { withStyles, WithStyles } from '@material-ui/core';
import React from 'react';
import { styles } from './styles';

interface Props extends WithStyles {}
function Kevin(props: Props) {
  const { classes } = props;
  return <div className={classes.fullformat}>Henrik</div>;
}

export const Jimmy = withStyles(styles)(Kevin);

styles.tsx

import { withStyles, WithStyles } from '@material-ui/core';
import React from 'react';
import { styles } from './styles';

interface Props extends WithStyles {}
function Kevin(props: Props) {
  const { classes } = props;
  return <div className={classes.fullformat}>Henrik</div>;
}

export const Jimmy = withStyles(styles)(Kevin);

Liknande

Angular

Ord

Context
Hooks
Lifecycle
Race condition(s)
Modern javascript
Saga
Redux
Side effect

Moduler

Komponenter

Negativt

Komponenter

Delar

Begrepp

Action
Dispatcher
Reducer

Race condition

Fil

state/rootReducer.js Clusterfuck

Anledningar till att inte använda React

Onödig komplexitet, när man frågar enkla frågor får man oftast långa otydliga svar
Komponenter återanvänds ofta inte
Styling begränsas eller görs med Javascript snarare än CSS
Frångår den webb-standard som finns
Använder saker som inte är standard än
Måste ~~kompileras~~ transpileras, gör att applikationen tar längre tid att utveckla, men att den oftast blir långsammare
Ofta problem med prestanda i större applikationer
Kräver tillägg för att inspekteras
Fungerar inte i Internet explorer
Att använda Typeskript leder till mer kod och falsk trygghet kring typning
Konsistent design och komponenter har inget med komponenter i React att göra
Många som ingen har koll på och som slöar ned applikationen
Styling med Javascript istället för CSS
Stora uppdateringar kommer relativt ofta och förebygger en långsiktig kodbas
Ständiga diskussioner kring vad som är en dynamisk kontra optimerad komponent
Svårigheter att lösa komplexa problem som uppstår som annars hade varit självklara
Data som måste propagera genom diverse trädstrukturer/hierarkier av "komponenter", gör att kod som är tänkt att enkapsuleras skapar komplexa beronenden mellan varandra
Logik i front end som borde legat i back end
Tester i front end som testar design snarare än vilken data som faktiskt visas
Används ofta av personer som oftast hoppar på nya obeprövade tekniker så fort dom släpps, och som har bristande kunskaper kring webbutveckling
Använda ofta av konsulter eftersom de får betalt per timme
Många projektledare och kravställare tror att man måste använda ett ramverk för en större applikation
Projekt som aldrig blir färdiga
Försätter företag i konkurs
Skrollbars från helvetet ?
React används ofta av personer som har större erfarenhet av programmering än webbutveckling
Den som har erfarenhet av webbutveckling vet att det snart kommer något som är ännu "häftigare", exempelvis hur många använder jQuery idag jämfört med för 10 år sedan?
WSOD istället för felmeddelande
Genererar ofta vaga eller inga felmeddelanden
Slutar ofta fungera om man inte har senaste webbläsare

Sammanfattning

~~Prestanda~~
~~Hastighet~~
~~Effektivitet~~
~~Långsiktighet~~
~~Simplicitet~~
~~Prestanda~~
~~Dynamik~~
~~Standard~~

ASCII art för Material UI

███╗   ███╗ ██╗   ██╗ ██████╗
████╗ ████║ ██║   ██║   ██╔═╝
██╔████╔██║ ██║   ██║   ██║
██║╚██╔╝██║ ██║   ██║   ██║
██║ ╚═╝ ██║ ╚██████╔╝ ██████╗
╚═╝     ╚═╝  ╚═════╝  ╚═════╝