React

Glossary

Name	Definition
function component	React components created with a function()

Create React App

• TypeScript support

Cons:

• No SEO

Default

• Change public/index.html: <title>

• Change public/mainfest.json

Relay

Difficult and heavy

• Requires relay-compiler

  • Requires exporting a schema from your graphql endpoint

SEO

TypeScript

https://github.com/sw-yx/react-typescript-cheatsheet

Creating

yarn create react-app my-app --typescript

Adding

https://facebook.github.io/create-react-app/docs/adding-typescript

Does Not Support

• No const enum

Directory Structure

src/components
src/containers
src/routes/EntriesRoute.tsx

useEffect with async/await

await-useEffect.tsx

function Render() {
  const [data, setData] = useState(null);
  const fetchData = async() => {
    const response = await fetch(`https://www.example.com/`);
    const json = await response.json();
    setData(json);
  };
  useEffect(() => { fetchData() });
  return <div>Test</div>
}

useRef(null)

Error:

Type error: Cannot assign to 'current' because it is a read-only property.  TS2540

From GitHub comment

By default if you create a ref with a null default value and specify its generic parameter you're signaling your intent to have React "own" the reference. If you want to be able to mutate a ref that you own you should declare it like so:

Solution:

• Change useRef<T | null>(null) to useRef<T>()

Bootstrap

Use reactstrap

• https://npmcompare.com/compare/react-bootstrap,reactstrap