Author: Mark

  • Reaching level 50 in Pokemon Go – Part 6

    Well, a lot has changed since my last post on Pokemon Go. I currently have over 200 million experience which is 10 times what you need to get to level 40. More importantly though, they added level 50 to the game so all that experience came to use. To get to level 50 you need…

  • Populating data with React

    If the file is local (eg. the file config/updates.json below): you can just import it: The constant ‘updatesData’ would give you a list of the data. You can put it as a prop in a component, map through it etc: If the data is external: where updatesData is a state. If you need it to…

  • Basic React Function Component

    This is a copy of this post, but using a function component and hooks.

  • Setting State in a setTimeout method

    If you do: You’ll get an error saying “this.setState is not a function”. To fix it for a class function, put it in a function (in this case handleClick() ), bind it in the constructor and use an arrow function in the setTimeOut: For a function component, also use an arrow function but you’ll also…

  • Looping through an object with forEach

    With example data like this: which console logs “bird”

  • Making React use relative paths

    If you build something and then upload it to www.website.com/newFolder and it breaks, you need to make it relative. To do this, just add to your package.json and rebuild.

  • Disable auto closing tags in Visual Studio Code

    I personally find this feature counter productive. To do this, press Control/Command + comma to open the settings. Then put “autoClosingTags” into the search and untick it.

  • Conditional classes and toggling state

    Here’s a basic example: And you can toggle the state like so: Demo here.

  • Basic React Class Component

    Just a basic example of a React Class component:

  • Basic Flex Layout

    This site is a great reference to flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background Below I have a basic 2 column centered layout. The basics are: The body: The important part is to not set it’s height to 100% otherwise if the window is shorter than the content, you won’t be able to scroll to the top or bottom. The…