Intro to Advanced React Hooks

What you'll build

This is a preview of the final result: https://advancedreacthooksmaster.gatsbyjs.io/.

Recommendation

I highly recommend starting your coding journey with Build a web app with React Hooks.

Figma Design System

Similar to the Build a web app with React Hooks course, the design file was created in Figma, and you can download it to see how the design system works.

React Hooks

In addition to making React easier, you can add Hooks to it, so you can easily manage your component's state and lifecycle. For instance, you can import the useState hook and handle the state of your component. Learn more.

const [state, setState] = useState(initialValue)

Framework

With Gatsby, you can create static content-driven websites. It takes care of all the configuration for you. Complex websites can also be built with Gatsby - for example, the current Design+Code website. Gatsby is known for its outstanding search engine optimization, performance, scalability, accessibility, and security. Learn more.

Install NodeJS

NodeJS needs to be installed in order to run all Javascript libraries, including Gatsby, Styled Components, and React.

Install VSCode Editor

Coding requires the use of a code editor and Visual Studio Code is one of the most popular one. This code editor has the advantage of being lightning fast, supporting hundreds of languages, code snippets and extensions eco-systems.

VSCode extensions

• VS Code ES7 React/Redux/React-Native/JS snippets
• VSCode GraphQL
• Node npm
• Path Autocomplete for Visual Studio Code
• Prettier Formatter for Visual Studio Code
• vscode-styled-components

Installing Gatsby

Gatsby must be downloaded via NodeJS. Open your build-in terminal.

npm install -g gatsby-cli

*If you have an error while installing the gatsby-cli, use this command instead and enter your password.

sudo npm install -g gatsby-cli

Gatsby project

Let's create the project now. The project will be saved in your downloads folder.

cd Downloads

gatsby new advancedHooks

Preview your app

Open your new folder in VSCode by dragging and dropping in your dock. Use the integrated terminal with CTRL+` and start your environment locally.

gatsby develop

By clicking on the http://localhost:8000, it will open a web browser link and display your site.

Site architecture

• Src (source) is a folder that contains components and pages. Every reusable component in your project goes into the components folder such as buttons, cards, animations, rows, lists ...
• Pages, a new page will be created automatically for each file. Pricing.tsx, for example, will route to /pricing. Only index.tsx will route to the main page.

• Static folder contains all your assets, such as images, logos, etc

  static.zip

Typescript

We will be using typescript in this project. Typescript is an extremely powerful and useful tool when dealing with data. By checking what type of data is being fetched, you can avoid unintentional bugs. Check out this section for more information.

Install Typescript

Learn how to install Typescript on your Gatsby project by following this tutorial.

// gatsby-config.js

plugins: [
    `gatsby-plugin-typescript`,
    // More plugins...
],

Allows Gatsby to build TypeScript and TSX files.

npm i gatsby-plugin-typescript

With TypeScript, JavaScript can be extended to support tools for large-scale JavaScript applications on any device or operating system. It can be compiled into readable and standards-compliant JavaScript.

npm i typescript --save-dev

Allowing types for React.

npm i --save-dev @types/react @types/react-dom @types/node

Finally, change the following files to .tsx instead of .js.

• header.js → header.tsx
• layout.js → layout.tsx
• seo.js → seo.tsx
• 404.js → 404.tsx
• index.js → index.tsx
• page-2.js → page-2.tsx

*Make sure to not change the Gatsby configuration at the bottom.

React plugin type

It's possible to encounter issues with react plugins that aren't compatible with Typescript. For example, the helmet plugin in SEO. To fix it, install the type version of it.

npm i --save-dev @types/react-helmet