Please enable JavaScript.

Coggle requires JavaScript to display documents.

React V16 (Redux (What is redux? (https://redux.js.org/, Is a predictable…

- - - - unsubscribing
        
        can call the returned function directly in order to unsubscribe
        
        calling subscribe returns a function
        
        returned function is unsubscibe()
      - store.subscribe()
      - listening on state changes
    - - accessing the current state
    - - dispatching an action
  - - - Are JavaScript objects
        
        Needs a type property
        
        examples
        
        {type: INCREMENT}
        
        {type: SET }
        
        {type: RESET}
        
        {type: DECREMENT}
        
        describes
        how the state should change
        
        it is nothing more than a string
        
        with optional payload properties
        
        Best Practise
        
        Wrap every action within a function :check:
        
        Such function is an action creator
        
        function addArticle(payload) {..}
        
        returns action object
        
        return { type: "ADD_ARTICLE", payload }
        
        declare action type as constant :check:
        
        to avoid typos
        
        to avoid dublicates
        
        const ADD_ARTICLE = "ADD_ARTICLE";
        
        send to the store
    - - when reducers grows
        
        use combineReducers to combine separat functions
        
        multiple reducers
        
        import { createStore, combineReducers } from 'redux';
        
        split in separate functions
      - Is just a JavaScript function.
        
        Beware of immutability :fire:
        
        your code have to return a copy of the state object !
        
        using :check:
        
        for objects
        
        ...spread
        
        1 more item...
        
        assign()
        
        for arrays
        
        concat()
        
        slice()
        
        ...spread
        
        example
        
        use array.concat instead of array.push
        
        return a new object with Object.assign
        
        never change the state object directly
        
        never mutating the original object !
        
        takes two parameters
        
        current state
        
        action
      - state comes from reducers :pencil2:
      - they produce the state of the application
      - As soon the store recieves an action it triggers a reducer
    - - store orchestrates all the moving parts in Redux
      - const store = createStore(rootReducer);
        
        takes a reducer as first argument
      - Its like a brain
  - - - access the same state
      - there is no parent/child relationship
  - - - Dispatching an action !!
        
        can change only in response to actions.
        
        The resulting state is a copy of the current state plus the new data.
    - - state is immutable
      - lives as a single object
  - - - yarn add react-redux@5.0.5
      - is a Redux binding for React
      - Most important method is connect
        
        connects a component with the redux store
        
        arguments
        
        mapStateToProps
        
        mapDispatchToProps
    - - import { Provider } from 'react-redux'
      - <Provider store={store}>
- - - - value={this.state.firstName}
      - setzt den aktuellen Wert aus dem state objekt in dem Form element
  - - - taking all the pain of working with react forms
    - - Time Library
        
        never use Date directly
        
        moment is standard
        
        use const now = moment();
      - yarn add moment@2.18.1
      - import moment from 'moment';
    - - Different Date Pickers
      - yarn add react-dates@12.7.0
      - import { SingleDatePicker } from 'react-dates';
      - import 'react-dates/lib/css/_datepicker.css';
      - Look for necessary props in github documentation
    - - yarn add react-addons-shallow-compare@15.6.0
      - Utility function used by react-dates
      - react-dates does not support it anymore
- - - - create-react-app --version
      - npm install -g create-react-app
      - https://facebook.github.io/create-react-app/docs/getting-started
      - npm init react-app my-app
    - - create-react-app my-app
      - imports
        
        import React from "react"
        
        import ReactDOM from "react-dom"
      - yarn start
  - - - Extensions / Plugins
        
        Babel ES6/ES7
        
        Path Intellisense :star:
        
        Prettier Code Formatter (not always recommended)
        
        React-Native/React/Redux snippets for es6/es7 :star:
        
        Shortcuts
        
        imr (import react)
        
        imrc (import react component)
        
        sl (stateless component)
        
        slr (stateless component with written statement) :star:
        
        https://marketplace.visualstudio.com/items?itemName=EQuimper.react-native-react-redux
        
        ccs (component class)
        
        slc (component function)
        
        edccs (export default component class) :star:
        
        alternative plugin
        
        Reactjs code snippets
        
        but less automatically
        
        Autoimport
        
        just add the component tag
        
        React Pure To Class
  - - - yarn
        
        use msi installer :warning: instead of npm
        
        https://yarnpkg.com/en/docs/install#windows-stable
        
        Simple Environment without webpack
        
        live-server
        
        yarn global add live-server :pencil2:
        
        babel
        
        yarn global add babel-cli@6.24.1 :pencil2:
        
        babel --help
        
        babel src/app.js --out-file=public/scripts/app.js --presets=env, react --watch :pencil2:
        
        https://babeljs.io/docs/en
        
        babel-presets
        
        yarn add babel-preset-react@6.24.1 :pencil2:
        
        yarn add babel-preset-env@1.5.2 :pencil2:
        
        yarn init (package.json) :pencil2:
        
        create project folder
        
        create src folder
        
        index.html
        
        cdn importts
        
        react
        
        react-dom
        
        Express server
        
        yarn add express@4.15.4
        
        Webpack
        
        avoid global modules :fire:
        
        yarn add webpack@3.1.0
        
        package.json script
        
        build: "webpack --watch"
        
        yarn run build
        
        create webpack.config.js
        
        in project root
        
        module.exports = { .. }
        
        entry: './src/app.js'
        
        start point for webpack
        
        output: { .. }
        
        path: path.join(__dirname, 'public')
        
        2 more items...
        
        filename: 'bundle.js'
        
        documentation: webpack.js.org
        
        index.html
        
        no cdn imports of react.js and react-dom.js necessary
        
        import bundle.js
        
        <script src="/bundle.js"></script>
        
        ES6 import/export
        
        yarn add react@16.0.0 react-dom@16.0.0
        
        react imports
        
        in app.js
        
        import ReactDOM from "react-dom"
        
        import React from "react"
        
        rendering
        
        1 more item...
        
        JSX Support
        
        loader
        
        webpack.config.js
        
        module: { .. }
        
        1 more item...
        
        yarn add babel-core@6.25.0
        
        used by other tools like webpack
        
        similar to babel-cli (for command line)
        
        babel-presets
        
        2 more items...
        
        yarn add babel-loader@7.1.1
        
        create .babelrc
        
        { "presets": [ .. ] }
        
        "env"
        
        "react"
        
        Source Maps
        
        devtool
        
        webpack.config.js :
        
        devtool: 'cheap-module-eval-source-map' :pencil2:
        
        1 more item...
        
        needs webpack restart
        
        Chrome console
        
        for debugging
        
        bundled js file is difficult to debug
        
        shows problem in scurce before bundling
        
        Webpack Dev Server
        
        yarn add webpack-dev-server@2.5.1
        
        webpack.config.js
        
        devServer: { .. }
        
        contentBase: path.join(__dirname, 'public)
        
        package.json script
        
        "dev-server": "webpack-dev-server"
        
        only script we really need
        
        instead of live server :black_flag:
        
        serve code from memory :star:
        
        very fast
        
        refreshment in memory
        
        CSS preparation
        
        concat multiple css files in one file
        
        yarn add extract-text-webpack-plugin@3.0.0
        
        implement plugin in webpack.config.js
        
        setup a project with package.json
        
        yarn install
        
        with dev dependencies
        
        yarn install --production
      - Node.js
  - - - no constructor neccessary
      - properties are without var, let or const
      - arrorw functions
        
        no this binding
      - babel plugin
        
        plugin transform-class-properties
        
        yarn add babel-plugin-transform-class-properties@6.24.1
        
        add to .babelrc
  - - - .babelrc
      - index.html
      - package.json
      - webpack.config.js
      - style.scss
    - - components
      - styles for specific component
- - - - usually a single JSX element
        
        support multiple element by...
        
        use <div>..</div> for more than one JSX element
        
        use <React.Fragment>...</React.Fragment>
        
        It creates no additional element in the DOM. :smiley:
        
        Shortcut is <>... </>
      - JSX (JavaScript XML)
        
        looks like HTML, but its not
        
        Put JS in curly braces { ..}(escaping)
        
        JavaScript Expression
        
        only one line allowed
        
        Conditional rendering
        
        ternary operator possible:smiley:
        
        {user.name ? user.name : 'Anonymous'}
        
        Verwendung: Entweder das eine oder das andere ausgeben :check:
        
        undefined, null and boolean will be ignored :smiley:
        
        && logical AND operator
        
        wenn erster Ausdruck true, dann schreibe zweiten Ausdruck
        
        1 more item...
        
        wenn erster Ausdruck false, dann übernehme ersten Ausdruck
        
        1 more item...
        
        Usage: output sth or nothing :check:
        
        2 more items...
        
        outsourcing functions
        
        CSS style names are different
        
        e.g. Class is ClassName
        
        because of reserved words in JavaScript
        
        DOM Elements
    - - Camel Case
      - Important for rendering :fire:
    - - import MyInfo from "./MyInfo.js"
      - export default MyInfo
    - - Props
        
        arguments or parameters given to a component
        
        Is external, not controlled by the component :unlock:
        
        <Hello lastname ="heisenberg" firstname="walter" />
        
        props here are lastname and firstname
        
        access inside component with this.props.myprop
        
        props is just a naming convention, you can use any name :pencil2:
        
        use em with curly braces in JSX
        
        can pass method functions from parent component into child component :star:
        
        child components can use methods from parent and change the state in the parent
        
        you see this pattern very often
        
        communication between parent and child component
        
        can passing children
        
        pass JSX directly in component tag
        
        <Layout><p>This is inline</p></Layout>
        
        component read with props.children
      - State
        
        data that is managed by an component
        
        Data changes causes rerendering automatically
        
        constructor to initialize value
        
        constructor have to contain super()
        
        without super() this can not be initiated
        
        Changing State
        
        state values should not be changed directly :fire:
        
        state value has a special function for changing
        
        init or overwrite: this.setState = ({..})
        
        change: this.setState((prevState) => {..})
        
        this functions will trigger the rendering after a change
        
        old way !! :red_cross:
        
        passing in an object directly instead of a function
        
        1 more item...
        
        not recommended anymore
        
        problem with asynchronus update of previous state values
        
        Why :question:
        
        object value is changeable but ...
        
        ... it does not render automatically after changing :forbidden:
        
        class methods that works with the state must be bind to the current object :fire:
        
        within a constructor
        
        constructor(props) { super(props); ... }
        
        this.handleRemoveAll = this.handleRemoveAll.bind(this);
        
        this.handleClick = this.handleClick.bind(this)
        
        ATTENTION! Not necessary for ES6 arrow functions. :red_cross:
        
        the goal is to bind the event handler to the context of this
        
        Child Components will allways be rerendered if a state object is given as property
        
        state is private, changed by the component itself :lock:
      - similarities
        
        is an object
        
        key-value pairs
        
        this.state = {}
        
        this.props = {}
        
        can be used when rendering
        
        changes causes re-rendering
    - - but unique Key necessary
      - generated with JS map-Method
    - - Class Component
        
        css style methods are possible within the class
        
        accessing properties with this.props
        
        are ES6 classes
        
        use render() instead of return
        
        return will be used within the render method
        
        extends React.Component
        
        accessing method functions inside JSX with this.method name
        
        Life Cycle Methods
        
        verschiedene Methoden
        
        3 are deprecated :fire:
        
        component-lifecylce-changes
        
        how and when use them
        
        Compent Mounting Status
        
        will mount
        
        componentWillMount
        
        will unmount
        
        componentWillUnmount
        
        is mounted
        
        componentDidMount
        
        Component Update
        
        shouldComponentUpdate
        
        false
        
        true
        
        componentWillReceiveProps
        
        componentWillUpdate
        
        componentDidUpdate
        
        after the props or state values changed
        
        Reason for usage
        
        need of lifecycle methods
        
        need of state
        
        reference to functions within a class, do not call it with ()
      - Function Component
        
        are functions
        
        accept props as an argument
        
        return valid JSX
        
        "const Hello = ({name}) => <div>Hello {name}</div>"
        
        Reason for usage
        
        easy to read
        
        easy to test and debug
        
        you know input and output
        
        no hidden state
        
        less code
        
        Rules
        
        if a class component uses a render method only, use a functional component instead
        
        allways start with a functional component. You can easily change it to a class component if neccessary
        
        stateless
        
        ... .defaultProps = { title: 'Default value'}
    - - separation of Business Logic and UI Logic (Rendering)
        
        Presentational Component
        
        Smart Component
- - - - import { BrowserRouter, Route, Switch, Link, NavLink } from 'react-router-dom';
      - <BrowserRouter>
        
        <Route>
        
        Root = exact
        
        404 <switch>
        
        <Link to="/">Home</Link>
        
        <NavLink>
        
        only inside of main navigation
        
        more complex as link,
    - - always serve index.html
      - historyApiFallback: true
  - - - uuid()
- - - - scss
        
        SCSS preprocessor
        
        new loader
        
        yarn add sass-loader@6.0.6
        
        yarn add node-sass
        
        webpack.config.js
        
        use: [ ... ]
        
        'sass-loader'
        
        test: /.s?css$/
        
        rename style.css to style.scss
        
        app.js
        
        import './styles/style.scss'
        
        Normalize CSS
        
        yarn add normalize.css@7.0.0
        
        reset browser default styles
        
        app.js
        
        import 'normalize.css/normalize.css';
        
        all browser working out of the same base
        
        Themes
      - css
        
        webpack.config.js
        
        new rule
        
        test: /.css$/
        
        use: ['syle-loader', 'css-loader']
        
        new loader
        
        yarn add style-loader@0.18.2
        
        yarn add css-loader@0.28.4
        
        app.js
        
        create folder styles
        
        create style.css
      - sass
        
        very similar to scss
        
        different way to write code
  - - - https://react-bootstrap.github.io/getting-started/introduction/#stylesheets
- - - - needs code to realize a store connection
      - https://github.com/zalmoxisus/redux-devtools-extension#installation
      - add green code line to store
- - - - yarn (run) test
    - - test cases
      - syntax
        
        expect
        
        toBe(value)
        
        not
        
        toBeNull()
        
        toEqual(value)
        
        compare objects
        
        compare array
        
        test()
      - filename.test.js
      - import functions for testing
    - - new script
      - "test": "jest"
    - - cause ${value}
    - - yarn test -- --watch
        
        -- between to separate
        
        everything before -- is yarn
        
        everything after -- is script
        
        runs test after every change
- - - - Hooks let use state and other React features without writing a class
      - const [count, setCount] = useState(0);
        
        useState is a Hook
        
        it hooks a simple component into a state
      - works with ES6 destructuring
      - simmilar to a mixin