Awesome

Learning React.js

Create components in JavaScript using React. Conceptually, rendering logic and other UI logic are closely coupled; separate concerns by components instead of by HTML/JS/CSS. Composition > inheritance. And top-down data flow (but children can change other children/parent's state by calling shared parent's functions that are passed down to them via immutable props).

Just one of the things I'm learning. https://github.com/hchiam/learning and https://github.com/hchiam/learning-frameworks

Update: You can create a React web app by running one command: npx create-react-app my-app (Update update: maybe use nx instead). Or you can use Yeoman generators like this or this or try out a RealWorld spec app. Or use Next.js.

2020 React cheatsheet (with code examples)

<hr>

NEW NOTES

(To try my examples, npm install && npm run build and then open all the html files with open *.html.)

https://reactjs.org/docs/hello-world.html

https://reactjs.org/tutorial/tutorial.html -> https://codepen.io/hchiam/pen/BayOeZo?editors=0010

https://www.freecodecamp.org/learn/front-end-libraries/react

React developer tools

Firefox: https://addons.mozilla.org/en-US/firefox/addon/react-devtools -> open dev tools -> Components tab

Chrome: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

Coming from AngularJS?

ng-if? -> JavaScript if/ternary or embedded shorthand {isTrue && <p>show this</p>} or return null

ng-for? -> JavaScript loop or map (for example: numbers.map((n) => <li>{n}</li>);)

You can even do this:

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => <li>{number}</li>);
ReactDOM.render(
  <ul>{listItems}</ul>, // <ul> an array of <li>#</li>'s
  document.getElementById("root")
);

Design thinking process with React

https://reactjs.org/docs/thinking-in-react.html

Good to re-read the above link for details.
But general overview:
1. mock/boxes
2. hierarchy/"tabs"
3. static version (NO interactivity, so think about state/props later)
4. minimal state representation = {not passed-in prop, changes, not computable} -> (compute the rest)
5. where state should live ("shared" state? may need to be in parent -> pass down state and callback as props to children)
6. add inverse data flow, i.e. pass down state and callbacks as props to children, as identified in previous steps.

Passing arguments to event handlers

<!-- parameters will be extraParameter and e (implicit with bind) -->
<button onClick={(e) => this.handleClick(extraParameter, e)}>Do something</button>
<button onClick={this.handleClick.bind(this, extraParameter)}>Do something</button>

Passing children elements

Special prop props.children lets you do this:

function FancyBorder(props) {
  return (
    <div className={"FancyBorder FancyBorder-" + props.color}>
      <p>Something here.</p>
      {props.children} {/* you can insert JSX here! */}
      <p>Something else here.</p>
    </div>
  );
}

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      {/* you can insert JSX here! */}
      <h1 className="Dialog-title">Welcome</h1>
      <p className="Dialog-message">Thank you for visiting our spacecraft!</p>
      {/* you can insert JSX here! */}
    </FancyBorder>
  );
}

If you want custom "holes" in a component, you can do that too:

function SplitPane(props) {
  // custom props let you control where the JSX "holes" are!
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left} {/* you can insert JSX here! */}
      </div>
      <div className="SplitPane-right">
        {props.right} {/* you can insert JSX here! */}
      </div>
    </div>
  );
}

function App() {
  return (
    {/* custom props let you control where the JSX "holes" are! */}
    <SplitPane
      left={<Contacts />}
      right={<Chat />}
      />
  );
}

Higher-order components in React

https://css-tricks.com/what-are-higher-order-components-in-react/

// higher-order component: takes a component and returns a component (in this case, with modified props)
const hoc = (WrappedComponent) => (props) => {
  return (
    <div>
      <WrappedComponent {...props}>
        {props.children.toUpperCase()}
      </WrappedComponent>
    </div>
  );
};

// component to put into the “hoc”:
const Username = (props) => <div>{props.children}</div>;

// “hoc” being created:
const UpperCaseUsername = hoc(Username);

// “hoc” being used:
const App = () => (
  <div>
    <UpperCaseUsername>Kingsley</UpperCaseUsername>
  </div>
);

React hooks

May replace higher-order components and nesting.

https://css-tricks.com/intro-to-react-hooks/

componentDidMount() {
  // A
}

componentWillUnmount() {
  // B
}

is the same as:

useEffect(() => {
  // A

  return () => {
    // B
  };
}, []);

Other related tools

When React Re-renders

Worth a read: https://www.joshwcomeau.com/react/why-react-re-renders but for a quick summary/reminder, see the interactive graphs, but here are my key take-aways:

when component re-renders, it re-renders all its children by default,
- even if they aren't actually affected by the change in props by default,
  - but with React.memo you can create pure-components that let you avoid/minimize that (well, certain re-renders) by diffing props instead of creating the entire component to then find diffs in that
  - "The React team is actively investigating whether it's possible to “auto-memoize” code during the compile step. It's still in the research phase, but early experimentation appears promising." (more info: https://www.youtube.com/watch?v=lGEMwh32soc)

exceptions to camelCasing: `data-...` and ARIA

Examples:

<button
  data-custom-attribuet="some-value"
  aria-label="Close dialog"
>

Remember class is className and for is htmlFor because JSX will inject JS into slots!

convert HTML to JSX

https://transform.tools/html-to-jsx

JSX looks like a template language, but JSX transpiles to JS and then HTML which then is more dynamic, and doesn't invent a totally different language, and can leverage existing JS.

More to learn

https://github.com/hchiam/learning-react-error-boundaries

SSR (Server Side Rendering) and React Server Components: https://www.joshwcomeau.com/react/server-components/

<hr>

OLD NOTES

tutorial 0:

http://codepen.io/gaearon/pen/ZpvBNJ

Shortest React example:

ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') );

tutorial 0.5:

http://stackoverflow.com/questions/34737898/a-simple-hello-world-in-react-js-not-working

https://codepen.io/hchiam/pen/jmxVzV

tutorial 1:

LearnCode.academy tutorial on YouTube

tutorial 2:

http://tutorialzine.com/2014/07/5-practical-examples-for-learning-facebooks-react-framework/

and

https://facebook.github.io/react/docs/hello-world.html

Facebook provides a direct link to its React JS file (and its React object and its methods) that you can embed in your HTML file:

<script src="http://fb.me/react-0.10.0.min.js"></script>

Then you can call React.createClass() with an object of options and methods.

It's recommended (but not required) to use the JSX dialect of JS (JavaScript) to write React web apps.

If you do use JSX, then: JSX --(compile)--> JS (for browser to interpret)

tutorial 3:

FCC: https://github.com/hchiam/chat-app-fcc-react-redux

More of My Own Reworked Examples:

http://codepen.io/hchiam/pen/LymLzP (vs a pure html version: http://codepen.io/hchiam/pen/jmxVzV)

http://codepen.io/hchiam/pen/ybjXPE?editors=1010

Reworked Forks:

http://codepen.io/hchiam/pen/YVLrBb

http://codepen.io/hchiam/pen/rmvGgd

All My React Codepens (Forks Included):

https://codepen.io/search/pens/?q=react&limit=hchiam&show_forks=true

<hr>

Awesome

Learning React.js

NEW NOTES

React developer tools

Coming from AngularJS?

Design thinking process with React

Passing arguments to event handlers

Passing children elements

Higher-order components in React

React hooks

Helpful example of adding data to redux state container

Auth

Another mini-example

Example of React and TDD

Other related tools

Further reading on state organization: "The 5 Types Of React Application State"

When React Re-renders

exceptions to camelCasing: data-... and ARIA

convert HTML to JSX

More to learn

OLD NOTES

tutorial 0:

tutorial 0.5:

tutorial 1:

tutorial 2:

tutorial 3:

More of My Own Reworked Examples:

Reworked Forks:

All My React Codepens (Forks Included):

exceptions to camelCasing: `data-...` and ARIA