Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
100 lines (62 sloc) 2.08 KB

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

{% code-tabs %} {% code-tabs-item title="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>
}

{% endcode-tabs-item %} {% endcode-tabs %}

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

You can’t perform that action at this time.