Learning guide for React and javascript

Getting Started

Install MS Visual Studio it has minimal config and great performance.

• Great introduction video

OPTIONAL - Install Prettier

My Editor settings after installing these packages (using atom keybindings)

{
  "editor.tabSize": 2,
  "prettier.eslintIntegration": true,
  "eslint.autoFixOnSave": true,
  "prettier.semi": false,
  "window.zoomLevel": 1,
  "editor.formatOnSave": true,
  "javascript.format.enable": false,
  "atomKeymap.promptV3Features": true,
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.formatOnPaste": true,
  "editor.renderWhitespace": "none"
}

Now you should be able to use the editor format shortcut to get amazing formatting instantly BAM!

1. Modern javascript and React

• Learn Javascript and basic es5/es6 syntax http://es6-features.org/ [REPL/DEMO]
• Learn Basic React
• Install Create react app and read the guide (yes its long)
• Understand Promises with this article by eric elliott
• Use styled components as much as possible e.g

const FlexCentre = ({ children }) => 
  <div style={{ display: 'flex', justifyContent: 'center' }}>{children}</div>

OR

const FlexCentre = ({ children }) => 
  <div className="FlexCentre">{children}</div>

with

.FlexCentre {
  display: flex;
  justifyContent: center;
}

• Use stateless components as much as possible e.g

const Button = ({ onClick, name }) => 
  <button onClick={onClick}>{name}</button>

• Use proptypes whenever possible e.g

const ListOfNumbers = props => (
  <ol className={props.className}>
    {
      props.numbers.map(number => (
        <li>{number}</li>)
      )
    }
  </ol>
);

ListOfNumbers.propTypes = {
  className: React.PropTypes.string.isRequired,
  numbers: React.PropTypes.arrayOf(React.PropTypes.number)
};

• Avoid functions in render as much as possible e.g

<button
 onClick={function}
 />

NOT

<button
 onClick={() => function()}
 />

ALSO watch out for this as it will call the function on each render

<button
 onClick={function()}
/>

Optional

• Learn react from a lower level React Armory

2. More Javascript, testing and tooling for react

• [Composing react components] (https://medium.com/javascript-inside/the-elegance-of-react-ebc21a2dcd19)
• Understand functional patterns that are everywhere in react and modern javscript with the FunFunFunction video series (watch the whole series)
• Learn Jest Test Framework(Comes built into create react app) [REPL/DEMO] TIP: Use smoke test for all stateless/functional/presentational components and Jest snapshots for containers/class/state components.
• Learn Redux and watch the fantastic video series
• Learn advanced routing with either React-router v4(component based), redux-first-router(redux based)

Optional

• Learn how closures work Closures by Eric Elliott
• Explore functional and fundamental javascript concepts with Eric Elliot Functional Javascript by Eric Elliott (the whole series is great)

3. Emerging trends and advanced tooling

• Understand advanced functional patterns that influence emerging techniques in javascript and react. Frisby composable javascript course (you dont need to finish this, check the code if you are confident)
• Learn Flow [REPL/DEMO]
• Learn how to apply Recompose and write functional UI Example

Optional

• Dr boolneans guide to functional Programming [ ES6 Version ]
• Explore styled component library for better css management
• Check out rxjs

Resources

Great libraries worth a look

• Lodash and lodash/Fp
• date-fns
• Rambda
• FairyTale (Task)