React

References

• Helpful React blogs

  • https://ultimatecourses.com/blog/category/react/

Create a New React App

Create React App

GitHub: https://github.com/facebook/create-react-app

Requires Node >= 8.10 and npm >= 5.6

In a terminal

npx create-react-app my-app-name
cd my-app-name
npm start

npx is a package runner that comes with npm 5.2+

The above command does NOT require create-react-app to be installed globally.

Create React App

• only creates the front end build pipeline
• uses Babel and Webpack

Add Typescript

See the Typescript documentation.

Add Redux

https://react-redux.js.org/introduction/quick-start

Add SASS

See the Styling documentation.

Preventing Build Chunks / Code Splitting

See the Prevent Build Chunk Splitting documentation.

React Docs

• Components and Props: https://reactjs.org/docs/components-and-props.html
• State and Lifecycle: https://reactjs.org/docs/state-and-lifecycle.html
• JSX: https://reactjs.org/docs/jsx-in-depth.html

React Fundamentals

• Chrome extension: React Developer Tools

  • Used to inspect react apps in the browser

• React.createElement(“h1”, null, “Hello!”);

• JSX

  • JavaScript XML

  • Declares DOM structure and evaluates to functions and renders to an Object

  • You can see what your JSX code looks like as React js code using the Babel Try It Out editor (https://babeljs.io/ → Try It Out)

  • Use the className attribute to apply style to a JSX element

  • Custom component names need to be capitalized.

    • e.g. function Hello(props) { return (<div><h1>Hello</h1></div>);}
    • <Hello />

• State

  • State is local to a component.
  • Set/define a component’s initial state within it’s constructor
  • Use setState to merge updates to the component’s state. This will cause a render.

• Props

  • Props are used to pass data/information into a component.

  • If you pass no value for a prop, it defaults to true.

  • Object.keys(props).length - this will give you a count of props being passed to a component

  • props.children

    • Used to access child elements defined within a component DOM reference (e.g. <MyComponent><p>Some content that will show up in props.children</p></MyComponent>).
    • Children passed to a custom component can be anything, as long as that component transforms them into something React can understand before rendering.

• Virtual DOM

  • represents the state of the DOM

• Synthetic Events

  • Your event handlers will be passed instances of SyntheticEvent, a cross-browser wrapper around the browser’s native event.
  • onClick, onChange, etc
  • passed as callbacks to JSX
  • need to bind the callback to ‘this’ in the component’s constructor in order to be able to access this within the function.
  • e.stopPropagation() or e.preventDefault() should be triggered manually to prevent component rendering.
  • The SyntheticEvent object will be reused and all properties will be nullified after the event callback has been invoked for performance reasons. You cannot access the event in an asynchronous way (e.g. from within a setTimeout called within the synthetic event handler).

• Anonymous Functions

  • Avoid using anonymous functions in the component render functions to avoid re-building the function on each render. It is better to reference a defined function.

• Fragments

  • Group a set of children without adding extra nodes to the DOM.

  • Use <React.Fragment>…</React.Fragment> or …

    • Using … does not support setting attributes or keys.

    • Key is the only attribute supported by React.Fragment <React.Fragment key={item.id}>…</React.Fragment>

    • The key attribute is used by React for rendering reasons and is not accessible by props.key within the component. Specify a different property name to pass the key value in if the value is needed within the component.

      function Glossary(props) {
        return (
          <dl>
            {props.items.map(item => (
              // Without the `key`, React will fire a key warning
              <React.Fragment key={item.id}>
                <dt>{item.term}</dt>
                <dd>{item.description}</dd>
              </React.Fragment>
            ))}
          </dl>
        );
      }

• Lifecycle Methods

  • Lifecycle cheetsheet: https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

  • componentDidMount()

    • Runs after the component output has been rendered to the DOM (immediately after a component is inserted into the DOM tree).
    • This is a good place to set up a timer.
    • Initialization that requires DOM nodes should go here.
    • If you need to load data from a remote endpoint, this is a good place to instantiate the network request.

  • componentDidUpdate()

    • Invoked immediately after updating occurs.
    • Is not called for the initial render.
    • Use this as an opportunity to operate on the DOM when the component has been updated.
    • This is also a good place to do network requests as long as you compare the current props to previous props.

  • componentWillUnmount()

    • When instance of component is removed from the DOM