Rules to Better React

​​​

Hold on a second! How would you like to view this content?
Just the title! A brief blurb! Gimme everything!
  1. Do you know when to use React?

    Angular is great for building large enterprise applications but it is a full framework that works best as a full application.

    React, however, is easier to embed on another framework or application such as Office 365 or Sharepoint.

  2. Do you know the best way to start a new React solution?

    ​Follow the React ​documentation to get up and going. They will guide you to use the "create-react-app" npm package.
    create-react-app.png
    Good example: Use the create-react-app npm package
  3. Options - Do you use Typescript for your Angular and React Applications?

    ​Typescript is the best choice ​when writing Angular​ and React applications. Angular is even written in Typescript itself! 

    Typescript allows you to strongly type your JavaScript code as well as use the new ES6+ specifications.

    You can start learning more about typescript at http://www.typescriptlang.org/.

    You should also check out SSW TV Videos on Typescript.

  4. Do you know the best package manager for React?

    ​When working with JavaScript packages there are 2 common choices:
    npm-logo.jpg
    Figure: npm is the backbone of JavaScript development but after the left-pad disaster of 2016 lots of developers wanted more power
    yarn-logo.jpg
    Figure: Yarn is fast and enables offline support - ​If you've installed a package before, you can install it again without any internet connection (no more left-pad disasters)
  5. Do you know the best practice for managing state?

    ​State management is complex and time-consuming.​​​​​

    The redux pattern helps resolve this issue.

    maintaining-state.png
    Bad example: maintaining state on individual components
    redux-logo.png
    Good example: use the redux pattern

    The 4 principles of the redux pattern:

    1. The entire state of the application is represented in a single JavaScript object called a store [https://redux.js.org/docs/basics/Store.html ].
    2. The store is acted upon using special functions called reducers [ https://redux.js.org/docs/basics/Reducers.html ].
    3. State is immutable and reducers are the only part of the application that can change state.
    4. Reducers are pure JavaScript functions. This means they cannot import external dependencies.

    Side Effects
    To perform operations that require external dependencies (such as communicating with a web server), we can implement side effects. These can use external dependencies but they cannot directly modify the store. They can invoke reducers to modify the store when the side effect is complete

    redux-saga is a library that provides redux application side effects.
    The advantages of using redux-saga are:
    1. Collects all asynchronous operations in one place, making the code clearer.
    2. Uses an  ES6 feature called Generators to make asynchronous flows easy to read, write and test.
    3. Generators also let these asynchronous flows look like your standard synchronous code (kind of like async/await in C#). This solves “callback hell” [https://en.wiktionary.org/wiki/callback_hell ]