-
Notifications
You must be signed in to change notification settings - Fork 10.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
doc/tutorial/part-one fixes #3383
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -14,7 +14,7 @@ Sit down, buckle up, and let's get going! | |
|
||
## Check your development environment | ||
|
||
Let's check first that you have everything setup to start creating with Gatsby. | ||
Let's check first that you have everything set up to start creating with Gatsby. | ||
You will need a recent version of [Node.js](https://nodejs.org) installed. | ||
|
||
Node.js is a programming tool for running JavaScript on servers and in your | ||
|
@@ -30,7 +30,7 @@ You should see something like: | |
|
||
![Check if node.js/npm is installed](check-versions.png) | ||
|
||
Gatsby supports versions of Node back to v4 and NPM to v3. | ||
Gatsby supports versions of Node back to v4 and npm to v3. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I believe the caps are deprecated. :) There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. No idea but I'll trust you on this 👍 |
||
|
||
If you don't have Node.js installed, go to https://nodejs.org/ and install the | ||
recommended version for your operating system. | ||
|
@@ -56,7 +56,7 @@ gatsby new tutorial-part-one https://github.com/gatsbyjs/gatsby-starter-hello-wo | |
``` | ||
|
||
This command downloads the files for the starter and then installs the needed | ||
NPM packages. It should take around 1.5-3 minutes to finish. It may look like | ||
npm packages. It should take around 1.5-3 minutes to finish. It may look like | ||
nothing is happening at first; be patient! | ||
|
||
Now let's try running Gatsby! | ||
|
@@ -81,18 +81,18 @@ Too cool 😎 | |
|
||
Gatsby's development server is a "hot reloading" server, meaning any change you | ||
make to your React.js page components (and later we'll learn, your data files) | ||
will hot reload in the browser. | ||
will be immediately visible and/or loaded in the browser. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It's better to not use the term your explaining in your explanation. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Haha yes :-) |
||
|
||
This is huge because it makes development so much faster and fun. | ||
|
||
Let's try it. | ||
|
||
You'll need code editing software for the next part of this tutorial. | ||
[VS Code](https://code.visualstudio.com/) is a nice one. With your code editor, | ||
open a folder on your computer called "tutorial-part-one." This folder was | ||
automatically created when you ran one of the terminal commands above. | ||
open the folder on your computer called "tutorial-part-one," which was | ||
automatically created when you ran the `gatsby new` terminal command above. | ||
|
||
Now that you've opened the "tutorial-part-one" folder in your code editing | ||
Once you've opened the "tutorial-part-one" folder in your code editing | ||
software, it's time to edit your website. In the code editing software, you'll | ||
need to find `src/pages/index.js`. Once you find that, try changing "Hello | ||
world!" in the page component to "Hello Gatsby!". Once you save that change, the text in your browser | ||
|
@@ -138,7 +138,7 @@ export default () => | |
</div> | ||
``` | ||
|
||
Now your screen should look something like this. | ||
Now your screen should look something like this: | ||
|
||
![Screen Shot 2017-06-03 at 11.57.10 AM](moving-along.png) | ||
|
||
|
@@ -187,12 +187,11 @@ Make the second page component look something like: | |
import React from "react"; | ||
import Link from "gatsby-link"; | ||
|
||
export default () => ( | ||
export default () => | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is the reason I started updating this doc. These parentheses seem unnecessary and they are not in the first example. I thought it might confuse someone totally new to React and Gatsby. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We started running Prettier on the markdown code examples recently which perhaps added this? I'll pull your branch locally and run Prettier again and see what happens. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Hmm it did add it back... investigating. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yeah, it's because the other code blocks earlier have line highlighting e.g. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Okay. Thanks for looking into this. I noticed it and really wondered what was up. |
||
<div> | ||
<p>Hello world from my second Gatsby page</p> | ||
<Link to="/">back home</Link> | ||
</div> | ||
); | ||
``` | ||
|
||
Save that and now you should be able to click back and forth between the two | ||
|
@@ -276,7 +275,7 @@ export default Counter | |
|
||
So now we have everything we need to make a nice counter. Let's make it live. | ||
|
||
First we'll setup the component state. | ||
First we'll set up the component state. | ||
|
||
```jsx{4-7,13} | ||
import React from "react"; | ||
|
@@ -320,10 +319,10 @@ class Counter extends React.Component { | |
<div> | ||
<h1>Counter</h1> | ||
<p>current count: {this.state.count}</p> | ||
<button onClick={() => this.setState({ count: this.state.count + | ||
<button onClick={() => this.setState({ count: this.state.count + | ||
1 })}>plus | ||
</button> | ||
<button onClick={() => this.setState({ count: this.state.count - | ||
<button onClick={() => this.setState({ count: this.state.count - | ||
1 })}>minus | ||
</button> | ||
</div> | ||
|
@@ -366,7 +365,7 @@ Next, build your site by running the following command in the terminal at the ro | |
gatsby build | ||
``` | ||
|
||
Building should take 15-30 seconds. At this point, it's useful to take a look at the files that the `gatsby build` command just prepared to deploy. Take a look at a list of the generated files typing in the following command into the root of your site, which will let you look at the `public` directory: | ||
Building should take 15-30 seconds. At this point, it's useful to take a look at the files that the `gatsby build` command just prepared to deploy. Take a look at a list of the generated files by typing in the following terminal command into the root of your site, which will let you look at the `public` directory: | ||
|
||
```bash | ||
ls public | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
setup
is a noun.set up
is the phrasal verb being used here.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Amazing — never knew the difference 💯