diff --git a/docs/tutorial/part-one.md b/docs/tutorial/part-one.md index bf1716a365c13..88ddd5c8a8bfc 100644 --- a/docs/tutorial/part-one.md +++ b/docs/tutorial/part-one.md @@ -3,16 +3,18 @@ title: Gatsby.js Tutorial Part One typora-copy-images-to: ../tutorial/images --- -Hello fellow Gatsby-er! Welcome to part one of our community Gatsby.js tutorial. +Hello fellow Gatsby-er! Welcome to *part one* of our community Gatsby.js tutorial. In this tutorial you'll be gently introduced to the Gatsby development environment, how to create component pages, and how to build and deploy Gatsby sites. Sit down, buckle up, and let's get going! -## Check Environment +## Check your development environment Let's check first that you have everything setup to start working 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 computer's terminal. Gatsby is built using Node.js. + Open a terminal window and type `node --version` then `npm --version`. You should see something like: @@ -76,15 +78,15 @@ You should see shortly some text that says `The development server is listening Yeah! It's working!!! -What you're seeing is the Gatsby.js development 404 page. Let's do what it says and create a React.js component at `src/pages/index.js`. +What you're seeing is the Gatsby.js development 404 page. Let's do what it says and create a React.js page component at `src/pages/index.js`. -First create the `src/pages` directory. +In a new terminal window (leave the `gatsby develop` process running), first create the `src/pages` directory. ```bash mkdir -p src/pages ``` -Then open up `src/pages/index.js` in your editor of choice and type in the "hello world" of components. +Then open up `src/pages/index.js` in your editor of choice and type in the "hello world" of page components. ```jsx import React from 'react' @@ -98,19 +100,19 @@ Save that andโ€ฆ ๐Ÿ˜ฎ๐Ÿ˜ฎ๐Ÿ˜ฎ Too cool ๐Ÿ˜Ž -Gatsby's development server is a "hot reloading" server meaning any change you make to your React.js components (and later we'll learn, your data files) will hot reload in the browser. +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. This is huge because it makes development so much faster and fun. Let's try it. -Try changing "Hello world!" in the component to "Hello Gatsby!". The text in your browser should change within a second. +Try changing "Hello world!" in the page component to "Hello Gatsby!". The text in your browser should change within a second. Try some other tricks. 1. Gatsby let's you add "inline styles" via a JavaScript style "prop" (we'll learn about other styling options later). - Try making your component look like this: + Try making your page component look like this: ```jsx import React from "react" @@ -157,7 +159,7 @@ First create the link to the new page. To do that, import the `` component from the `gatsby-link` package we installed earlier. -Unlike the normal HTML `` element, our `Link` component uses `to` for specifying where you'd like to link to. Let's link to a page with the pathname of `/my-second-gatsby-page/`. Try adding that. Once you're done, the component should look like: +Unlike the normal HTML `` element, our `Link` component uses `to` for specifying the page you want to link to. Let's link to a page with the pathname of `/my-second-gatsby-page/`. Try adding that. Once you're done, the page component should look like: ```jsx{2,9-10} import React from "react" @@ -175,9 +177,22 @@ export default () => Click on that link and again we see the development 404 page. -Let's do what it says again and create a new component at `src/pages/my-second-gatsby-page.js` and save it. Make sure to link back to the home page. +Let's do what it says again and create a new page component at `src/pages/my-second-gatsby-page.js`. + +Make the second page component look something like: + +```jsx +import React from 'react' +import Link from 'gatsby-link' + +export default () => +
+

Hello world from my second Gatsby page

+ back home +
+``` -Now you should be able to click back and forth between the two pages! +Save that and now you should be able to click back and forth between the two pages!