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)

(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

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

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")
);

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

• Good to re-read the above link for details.

• But general overview:

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

<!-- 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>

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 />}
      />
  );
}

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>
);

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
  };
}, []);

https://github.com/hchiam/react-jexcel-redux/commit/90db044627780ed6262f5e29bb61a24390a4d4b3

Easy solution: https://github.com/Swizec/useAuth

https://github.com/hchiam/learning-react-2dnote

https://github.com/hchiam/learning-react-tdd

• Jest
• Redux
• React Router
• React Native
• React + Apollo + GraphQL
• React + Firestore
• React Hook Form

http://jamesknelson.com/5-types-react-application-state

1. Data
2. Communication
3. Control
4. Session
5. Location

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)

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!

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.

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

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

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

Shortest React example:

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

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

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

LearnCode.academy tutorial on YouTube

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)

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

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

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

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

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