[v2] Edit tutorial for changes

[m-allanson]

This can go on it's own branch while v2 is in beta.

[ryanditjia]

I’d like to take this. What would the scope be? Modifying the code to adhere to breaking changes?

[m-allanson]

Great! Yeah, it'd be a case of running through the tutorial using a Gatsby v2 release, then fixing up anything that doesn't work - code examples and changing the text of the tutorials where it makes sense.

Note that Gatsby v2 right now is in alpha state so you might hit some rough edges, but I'd be happy to help with anything that I can.

For now, useful references might be the breaking changes file and a few of the example sites that've been upgraded. They're the ones that have "next" as the Gatsby dependency version - gatsbygram, using-wordpress and using-drupal I think are all done.

Having #3986 done first might make this easier. And there might be additional changes once #3740 is in.

[ryanditjia]

This is my first time trying to run the alpha. Doesn’t look like gatsby develop works on 2.0.0-alpha.20 (version installed with gatsby: next). It throws this error even though Gatsby is installed:

error There was a problem loading the local develop command. Gatsby may not be installed. Perhaps you need to run "npm install"?


  Error: Cannot find module 'request'

followed by loader.js errors.

Do you know a version that works?

[m-allanson]

Well, looks like you found a bug! 😅 You might run in to a few of these at the moment...

If you're up for doing a PR into the v2 branch, you could add request to the dependencies in Gatsby's package.json.

Otherwise locally running npm i request should work as a temporary fix.

[ryanditjia]

Do react and react-dom have to be installed manually in v2? Ran into similar module not found error, which is fixed by installing the 2 packages manually. I see them listed as peerDependencies in Gatsby, so shouldn’t they not require manual installation?

[m-allanson]

👍 yeah they've been shifted to manual installs so people can use their preferred version without waiting for Gatsby releases. peerDependencies need to be installed manually, I'll add that to the breaking changes list.

[ryanditjia]

Alright. I read that starters will be updated to include react and react-dom as dependencies. And since all the tutorials start with starter, there’s no need to mention the need for manual installation, is there?

[m-allanson]

there’s no need to mention the need for manual installation

That sounds correct, I think.

[ryanditjia]

@shannonbux
Re: Style consistency: back tics vs. single quotation marks

In addition to quote style, I’m seeing inconsistencies with the use of semicolons. I’d like to clean this up as I edit the tutorials for v2. Have you reached a decision on which style to follow?

[m-allanson]

@ryanditjia I'm not sure how you were planning to approach this, but could you do just one tutorial at a time? i.e. change the first tutorial and then push up a PR for it before starting on any of the other ones. That'll make it much easier to review the changes.

[KyleAMathews]

Inconsistent semicolons is due to Prettier not respecting our no-semicolon rule in JS blocks in markdown. Lemme go see if there's an issue for this already.

[KyleAMathews]

Umm woah, we're specifying to add semi-colons to markdown

gatsby/package.json

Line 55 in 3b647d7

"format-markdown": "prettier --write \"**/*.md\" --semi",

I have no idea why... adding a PR to change the setting and remove the semi-colons.

[KyleAMathews]

Actually remembered why — we used to have a lot of React components in the docs that weren't surrounded by () so Prettier added a semi-colon at the start. Which I guess confused me so I went with the bad solution of just adding semis to the end of all the blocks. This PR fixes the few of those that exist and changes to semi-less #5148

[shannonbux]

@ryanditjia thanks for volunteering for this! I'm happy to help with style questions for sure. @KyleAMathews I know you told me the advantages/disadvantages of back tics vs. single quotation marks and now can't remember if we settled on one for the tutorials and docs.

[ryanditjia]

@m-allanson Yes! That’s exactly the approach I’m taking.

Kyle’s no-semi fix seemed to miss blocks that start with ```jsx{arbitrary-number}
I’m not sure if those numbers are supposed to be there, so I removed them and the semis.
#5160

Once the semis have been cleaned up, I’ll work on editing the tutorials.

[pieh]

@ryanditjia These artbitrary number adds code highlights (lines with h1 and p in example below) - they are line numbers to be highlighted. I think we shouldn't remove them

[ryanditjia]

@pieh Good to know. PR changed. Thanks!

[ryanditjia]

Part-two, where we import and console.log css modules styles will result in compilation error error Import in body of module; reorder to top import/first because Container is imported after.

How do we want to deal with this breaking change?

1. console.log after Container import

import React from "react";
import styles from "./about-css-modules.module.css";
import Container from "../components/container";

console.log(styles);

2. import styles and console.log after Container import

import React from "react";
import Container from "../components/container";
import styles from "./about-css-modules.module.css";

console.log(styles);

I’m partial to 1 but it’s more of personal stylistic preference than anything else.

[ryanditjia]

Is there a change to layouts in v2? I’m on part-three I can’t seem to get it to work.

[pieh]

Is there a change to layouts in v2? I’m on part-three I can’t seem to get it to work.

Layouts were removed in v2. Check https://github.com/gatsbyjs/rfcs/blob/remove-layouts/text/0000-remove-special-layout-components.md how to achieve layouts and get query functionality in non-page components

[m-allanson]

This is basically done, thanks for all your work @ryanditjia!