
React Router is still the most popular routing library for React. This blog post will explore React Router 6, including how to bootstrap React Router 6, create layouts using the new `<Outlet>` component, and pass arguments to routes.

Click the image below to watch the [YouTube video version](https://www.youtube.com/watch?v=m2kGnitUpIs) of this blog post:

[![React Router 6 Basics](https://i.ytimg.com/vi/m2kGnitUpIs/hqdefault.jpg)](https://www.youtube.com/watch?v=m2kGnitUpIs)

## React Router history

React Router has become a popular choice for managing routing in React applications and is widely used in both small and large applications. It is also highly customizable, allowing developers to create custom routing logic and integrate it into their applications. Currently, the library is maintained by the team behind [Remix](https://remix.run/), a React-based framework for building web applications.

With React Router, you can define routes and their corresponding components using a declarative syntax. When the user navigates to a particular URL, React Router will render the corresponding component for that URL. React Router also provides features such as nested routes, route parameters, and query parameters. One of the biggest advantages of React Router is that it works with any Reaac application, regardless of the framework or library that is used.

## Setting up React Router

React Router is a JavaScript library, so you can use a package manager such as npm or Yarn. Assuming you already have a React project set up, you can follow these steps to install React Router using npm:

- Open your terminal and navigate to your React project directory.
- Run the following command to install React Router:

  ```
  npm install react-router-dom
  ```

  This will install React Router and its dependencies.

Once the installation is complete, you can use React Router in your application. To get started, you can import the necessary methods and components from React Router as you'll learn in the next step.

## Creating routes

To create routes in React Router, you can use the `createBrowserRouter` method with the `RouterProvider` component. With `createBrowserRouter` you define the available routes and their corresponding component. You can use the `path` prop to define the URL path for the route, and the `element` prop to define the component that should be rendered when the user navigates to the route.

The following example shows how to create a route for the `/about` URL path:

```jsx
import { createBrowserRouter, RouterProvider } from 'react-router-dom';

function About() {
  return <h1>About</h1>;
}

const router = createBrowserRouter([
  {
    path: '/about',
    element: <About />,
  },
]);

function App() {
  return (
    <RouterProvider value={router}>
      {/* Your components */}
    </RouterProvider>
  );
}
```

When the user navigates to the `/about` URL path, React Router will render the `About` component. But how would you handle nested routes? For example, what if you want to share the same layout for multiple routes? In the next section, you'll learn how to create nested routes and layouts using the `<Outlet />` component.

## Use `<Outlet />` to create children routes

With React Router 6, you can define nested routes using the `children` field in the route object. This allows you to create layouts that can be shared across multiple routes.

Let's say you want to create a layout that contains a header and a footer. You can use the `element` prop to define the layout component and the `children` field to define the nested routes. The following example shows how to create a layout that contains a header and a footer:

```jsx
import { createBrowserRouter, RouterProvider, Outlet } from 'react-router-dom';

function About() {
  return <h1>About</h1>;
}

function Layout() {
  return (
    <div>
      <header>
        <h1>Layout</h1>
      </header>
      <Outlet />
      <footer>Copyright 2023</footer>
    </div>
  );
}

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        path: 'about',
        element: <About />,
      },
    ],
  },
]);
```

You can use the `<Outlet />` component to render nested routes. This allows you to create layouts that can be shared across multiple routes, reducing the amount of duplicated code in your application.

## React Router 6 parameters

React Router 6 allows you to pass parameters to routes. This will enable you to create dynamic routes that can be used to render different components based on the parameters that are passed to the route.

To pass parameters to a route, you can add the params to the `path` field in the route object. The following example shows how to pass a `userId` parameter to the `/user/:userId` route:

```jsx
const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        path: 'about',
        element: <About />,
      },
      {
        path: 'user/:userId',
        element: <User />,
      },
    ],
  },
]);
```

And the following example shows how to retrieve the `userId` parameter with the `useParams` hook in the `User` component:

```jsx
import { useParams } from 'react-router-dom';

function User() {
  const { userId } = useParams();

  return <h1>User {userId}</h1>;
}
```

You can use the `useParams` hook to retrieve the parameters that are passed to the route. The `useParams` hook returns an object with the parameters that are passed to the route.

## Keep learning

In this blog post, you learned how to bootstrap React Router 6, create layouts using the new `<Outlet>` component, and pass parameters to routes. If you want to learn more about React Router 6, you can check out the [official documentation](https://reactrouter.com/). Also, keep an eye out for my [YouTube channel](https://www.youtube.com/@gethackteam?sub_confirmation=1), where I'll post more videos about React and React Router 6.

[> Subscribe to my YouTube channel](https://www.youtube.com/@gethackteam?sub_confirmation=1)

Or find me on Twitter at [@gethackteam](https://twitter.com/gethackteam). I'd love to hear from you!


React Router 6 Basics


Can you learn React in five minutes? Well, it depends on what you mean by "learn React". In this blog post you will "learn the basics of React" in five minutes, by going over a few of the core concepts of React.

Click the image below to watch the [YouTube video version](https://www.youtube.com/watch?v=JKtLRDfTYTU) of this blog post:

[![Learn React in 5 minutes](https://i.ytimg.com/vi/JKtLRDfTYTU/hqdefault.jpg)](https://www.youtube.com/watch?v=JKtLRDfTYTU)

## What is React?

React is a JavaScript library that is widely used for building user interfaces, particularly for single-page applications. It allows you to create reusable components that can be rendered on the web, mobile, or desktop. Today, it is one of the most popular tools for front-end web development.

So, if you're interested in learning React, where do you start?

## JavaScript

First, it's important to have a solid understanding of JavaScript. React is built with JavaScript, so you'll need to be comfortable with the basics of the language before you dive into React.

Once you've got a handle on JavaScript, the next step is to familiarize yourself with the React syntax and concepts.

## Components

One of the core principles of React is that a component should be a self-contained piece of code that is easy to understand and maintain.

This is what a component looks like:

```jsx
function MyComponent() {
  return (
    <div>
      <h1>My Component</h1>
    </div>
  );
}
```

A component is a JavaScript function that returns a React element. It can be a simple function that returns a single element, or it can be a more complex component that returns multiple elements or has state.

## Data flows

In React, data flows in a single direction from the parent component to the child component, following the unidirectional data flow principle. This helps make applications easier to reason about and debug.

Parent components can pass data to child components using props, below is an example of a child compoinent that receives data from a parent component:

```jsx
function MyComponent() {
  return (
    <div>
      <Title title='My Component' />
    </div>
  );
}

function Title({ title }) {
  return <h1>{title}</h1>;
}
```

Props are used to keep track of data that is passed from a parent component to a child component. They are immutable, which means that they cannot be changed once they are passed to a child component.

## State

State is a special type of data that is managed by a component. It is used to store data that is specific to a component and it can be passed on to other components lower in the tree. State is often used to store data that is used to render the UI, such as a list of items or a user's name.

State can be managed using the useState hook, which is a function that returns an array with two values: the current state and a function that can be used to update the state:

```jsx
import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <Counter count={count} setCount={setCount} />
    </div>
  );
}

function Counter({ count, setCount }) {
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
```

## Virtual DOM

React uses a virtual DOM (Document Object Model) to optimize updates and minimize the number of DOM mutations. This makes applications built with React faster and more efficient.

The [Virtual DOM](https://reactjs.org/docs/faq-internals.html) is a virtual representation of a user interface, which is kept in memory and synchronized with the "real" DOM by for example ReactDOM.

## Ecosystem

React also has a large ecosystem of tools and libraries that can be leveraged to build amazing applications. Some popular ones include [Tanstack Query](https://tanstack.com/query/latest/docs/react/examples/react/basic) for data fetching, Tailwind for styling and [Next.js](https://nextjs.org/) or [Remix](https://remix.run/) for server-rendered React applications.

## Building Projects

It's also a good idea to start building some small projects with React to get a feel for how it works in practice. There are plenty of resources available online that can help you get started with your first React project, including templates and starter kits.

Need inspiration for a project?

you might want to have a look at my book React Projects. Which walks you through all the React concepts in 10 chapters. You'll build 10 unique projects. These are a "movie list" (like IMDB), a developer portfolio website using Github, a mobile game application and much more.

## Keep learning

Finally, keep in mind that learning React is an ongoing process. As you build more complex projects and encounter new challenges, you'll continue to learn and improve your skills.

The comings months I'll livestreams on building these projects - and the first ones are already uploaded. So if you're interested in learning React, make sure to subscribe to my YouTube channel.

[> Subscribe to my YouTube channel](https://www.youtube.com/@gethackteam?sub_confirmation=1)

Or find me on Twitter at [@gethackteam](https://twitter.com/gethackteam). I'd love to hear from you!


Learn React in 5 minutes


This blog post will teach you how to use Bootstrap 5 to style a React application. With Bootstrap, you don't have to write any stying rules yourself; instead, you can use class names to apply styles to HTML elements.

Click the image below to watch the [YouTube video version](http://www.youtube.com/watch?v=I-DzvL6yvGI) of this blog post:

[![Create a React Project From Scratch Without any Framework](https://i.ytimg.com/vi/I-DzvL6yvGI/hqdefault.jpg)](http://www.youtube.com/watch?v=I-DzvL6yvGI)

> This blog post is extracted from my book React Projects, available on [Packt](https://packt.link/ReactProjects) and [Amazon](https://amzn.to/3vq4FQP).

## Why use Bootstrap?

IMO, Bootstrap is still the easiest way to style a React application. Bootstrap has been around for a long time and is widely used across web applications of all sorts and sizes. And build with different frameworks or tools, ranging from WordPress to React. There are a few reasons why you might want to use Bootstrap to style a React app:

- Ease of use: Bootstrap is a well-documented and widely-used CSS framework, making it easy to start and learn.
- Responsive design: Bootstrap includes a responsive grid system and predefined styles for common UI elements, which makes it easier to build a responsive app that looks good on multiple devices.
- Time savings: Using a CSS framework like Bootstrap can save you time by providing a set of pre-styled UI components that you can use out-of-the-box, rather than style everything from scratch.
- Consistency: By using a common CSS framework, you can ensure that your app has a consistent look and feel, which can improve the user experience.

Overall, Bootstrap (or any other CSS framework) can be useful for building a well-designed and responsive React app more efficiently.

## Installing Bootstrap

You can install Bootstrap using npm or yarn. For this blog post, we will use npm:

```
npm install --save-dev bootstrap
```

This will install Bootstrap as a `devDependency` in your project, and it will only be used during development and will not be included in the production build. By installing Bootstrap you can now include the CSS in your project by importing it in the root of your React project, for example, your `index.js` file that contains the root component of your app:

```js
import ReactDOM from 'react-dom/client';
import List from './containers/List';

import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  // ...
}

const container = document.getElementById('app');
const root = ReactDOM.createRoot(container);

root.render(<App />);
```

The important part in the code block above is the line `import 'bootstrap/dist/css/bootstrap.min.css'`, which will import the Bootstrap CSS file from the `node_modules` directory. This will make the Bootstrap styles available to your app.

## Using Bootstrap components

Bootstrap includes several pre-styled components that you can use in your React app. For example, you can use the [`NavBar` component](https://getbootstrap.com/docs/5.3/components/navbar/) to add a header element to your application.

To use this component, you can copy-paste the following code block and use it in your app:

```js
import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';

export default function Header() {
  return (
    <nav class="navbar bg-body-tertiary">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">
          <img src="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
          Bootstrap
        </a>
      </div>
    </nav>
  )
}
```

Which will render the following header:

![Bootstrap NavBar component](/images/bootstrap-react-styling-navbar.png)

By adding the correct class names to HTML elements, you will get a modern-looking header that you don't need to style.

Of course, there are much more Bootstrap components that you can use in your React app. For example, you can use the [`Card` component](https://getbootstrap.com/docs/5.3/components/card/) to render a card with a title, image, and text:

```js
import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';

export default function Card() {
  return (
    <div class='card' style='width: 18rem;'>
      <img src='...' class='card-img-top' alt='...' />
      <div class='card-body'>
        <h5 class='card-title'>Card title</h5>
        <p class='card-text'>
          Some quick example text to build on the card title and make up the
          bulk of the card's content.
        </p>
        <a href='#' class='btn btn-primary'>
          Go somewhere
        </a>
      </div>
    </div>
  );
}
```

Which will render the following card:

![Bootstrap Card component](/images/bootstrap-react-styling-card.png)

With just a few lines of HTML you can render a card with a title, image, and text. And you can extend this further by using Bootstrap utilities or custom CSS to style the card even more.

## Bootstrap utilities

Bootstrap includes a set of utility classes that can be used to apply common styles quickly and easily. These utility classes are designed to be used in conjunction with other Bootstrap styles and can be used to override or extend the default styles of certain elements.

Some of the Bootstrap utilities include:

- `.text-*:` These classes can be used to apply different colors to text, depending on the context (e.g. .text-primary, .text-secondary, etc.).
- `.bg-*:` These classes can be used to apply different background colors to elements (e.g. .bg-primary, .bg-secondary, etc.).

Let's look at an example:

```js
import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';

function App() {
  return (
    <div className="container mt-5">
      <div className="row">
        <div className="col-md-6">
          <div className="card bg-primary text-white">
            <div className="card-body">
              <h5 className="card-title">Primary Card</h5>
              <p className="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
          </div>
        </div>
        <div className="col-md-6">
          <div className="card bg-secondary text-white">
            <div className="card-body">
              <h5 className="card-title">Secondary Card</h5>
              <p className="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;
```

In this example, we use Bootstrap's grid system to create a layout with two equal-width columns, and we use the `.bg-primary` and `.bg-secondary` classes to give the cards different background colors. We are also using the `.text-white` class to make the text white to be visible against the colored backgrounds.

These are just a few examples of Bootstrap utilities. Many others are available, and you can find more information in the [Bootstrap documentation](https://getbootstrap.com/docs/5.3/utilities/).

## Conclusion

This blog post has shown how to use Bootstrap 5 to style a React application. With Bootstrap you don't have to write any stying rules yourself. Instead, you can use class names to apply styles to HTML elements. Of course, you can also use Bootstrap utilities to apply common styles quickly and easily.

> This blog post is extracted from my book React Projects, available on [Packt](https://packt.link/ReactProjects) and [Amazon](https://amzn.to/3vq4FQP).

I hope you learned some new things about styling in React! Any feedback? Let me know by [connecting to me on Twitter](https://www.twitter.com/gethackteam). Or leave a comment on my [YouTube channel](https://www.youtube.com/@gethackteam?sub_confirmation=1).


Bootstrap Is The Easiest Way To Style React Apps in 2023


This blog post will guide you through the process of creating a new single-page React application from the ground up. We will begin by setting up a new project using Webpack and Babel. Building a React project from scratch will give you a strong foundation and understanding of the fundamental requirements of a project, which is essential for any project you may undertake before jumping into a framework like Next.js or Remix. 

Click the image below to watch the [YouTube video version](http://www.youtube.com/watch?v=X48Kt8rSByQ) of this blog post:

[![Create a React Project From Scratch Without any Framework](https://i.ytimg.com/vi/X48Kt8rSByQ/hqdefault.jpg)](http://www.youtube.com/watch?v=X48Kt8rSByQ)

> This blog post is extracted from my book React Projects, available on [Packt](https://packt.link/ReactProjects) and [Amazon](https://amzn.to/3vq4FQP).

## Setting up a new project

Before you can start building your new React project, you will need to create a new directory on your local machine. For this blog (which is based upon the book React Projects), you can name this directory 'chapter-1'.

To initiate the project, navigate to the directory you just created and enter the following command in the terminal:

```
npm init -y
```

This will create a `package.json` file with the minimum information required to run a JavaScript/React project. The `-y` flag allows you to bypass the prompts for setting project details such as the name, version, and description.

After running this command, you should see a `package.json` file created for your project similar to the following:

```json
{
  "name": "chapter-1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
```

Now that you have created the `package.json` file, the next step is to add Webpack to the project. This will be covered in the following section.

## Adding Webpack to the project

In order to run the React application, we need to install Webpack 5 (the current stable version at the time of writing) and the Webpack CLI as `devDependencies`. Webpack is a tool that allows us to create a bundle of JavaScript/React code that can be used in a browser. Follow these steps to set up Webpack:

1. Install the necessary packages from npm using the following command:

```
npm install --save-dev webpack webpack-cli
```

2. After installation, these packages will be listed in the package.json file and can be run in our start and build scripts. But first, we need to add some files to the project:

```
chapter-1
|- node_modules
|- package.json
   |- src
      |- index.js
```

This will add an `index.js` file to a new directory called `src`. Later, we will configure Webpack so that this file is the starting point for our application.

3. Add the following code block to this file:

```js
console.log('Rick and Morty');
```

4. To run the code above, we will add start and build scripts to our application using Webpack. The test script is not needed in this case, so it can be removed. Also, the main field can be changed to private with the value of true, as the code we are building is a local project:

```json
{
  "name": "chapter-1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack --mode=development",
    "build": "webpack --mode=production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
```

The npm start command will run Webpack in development mode, while npm run build will create a production bundle using Webpack. The main difference is that running Webpack in production mode will minimize our code and reduce the size of the project bundle.

5. Run the `start` or `build` command from the command line; Webpack will start up and create a new directory called `dist`.

```
chapter-1
|- node_modules
|- package.json
   |- dist
      |- main.js
   |- src
      |- index.js
```

6. Inside this directory, there will be a file called `main.js` that includes our project code and is also known as our bundle. If successful, you should see the following output:

```
asset main.js 794 bytes [compared for emit] (name: main)
./src/index.js 31 bytes [built] [code generated]
webpack compiled successfully in 67 ms
```

The code in this file will be minimized if you run Webpack in production mode.

7. To test if your code is working, run the main.js file in your bundle from the command line:

```
node dist/main.js
```

This command runs the bundled version of our application and should return the following output:

```
> node dist/main.js
Rick and Morty
```

Now, we're able to run JavaScript code from the command line. In the next part of this blog post, we will learn how to configure Webpack so that it works with React.

## Configuring Webpack for React

Now that we have set up a basic development environment with Webpack for a JavaScript application, we can begin installing the packages necessary to run a React application. These packages are `react` and `react-dom`, where the former is the core package for React and the latter provides access to the browser's DOM and allows for rendering of React. To install these packages, enter the following command in the terminal:

```
npm install react react-dom
```

However, simply installing the dependencies for React is not enough to run it, since by default, not all browsers can understand the format (such as ES2015+ or React) in which your JavaScript code is written. Therefore, we need to compile the JavaScript code into a format that can be read by all browsers.

To do this, we will use Babel and its related packages to create a toolchain that allows us to use React in the browser with Webpack. These packages can be installed as `devDependencies` by running the following command:

In addition to the Babel core package, we will also install `babel-loader`, which is a helper that allows Babel to run with Webpack, and two preset packages. These preset packages help determine which plugins will be used to compile our JavaScript code into a readable format for the browser (`@babel/preset-env`) and to compile React-specific code (`@babel/preset-react`).

Now that we have the packages for React and the necessary compilers installed, the next step is to configure them to work with Webpack so that they are used when we run our application.

```
npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react
```

To do this, configuration files for both Webpack and Babel need to be created in the src directory of the project: `webpack.config.js` and `babel.config.json`, respectively. The `webpack.config.js` file is a JavaScript file that exports an object with the configuration for Webpack. The `babel.config.json` file is a JSON file that contains the configuration for Babel.

The configuration for Webpack is added to the `webpack.config.js` file to use `babel-loader`:

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};
```

This configuration file tells Webpack to use `babel-loader` for every file with the `.js` extension and excludes files in the `node_modules` directory from the Babel compiler.

To utilize the Babel presets, the following configuration must be added to `babel.config.json`:

```json
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "esmodules": true
        }
      }
    ],
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ]
  ]
}
```

In the above `@babel/preset-env` must be set to target `esmodules` in order to use the latest Node modules. Additionally, defining the JSX runtime to automatic is necessary since React 18 has adopted the [new JSX Transform functionality](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html).

Now that we have set up Webpack and Babel, we can run JavaScript and React from the command line. In the next section, we will write our first React code and run it in the browser.

## Rendering React components

Now that we have installed and configured the packages necessary to set up Babel and Webpack in the previous sections, we need to create a real React component that can be compiled and run. This process involves adding some new files to the project and making changes to the Webpack configuration:

1. Let's edit the `index.js` file that already exists in our `src` directory so that we can use `react` and `react-dom`. Replace the contents of this file with the following:

```js
import ReactDOM from 'react-dom/client';

function App() {
  return <h1>Rick and Morty</h1>;
}

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<App />);
```

As you can see, this file imports the `react` and `react-dom` packages, defines a simple component that returns an `h1` element containing the name of your application, and has this component rendered in the browser with `react-dom`. The last line of code mounts the `App` component to an element with the `root` ID selector in your document, which is the entry point of the application.

2. We can create a file that has this element in a new directory called `public` and name that file `index.html`. The document structure of this project should look like the following:

```
chapter-1
  |- node_modules
  |- package.json
  |- babel.config.json
  |- webpack.config.js
  |- dist
    |- main.js
  |- public
    |- index.html
  |- src
    |- index.js
```

3. After adding a new file called `index.html` to the new `public` directory, we add the following code inside it:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,
initial-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Rick and Morty</title>
  </head>
  <body>
    <section id="root"></section>
  </body>
</html>
```

This adds an HTML heading and body. Within the `head` tag is the title of our application, and inside the `body` tag is a section with the "root" ID selector. This matches the element we have mounted the `App` component to in the `src/index.js` file.

4. The final step in rendering our React component is extending Webpack so that it adds the minified bundle code to the body tags as scripts when running. To do this, we should install the `html-webpack-plugin` package as a `devDependency`:

```
npm install --save-dev html-webpack-plugin
```

To use this new package to render our files with React, the Webpack configuration in the `webpack.config.js` file must be updated:

```js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: './index.html',
    }),
  ],
};
```

Now, if we run `npm start` again, Webpack will start in development mode and add the `index.html` file to the `dist` directory. Inside this file, we'll see that a new `scripts` tag has been inserted inside the body tag that points to our application bundle – that is, the `dist/main.js` file. 

If we open this file in the browser or run `open dist/index.html` from the command line, it will display the result directly in the browser. The same is true when running the npm run build command to start Webpack in production mode; the only difference is that our code will be minified:.

This process can be sped up by setting up a development server with Webpack. We'll do this in the final part of this blog post.

## Setting up a Webpack development server

While working in development mode, every time we make changes to the files in our application, we need to rerun the `npm start` command. This can be tedious, so we will install another package called `webpack-dev-server`. This package allows us to force Webpack to restart every time we make changes to our project files and manages our application files in memory instead of building the `dist` directory.

The `webpack-dev-server` package can be installed with npm:

```
npm install --save-dev webpack-dev-server
```

Also, we need to edit the dev script in the `package.json` file so that it uses `webpack- dev-server` instead of Webpack. This way, you don't have to recompile and reopen the bundle in the browser after every code change:

```json
{
  "name": "chapter-1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode=development",
    "build": "webpack --mode=production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
```

The preceding configuration replaces Webpack in the start scripts with `webpack-dev-server`, which runs Webpack in development mode. This will create a local development server that runs the application and ensures that Webpack is restarted every time an update is made to any of your project files.

To start the local development server, just enter the following command in the terminal:

```
npm start
```

This will cause the local development server to be active at `http://localhost:8080/` and refresh every time we make an update to any file in our project.

Now, we have created the basic development environment for our React application, which you can further develop and structure when you start building your application.

## Conclusion

In this blog post, we learned how to set up a React project with Webpack and Babel. We also learned how to render a React component in the browser. I always like to learn a technology by building something with it from scratch before jumping into a framework like Next.js or Remix. This helps me understand the fundamentals of the technology and how it works. 

> This blog post is extracted from my book React Projects, available on [Packt](https://packt.link/ReactProjects) and [Amazon](https://amzn.to/3vq4FQP).

I hope you learned some new things about React! Any feedback? Let me know by [connecting to me on Twitter](https://www.twitter.com/gethackteam). Or leave a comment on my [YouTube channel](https://www.youtube.com/@gethackteam?sub_confirmation=1).


Create a React Project From Scratch Without any Framework


GraphQL has changed how developers interact with data in their applications and has often been called the successor to REST. REST APIs have been the standard for a long time but lack certain features to make consuming them easy. GraphQL on the other is hand was created to make the lifes of developers easy. So why do developers love GraphQL so much? In this blog post, I'll give you three reasons why!

Click the image below to watch the [YouTube video version](http://www.youtube.com/watch?v=huqR946Y5is) of this blog post:

[![Can you compare GraphQL and tRPC?](https://i.ytimg.com/vi/huqR946Y5is/hqdefault.jpg)](http://www.youtube.com/watch?v=huqR946Y5is)

## What is GraphQL?

If you haven't heard of GraphQL, it's a query language for APIs. It was created by Facebook in 2012 and open-sourced in 2015. GraphQL allows you to query data from an API in a structured way. It's a great alternative to REST, the most popular way to create APIs today.

I started using GraphQL in 2016 during a hackathon in Berlin and have been using it ever since. I'm using GraphQL in all my projects where I need access to an API, and I have been creating content about GraphQL for years. I've created a GraphQL book, [Fullstack GraphQL](https://www.newline.co/books/fullstack-graphql/welcome), and multiple GraphQL tutorials on my [YouTube channel](https://www.youtube.com/@gethackteam?sub_confirmation=1).

## Why do developers love GraphQL?

## One single endpoint for all your data

One of the biggest advantages of GraphQL is that you only need one single endpoint to query all your data. In REST, you need multiple endpoints to query different data. Generally speaking, every data entity (like a database table) in REST API will have its own endpoint. For example, if you want to get a list of posts and a specific from a CMS API, you need to send requests to two endpoints:

- [GET /posts](https://jsonplaceholder.typicode.com/posts) (list of posts)
- [GET /posts/1](https://jsonplaceholder.typicode.com/posts/1) (specific post)

In GraphQL, you can request both the list of posts and the specific post in one single query:

```graphql
query {
  posts {
    id
    title
  }
  post(id: 1) {
    id
    title
  }
}
```

GraphQL would execute this query against a single endpoint, which is much easier to manage. You don't need to worry about creating multiple endpoints, and you don't need to worry about versioning them.

## No more over- and under-fetching

In REST, you sometimes fetch more than the data you actually need, and this is called over-fetching. In the example from the previous section, you're fetching the list of posts from a REST API, and let's say we want to display them on an overview page. Therefore we need the `id` and `title` of each post, but this REST API is returning a lot more data than you need. Not only is it returning the `id` and `title` of the post, but also the `body` and `userId`. Getting more data than you need wastes bandwidth and processing power.

```json
[
  {
    "id": 1,
    "userId": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },
  {
    "id": 2,
    "userId": 1,
    "title": "qui est esse",
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
  }
  // Other posts...
]
```

In GraphQL, you can request exactly the data you need by specifying the fields you want to get in your query:

```graphql
query {
  posts {
    id
    title
  }
}
```

Opposite to over-fetching, there's also under-fetching. Sometimes need to make multiple requests to REST API endpoints to get all the data you need. This is called under-fetching because you're not getting all the data you need at once. Let's have another look at the example from the previous section. Instead of just getting a specific post on a detail page, we also want the comments for this post. In REST, you need to make two requests as a different endpoint than the post returns the comments:

- [GET /posts/1](https://jsonplaceholder.typicode.com/posts/1) (specific post)
- [GET /posts/1/comments](https://jsonplaceholder.typicode.com/posts/1/comments) (comments for specific post)

In GraphQL, you can request exactly the data you need even when the data is spread across multiple entities. You can request the post and the comments in one single query:

```graphql
{
  post(id: 1) {
    id
    title
    comments {
      id
      name
    }
  }
}

```

This query would return the post and comments in one single response, which is much easier to manage in your application and takes fewer data to transfer. Especially as you prevent over-fetching in this example and only receive the data you're using on your detail page.

## GraphQL is self-documenting

Well, at least partially...

In REST, you need to document your API. This is a lot of work, and it's easy to forget to update the documentation when you make changes to your API. In GraphQL, you don't need to document your API, as the documentation is generated automatically. You can use the GraphiQL tool to explore your GraphQL API and see all the available queries and mutations. You can also see the fields you can request for each query and mutation. This is much easier to manage than documenting your API manually.

![Using GraphiQL](/images/exploring-graphiql-2-changes.png)

GraphQL APIs have built-in documentation, which can be generated from its GraphQL schema. Every GraphQL API has a schema for defining all the operations and data types. The schema is used to validate the queries and mutations you send to the API. You can use the GraphiQL tool (read more in this [blog post](/blog/exploring-graphiql-2-updates-and-new-features)) to explore your GraphQL API and see all the available queries and mutations. You can also see the fields you can request for each query and mutation. But also to generate the documentation, making using a GraphQL API a lot easier to manage than having to document your REST API manually.

## Conclusion

There are many reasons developers love GraphQL, especially frontend developers. GraphQL is easier to manage than REST and is much easier to use in your application. You can use GraphQL in your frontend application to fetch all the data you need in one single request. It prevents over- and under-fetching, plus it's self-documenting. 

I'd love to hear your thoughts on this topic. Do you love GraphQL? Why? Let me know by [connecting to me on Twitter](https://www.twitter.com/gethackteam). Or leave a comment on my [YouTube channel](https://www.youtube.com/@gethackteam?sub_confirmation=1).


Why Do Developers Love GraphQL?


GraphiQL is a popular tool for GraphQL developers. It is a web-based IDE for GraphQL that lets you explore a GraphQL API. It's a great tool for developers to test their GraphQL queries and mutations, and find out what the schema of a GraphQL API looks like. For many developers it's the first tool they use to learn GraphQL.

But for many years, GraphiQL hasn't had a UI update. And it's been a while since it's been updated. But now since few months, GraphiQL 2 is here. It's a complete new version of GraphiQL with a new UI and a lot of new features. In this blog post, I'll explore the new features of GraphiQL 2 and show you how to use them.

Click the image below to watch the [YouTube video version](http://www.youtube.com/watch?v=IFoMMoXezJg) of this blog post:

[![Can you compare GraphQL and tRPC?](https://i.ytimg.com/vi/IFoMMoXezJg/hqdefault.jpg)](http://www.youtube.com/watch?v=IFoMMoXezJg)

## Little bit of history

GraphiQL is a tool that was created to help developers explore GraphQL APIs, maintained by the GraphQL Foundation. But when GraphiQL became more and more popular, developers started to create additional GraphQL IDEs. A good example of this was [GraphQL Playground](https://github.com/graphql/graphql-playground), which quickly became the most popular GraphQL IDE. It was loosely based on GraphiQL, but had more features and a better UI.

After GraphQL Playground became part of the GraphQL Foundation, the need for having just one GraphQL IDE became more important. So the GraphQL Foundation decided to merge GraphiQL and GraphQL Playground into one tool. GraphiQL 1 relied on major tech debt and multiple dependencies that were outdated and hard to maintain. With the merge of GraphiQL and GraphQL Playground, the GraphQL Foundation decided to create a new version of GraphiQL, which is now called GraphiQL 2. The design and creation of GraphiQL 2 was [all documented in Github](https://github.com/graphql/graphiql/discussions/2216).

## First look at GraphiQL 2

For me personally, this is one of the biggest releases in GraphQL world this year. As for too many years we had to work with GraphiQL 1, which is looking like it's coming from the Stone Age. With GraphiQL 2, the theme behind GraphiQL has really outdone themselves as they've created a better version of GraphiQL that looks like it's actually from modern day.

![Exploring GraphiQL 2 updates](/images/exploring-graphiql-2-changes.png)

As you can see in the above screenshot of GraphiQL 2, it looks way more modern than GraphiQL 1. It has a dark mode, a light mode, and a system mode. It has a new UI, and a lot of new features. Compared to GraphiQL 1, it's looks like a complete new version of GraphiQL with the same feel.

Let's look at the same page in GraphiQL 1:

![Comparison with GraphiQL 1](/images/exploring-graphiql-2-comparison.png)

This screenshot is from GraphiQL 1 and as you can see it just feels outdated, from the color scheme to the used font. As oppposed to GraphiQL 2 there's no way to change the theme from the UI itself.

Most features from GraphiQL 1 are also available in GraphiQL 2, such as the docs page, history, and the ability to pass variables and headers. But GraphiQL 2 has a lot of new features as well, which I'll explore in the next section.

## New features in GraphiQL 2

I already mentioned GraphiQL 2 has a dark mode, which is a great addition and something most modern developer tools have today. OFcourse, you cna also switch to system mode, which will use the system theme so it changes to dark when sun sets.

![Dark mode in GraphiQL 2](/images/exploring-graphiql-2-dark-mode.png)

But next to dark mode the biggest feature update is the tabs to switch between multiple queries. This is a great addition as it allows you to have multiple queries open at the same time. This is something I've been missing in GraphiQL 1 for a long time.

![Tabs GraphiQL 2](/images/exploring-graphiql-2-tabs.png)

Having tabs is especially useful when you have a query to get a list of results and a query to get a specific item. You can now have both open at the same time and switch between them.

## Conclusion

GraphiQL 2 is a great update to GraphiQL 1. It has a new UI, a lot of new features, and a dark mode. It's still the easiest tool to use for GraphQL developers to explore a GraphQL API. I'm really excited to see what the future of GraphiQL 2 will bring, especially as GraphiQL 2 is now maintained more activley than GraphiQL 1 used to be.

P.S. Follow [Roy Derks on Twitter](https://www.twitter.com/gethackteam) for more React, GraphQL and TypeScript tips & tricks. And subscribe to my [YouTube channel](ttps://www.youtube.com/@gethackteam?sub_confirmation=1) for React, GraphQL and TypeScript tutorials.


Exploring GraphiQL 2 Updates and New Features


Do you want to get up and running quickly with modern web applications but don't have the time or knowledge to navigate complex configurations? With Next.js, you can set up zero config TypeScript applications to build modern and performant web apps using this open-source JavaScript framework. With this blog post, you'll get up to speed quickly on how to use these two technologies together to build applications without worrying about complex configurations. You'll get into the core concepts of Next.js, understand how to use TypeScript within your projects, and learn how to set up a development environment so that you can start building quickly and easily.

Click the image below to watch the [YouTube video version](https://www.youtube.com/watch?v=ntG90Mf9ySE) of this blog post:

[![Zero Config TypeScript Applications with Next.js](https://i.ytimg.com/vi/ntG90Mf9ySE/hqdefault.jpg)](https://www.youtube.com/watch?v=ntG90Mf9ySE)

By the end of this blog post, you will:

- Know how to set up a fresh application with Next.js
- Understand the core concepts of Next.js and TypeScript
- Be able to use TypeScript in your Next.js Project

## Why combine Next.js and TypeScript?

Building robust, modern web applications can be easy. With Next.js, you'll leverage two of today's most popular technologies - Next.js and TypeScript - together without needing any complex configuration.

Next.js is a framework that allows you to build React applications quickly. It's a great choice for developers who want to get up and running soon with modern web applications without worrying about complex configurations. It's also an excellent choice for developers who wish to build performant and scalable applications, as Next.js has many features that help you make fast and efficient applications. For example, Next.js supports Server-side Rendering (SSR) and Static Site Generation (SSG), two of the most efficient ways to load data in a web application.

TypeScript, on the other hand, is a typed language that adds type safety and improved performance to your codebase.

Together, they form a powerful combination for building modern and performant web apps.

## Getting Started with Next.js

Setting up a development environment with Next.js is straightforward.

You can create a new Next.js project from your terminal using the following command:

```bash
npx create-next-app my-app
```

Where `my-app` is the name of your project, Next.js will prompt you to choose a template, creating a new project for you. For the sake of this blog post, we will select the default template, a simple Next.js application with a single page. And NOT set up a TypeScript project.

Once the project is created, you can run the following command to start the development server:

```bash
npm run dev
```

And you should be seeing a small application that's available at `http://localhost:3000`.

## Fix the "parsing error for using import"

When writing this blog post, I'm using Next.js version 13.0.5. And when I hover over any of the `import` statements at the top of a file, I get the following error:

```bash
Parsing error: Cannot find module 'next/babel'
```

This error shows because Next.js is using Babel to transpile the code, which somehow interferes with the Prettier plugin that my VSCode uses. To fix this, I need to change my `.eslintrc.json` file from:

```json
{
  "extends": "next/core-web-vitals"
}
```

To this:

```json
{
  "extends": ["next/core-web-vitals", "prettier"]
}
```

When you're done, you should be able to hover over the `import` statements without getting any errors.

## Using TypeScript in your Next.js Project

Now that we have a basic Next.js application, we can start adding TypeScript to it. To do this, you don't have to install any additional packages, as Next.js has built-in support for TypeScript.

Convert all the files in your project from `.js` to `.tsx`, and you're good to go. For example, if you have a file called `pages/index.js`, you can rename it to `pages/index.tsx`.

And restart your development server. Next.js will install the dependencies needed to use TypeScript for your project and generate a `tsconfig.json`. This file includes all the required configurations to use Next.js together with TypeScript. You should now be able to use TypeScript features in your codebase.

Once you've done this, you can use TypeScript features in your codebase. For example, you can add types to your function parameters and use interfaces to define the shape of your data.

## Conclusion

In this blog post, you learned how to set up a new application with Next.js, understand the core concepts of Next.js and TypeScript, and be able to use TypeScript in your Next.js Project.

If you're ready to take your web development skills to the next level and learn how to build powerful applications using Next.js and TypeScript, join me for my upcoming videos by subscribing to my YouTube channel.

[> Subscribe to my YouTube channel](https://www.youtube.com/@gethackteam?sub_confirmation=1)

Or find me on Twitter at [@gethackteam](https://twitter.com/gethackteam). I'd love to hear from you!


Zero Config TypeScript Applications with Next.js


Apollo Server has been the go-to JavaScript library for building GraphQL servers for the last half-decade. But almost every year, there are breaking changes, and the latest version 4 is no exception. Not only did they announce breaking changes, they also announced that Apollo will drop support for Apollo Server v2 and v3 as early as October 2023. In this article, I will explain the breaking changes and why it might be time to move away from Apollo Server.


Click the image below to watch the [YouTube video version](http://www.youtube.com/watch?v=BzYxqXCpEmI) of this blog post:

[![Apollo Server v4 Breaking Changes. Time to move away?](https://i.ytimg.com/vi/BzYxqXCpEmI/hqdefault.jpg)](http://www.youtube.com/watch?v=BzYxqXCpEmI)

## Biggest Breaking Changes

Let's look at the most significant breaking changes in Apollo Server v4. Together with these breaking changes, a migration path from earlier versions of Apollo Server was also published in the documentation.

> "We recommend that all users of Apollo Server upgrade to Apollo Server 4 as soon as possible. Apollo Server 2 and Apollo Server 3 are deprecated, with an end-of-life date of October 22nd, 2023." - [Apollo Server v4 Migration Guide](https://www.apollographql.com/docs/apollo-server/migration/)

### New project structure

Apollo Server v4 is the latest version of Apollo Server and is replacing Apollo Server v2 and v3. As part of this update, they've bundled some packages in `@apollo/server` to replace the `apollo-server` package. Part of this is the `apollo-server-express` package, the most popular package for building GraphQL servers in Node.js, which is now integrated into the `@apollo/server` package.

Thus, if you want to use Apollo Server v4, you must follow the migration guide and update your code to use the new packages. As shown in the migration guide flowchart below:

![Apollo Server v4 Migration Path](/images/apollo-server-v4-breaking-changes-migration.png)

This seems like a minor deal unless you're not using Express as your web framework. And an important note here is that Express GraphQL is [being deprecated](https://github.com/graphql/express-graphql) by the GraphQL Foundation. So if you're using Express for a GraphQL API, you should move away from it anyway.

### Dropped support for other web frameworks

Now that Express is the default framework for running the GraphQL server, Apollo decided to remove support for all other web frameworks. This means Apollo is forcing developers to use Express to run their GraphQL servers. This is a big change as Apollo Server v2, and v3 allowed you to build on top of the `apollo-server-*` packages, such as `apollo-server-fastify` or `apollo-server-koa`. This is a huge change as it means you can no longer use Koa or Fastify to run your GraphQL servers unless someone builds a **new package** for it.

![Apollo Server v4 Breaking Changes](/images/apollo-server-v4-breaking-changes-support.png)

Until someone decides to build a new package for the web framework you use, you're stuck with Apollo Server v3, which is deprecated and will be end-of-life in October 2023.

### Updated concept of `dataSources`

Apollo Server v4 has a new concept of `dataSources`. In Apollo Server v2 and v3 you could use the `dataSources` property to pass in an object with all of your data sources. This is no longer the case in Apollo Server v4. Instead, you will need to create a class that extends the `DataSource` class and then pass in an array of instances of this class to the `dataSources` property.

![Deprecated data sources in Apollo Server v4](/images/apollo-server-v4-breaking-changes-datasources.png)

As a "side effect" of this change, Apollo deprecated the data source implementations created for SQL, MongoDB, and Firestore. Similar to the web framework plugins, you will need to make your own data source implementation for these data sources.

### What else has changed?

Besides no longer supporting any other web framework than Express, there are a [a lot of other breaking changes](https://github.com/apollographql/apollo-server/blob/main/packages/server/CHANGELOG.md#400). Not all of them are bad, and the new Apollo Server v4 seems to be fixing a lot of tech debt the team has been building up over the years. For example, Apollo Server v4 has better TypeScript support than previous versions. And the deprecation of `ApolloError` in favor of `GraphQLError` from the `graphql` package is a good step forward to keep Apollo Server more in line with other libraries to build your GraphQL API.

## Should I move away from Apollo Server?

It's entirely up to you. But from a [Reddit post of the Apollo team](https://www.reddit.com/r/graphql/comments/z2d5uo/comment/iy94y43/) it seems the next "backwards incompatible" release of Apollo Server will be Apollo Server v5, in spring 2023(!). To me, that just shows that Apollo Server is not a stable library to build your GraphQL API. And if you're building a GraphQL API for a company, you don't want to be stuck with a library that is not stable and will be deprecated every few years.

That said, if you are using Express you can easily upgrade to Apollo Server v4. Keeping in mind that `express-graphql` has been deprecated as well. If you're using Koa or Fastify, you can still use Apollo Server v3 until October 2023. You're out of luck if you're using any other web framework. You will either need to switch to Express, stay on Apollo Server v3 or wait for community support for the web framework you're using. In that case, consider moving away from Apollo Server.

When moving away from Apollo Server, and you're looking for a replacement built with JavaScript or TypeScript, let me give you some options. If you want to keep building your GraphQL API schema first, you might want to consider [Mercurius](https://mercurius.dev/) (which relies on Fastify) or [GraphQL Yoga](https://the-guild.dev/graphql/yoga-server). If you're going to build your GraphQL API code or resolver first, have a look at [TypeGraphQL](https://typegraphql.com/) or [Nexus](https://nexusjs.org/). Alternatively, there are great GraphQL-as-a-Service solutions such as [StepZen](https://stepzen.com/) in case you no longer want to build, maintain and host your own GraphQL API.

> You can learn more about the differences between schema-first, code/resolver-first, or using a GraphQL-as-a-Service in this [recording of my talk at GraphQL Galaxy 2021](https://www.youtube.com/watch?v=SIq8g9vMVHc).

Are you using Apollo Server? What are your thoughts on the breaking changes? Let me know on Twitter at [@gethackteam](https://twitter.com/gethackteam).


Apollo Server v4 Breaking Changes. Time to move away?


There have been many discussions on Twitter around "GraphQL versus tRPC" for building a modern backend for your application. GraphQL has become popular in recent years as the defacto successor to REST, while tRPC solves the problem of end-to-end safety in fullstack applications. It's like [comparing apples to oranges](https://twitter.com/alexdotjs/status/1597182082941595648?s=20&t=hisusYuNOJ46q08HF8Is8w).

TLDR; GraphQL is a query language, and tRPC is a library.

As a developer working with GraphQL in the past years, this triggered me to compare the two and see what they are both excellent at (and what they are not).

Click the image below to watch the [YouTube video version](http://www.youtube.com/watch?v=_Tc7YVR-0LU) of this blog post:

[![Can you compare GraphQL and tRPC?](https://i.ytimg.com/vi/_Tc7YVR-0LU/hqdefault.jpg)](http://www.youtube.com/watch?v=_Tc7YVR-0LU)

## But first; You might have been using GraphQL wrong

GraphQL is a query language for your API, and it's not a one-to-one replacement for REST. It's a way to query your API in a way that is more flexible than REST, giving you control over the response of the requests. In many of the Twitter conversations, I found that people were comparing GraphQL to REST, and that's different from what GraphQL is. Also, the GraphQL type system is not meant to be used for end-to-end type safety, at least not in a first way. But instead, as a way to document your API and ensure the runtime types of your API are correct.

## Can we compare GraphQL to tRPC?

GraphQL is a query language for your API, while tRPC is a set of libraries for building end-to-end typesafe APIs. As mentioned earlier, this is like comparing apples to oranges. But let's break down both of them and learn about their characteristics.

### GraphQL is a query language

GraphQL APIs typically use HTTP as a transport layer, and the GraphQL query is sent as a POST request to the API. The API then processes the query and returns the result as a JSON response. This is the same way that REST APIs work, but GraphQL is a query language, not a protocol. This means that you can use GraphQL over any transport layer and any protocol you want. This is also why you can use GraphQL in your frontend application because it's just a query language.

![GraphQL overview](/images/graphql-versus-trpc-graphql-overview.png)

GraphQL itself is nothing more than a query language, and it's up to the GraphQL implementation libraries and frameworks to implement this query language according to its specification. This means that there are many different ways to implement GraphQL, and there are many different ways to use GraphQL. This is also why there are many different ways to use GraphQL in your front end application.

### tRPC is a library

[tRPC](https://trpc.io/) is a set of libraries that uses TypeScript to ensure type safety throughout the entire application. Its primary purpose is to make it easy to build end-to-end typesafe applications in a single codebase. The basis is a tRPC server in which you define the endpoints (or routes), the type definition for these endpoints, and handle any connection to a data source - like a database.

![tRPC overview](/images/graphql-versus-trpc-trpc-overview.png)

You can consume a tRPC API in your frontend application, using the tRPC client library. You're not directly sending an HTTP request to get your data, but let the tRPC client handle this for you, almost like an ORM for APIs. This client can make strongly typed API calls without relying on code generation. You can import TypeScript types from the server directly into your frontend application without generating any code.

## What differentiates GraphQL and tRPC?

This is a very subjective question, but I think it's important to know what differentiates GraphQL and tRPC. This way, you can decide for yourself what you want to use in your application.

### GraphQL is great for querying multiple data sources

GraphQL excels in combining multiple data sources into a single query. GraphQL is often used for data modeling and architecture, and it's great for this. For example, if you want to query data from one service (like a Headless CMS) and data from another (let's say a database), you can do this in a single query with GraphQL. You can even combine this data on field or type level. It is one of the major reasons companies like Facebook and GitHub are using GraphQL.

![GraphQL versus tRPC on Twitter](/images/graphql-versus-trpc-tweets.png)
_Tweets from [Jamie Barton](https://twitter.com/notrab) and [Taz Singh](https://twitter.com/tazsingh)._

Whereas tRPC is not really meant for this. It's meant for building end-to-end typesafe APIs, and it's not really meant for combining multiple data sources. You can do this, but it's not the purpose of tRPC.

### tRPC is great for end-to-end type safety

tRPC is great for end-to-end type safety, and it allows you to use the same types in your frontend application as you use in your backend application. GraphQL has no built-in way to share type definitions between a frontend and backend, but you can use the GraphQL schema to generate TypeScript type definitions. But this is different from end-to-end type safety. Every time you update your GraphQL schema, you have to regenerate the types.

When using tRPC, you're building everything using TypeScript. This means that you can import the types from the server directly into your frontend application. The tRPC client can access the TypeScript types from your tRPC server directly. You don't need external libraries when querying tRPC in your frontend application because it's all built-in the tRPC libraries.

### GraphQL allows for decoupled services; tRPC for a single codebase

GraphQL is great for decoupled services as it's programming language and transport layer agnostic. This means that you can use any programming language and any transport layer you want. Services that expose a GraphQL API can be implemented in any programming language, for example TypeScript and Go, and still be able to communicate with each other. For teams and companies that are technologicallyy diverse this is a great way to scale and limit the amount of dependencies between teams.

tRPC is not really meant for this. It's meant for building end-to-end typesafe APIs in a single codebase, in TypeScript! It brings your frontend and backend closely together, for example in a monorepo. You can use the same types in your frontend and backend application, which allows you to rapidly iterate on your application. What's not to love if you're building a fullstack TypeScript project?

### tRPC is easier to use than GraphQL

"tRPC is easier to use than GraphQL" is a recurring statement people make when comparing GraphQL and tRPC. But as tRPC is a library and GraphQL is a query language, it's impossible to compare. For GraphQL, it's up to the developer to build a GraphQL using one of the many available implementations, while tRPC is a set of libraries you can use out of the box. This makes it not a fair comparison, but let's break it down anyway.

For example, you could build a GraphQL API using a schema-first GraphQL server library. You have to define a GraphQL schema, write the resolvers to collect the data from a data source, and then generate the types from the schema. Going this path is a lot of work and comes with many choices you need to make as a developer.

But you can also build a GraphQL API using a code-first GraphQL server library. This means you can write the resolvers and then generate the schema from the resolvers. Code-first libraries are much closer to tRPC in terms of Developer Experience but still more challenging than using a GraphQL-as-a-service like [StepZen](https://stepzen.com).

Then you also have a wide choice of various GraphQL client libraries. You can use GraphQL client library like [Apollo Client](https://www.apollographql.com/docs/react/) or [urql](https://formidable.com/open-source/urql/) that helps you with caching and state management, or use a library that only handles the HTTP requests. There are many choices, which could be unclear when you're new to GraphQL.

## Conclusion

In this blog post, I explained the differences between GraphQL and tRPC. I hope this blog post helped you understand the differences between the two and that you can now make a better decision on which one to use for your next project. The main questions to ask yourself when choosing between GraphQL and tRPC are:

- Do you want to query multiple data sources in a single query and keep your services decoupled? If so, GraphQL is a perfect choice. If you want end-to-end type safety and don't care about decoupling your frontend and backend, tRPC is a better fit.
- Are you planning to work with multiple programming languages? Go for GraphQL, as it's programming language agnostic. If you want to use TypeScript throughout your entire application, tRPC might be a better fit.

There are many other things to consider when choosing between GraphQL and tRPC, but these are the main ones in my opinion. I'd love to hear your thoughts on this, so please let me know via Twitter at [@gethackteam](https://twitter.com/gethackteam).


Can you compare GraphQL and tRPC?


Are you looking to create your own React TypeScript project, but don't know where to start? With this blog post, you'll get a comprehensive guide to setting up a React TypeScript project from scratch. We'll discuss the necessary components and considerations for environment setup, creating a basic project structure and running the application. With this comprehensive guide in hand, you'll have all the information you need to get started on your React TypeScript journey and create something truly amazing. So, let's dive in and get started on your React TypeScript project!

Click the image below to watch the YouTube video version of this blog post:

[![Setting up Your First React TypeScript Project From Scratch](https://i.ytimg.com/vi/ek6rGKXk4e4/hqdefault.jpg)](http://www.youtube.com/watch?v=ek6rGKXk4e4)

## Installing Create React App

Today, Create React App is the most popular way to create a React project. It's a tool that allows you to create a React project without having to worry about the configuration. It's a great way to get started with React and TypeScript. You can create a new project with Create React App using `npx` with the following command:

```bash
npx create-react-app my-app

```

This will create a new React project in the `my-app` directory. Now that your React project is set up, it's time to run the application. You can then run the project with the following command:

```bash
cd my-app
npm start
```

This will start the development server and open the application in your browser in `http://localhost:3000`. You can now start developing your React TypeScript project!

> Note: `npx` is installed on your machine when you install Node.js.

## Installing TypeScript

To use TypeScript in your Create React App project, you need to add a `tsconfig.json` file that holds the TypeScrupt configuration. You can do this by running the following command:

```bash
touch tsconfig.json
```

And add this configuration to the `tsconfig.json` file:

```json
{
  "compilerOptions": {
    "outDir": "dist",
    "rootDir": "src",
    "sourceMap": true,
    "noImplicitAny": true,
    "allowJs": true,
    "moduleResolution": "node",
    "module": "commonJS",
    "lib": ["es6", "dom"],
    "target": "ES5",
    "jsx": "react"
  },
  "exclude": ["node_modules", "dist"]
}
```

To use TypeScript in your project, you only need to restart the development server by running `npm start` again. This will now compile your TypeScript code to JavaScript and run the application.

Every file in your application can be renamed from `js` to `tsx` to use TypeScript. You can also add the `ts` extension to your files, but it's needed to use `tsx` for React components as these files contain JSX.

You can now start developing your React TypeScript project!

## Allowing synthetic default imports

In your IDE you might see some errors highlighted about synthetic default imports. This is because TypeScript doesn't know how to import the default export from a module. By default, imports in TypeScript have the following syntax:

```typescript
import * as React from 'React';
```

If we want to keep importing our modules as we did with Babel, we need to change some settings in our `tsconfig.json` file:

```json
{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    ...
  }
}
```

After this, we can deconstruct our imports again and avoid the obligatory asterisk `*`:

```typescript
import React, { FC } from 'react';
```

This will allow us to import our modules as we did before. But there are more things we should do to make our TypeScript project more robust.

## Adding global type definitions

Another highlighted error in your IDE (I'm using VS code) is that it cannot find the type definitions for the SVG files we're importing. 

`Cannot find module './logo.svg' or its corresponding type declarations.`

To fix this, we need to add this type definition to our project. We can do this by creating a `global.d.ts` file in the `src` directory and adding the following code:

```typescript
declare module '*.svg' {
  const content: string;
  export default content;
}
```

This will allow us to import SVG files in our project without any errors.

## Creating a TypeScript React component

Now that we've set up our project, it's time to create our first TypeScript React component. We can do this by creating a `components/Link.tsx` file in the `src` directory and adding the following code:

```typescript
import * as React from 'react';

type LinkProps = {
  href: string;
  targetBlank: boolean;
  children: React.ReactNode | string;
};

export default function Link({
  href,
  targetBlank = false,
  children,
}: LinkProps) {
  return (
    <a
      className='App-link'
      href={href}
      target={targetBlank ? '_blank' : ''}
      rel={targetBlank ? 'noopener noreferrer' : ''}
    >
      {children}
    </a>
  );
}
```

This will create a simple `Link` component that we can use in our application. We can now import this component in our `App.tsx` file and use it in our application.

For example, we can replace the `a` tag in the `App.tsx` file with our `Link` component:

```typescript
import * as React from 'react';
import logo from './logo.svg';
import './App.css';
import Link from './components/Link';

function App() {
  return (
    <div className='App'>
      <header className='App-header'>
        <img src={logo} className='App-logo' alt='logo' />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <Link href='https://reactjs.org' targetBlank>
          Learn React
        </Link>
      </header>
    </div>
  );
}

export default App;
```

This will now render the `Link` component in our application. You can now start developing your React TypeScript project by adding more components!

## Conclusion

By the end of this blog post, you should have all the information you need to get started on React TypeScript development. We've discussed how to set up an environment, create a project structure and run the application. And that’s it! With this comprehensive guide in hand, you now have all the information you need to set up and run your React TypeScript project from scratch. I hope this guide was helpful and wish you luck on your React TypeScript journey!

Good luck and happy coding!

P.S. Follow [Roy Derks on Twitter](https://www.twitter.com/gethackteam) for more React, GraphQL and TypeScript tips & tricks. And subscribe to my [YouTube channel](https://www.youtube.com/@gethackteam) for more React, GraphQL and TypeScript tutorials.


Blog

Read the latest