[React course] How YOU can create your first React project and create your first component
Tags: react, javascript, tutorial, beginners
Published: 2022-06-15 12:50:49

---
title: [React course] How YOU can create your first React project and create your first component
published: true
series: react-book
description: learn how to create your first react project, your first component and pass some data into your component.
tags: react, javascript, tutorial, beginners
# cover_image: https://direct_url_to_image.jpg
---

> TLDR; in this article, you will learn how to scaffold a React project with Snowpack and create your first React component. This is from my [free React book](https://github.com/softchris/react-book)

Follow me on [Twitter](https://twitter.com/chris_noring), happy to take your suggestions on topics or improvements /Chris

{% embed https://www.youtube.com/watch?v=0MZ2MkPCk1Q %}

## Why React

React lets you build SPAs, single page applications. React has currently 190k stars on GitHub and is used by some of the biggest companies in the industry.

## What & Why of components

React, like many other libraries and frameworks that helps you build SPA apps, is using components. Components are isolated pieces capable of for example running a specific piece of information like a product, or an Ad and may sometimes even have its own state. By having components, you create a nice logical separation but also make it easier to maintain your code in a multi developer team.

### Component examples

In React, you can create a component using either a class based approach or function based. 

**Class based**
In the class based approach, your code looks like so:

```javascript
class Banner extends React.Component {
  render() {
      return (
        <div>I am a Banner Component</div>
      );
    }
}
```

Above, your component inherits from `React.Component` and has a `render()` method. Said method ends up running JSX that is converted to HTML in the compilation phase.

**Function based**

In the function based approach, your component is a function and ends up returning JSX. Here's how the above class based component would look like:

```javascript
const Banner = () => <div>I am a Banner Component</div>;

//alt II
function Banner {
  return <div>I am a Banner Component</div>
}
```

## Why Snowpack

There are two major problems we need to address when building React apps:

- **Modules**, we want to be able to divide up our code in different files for the sake of order and maintenance among other reasons.
- **JSX**, we need a way to transpile JSX to HTML and JavaScript. 

There are many tools out there that will get you there, like Webpack, Parcel and more. Snowpack is a relatively new tool and I find it to be go a good choice starting out learning React as you can start out simple with almost no config and it's also fast, which doesn't hurt as you build bigger projects later.

## References

- [My free React book on GitHub](https://github.com/softchris/react-book)
- [Snowpack docs](https://www.snowpack.dev/tutorials/react)

## Exercise - setup your React project with Snowpack

Let's create a React project using Snowpack. We'll start by scaffolding a Snowpack project and add the pieces that React needs after that.

1. Create a new project by running the below command:

   ```console
   npx create-snowpack-app app --template @snowpack/app-template-minimal
   ```

1. Run `npm install` to add the React specific libraries:

   ```console
   npm install react react-dom --save
   ```

1. Rename your entry point file:

   ```console
   mv index.js index.jsx
   ```

1. Add the following content to *index.jsx*:

   ```jsx
   import React from 'react';

   import ReactDOM from 'react-dom';
   ReactDOM.render(
     <div>My app</div>, 
     document.getElementById('root')
   );
   ```

1. Add the following line to *index.html* just above the script tag:

   ```html
   <div id="root"></div>
   ```

1. Run the app with `npm start`

   ```console
   npm start
   ```

   You should now see "My app" at <http://localhost:8080>.

   This will create a sub directory *app*.

## Exercise - Create your first component

1. Create a file *Jedi.jsx*, and give it the following content:

   ```javascript
    import React from 'react';

    class Jedi extends React.Component {
      render() {
        return (
          <div>I am a Jedi Component</div>
        );
      }
    }
    
    export default Jedi;
   ```

   Above we are defining the class `Jedi` and have it inherit from  `React.Component`. Thereafter we define the method `render()` that defines what our component will output. We return a JSX statement as output.

### Use component

Now that we have our component we can easily use it.

1. Open the file *index.js* and add the following row at the top:

   ```javascript
   import Jedi from './Jedi';
   ```

1. Locate the part of the code that says `ReactDOM.render` and change it to look like so:

   ```javascript
   ReactDOM.render(
    <Jedi />,
    document.getElementById('root')
   );
   ```

   The `<Jedi>` component has been added to the markup.

1. Test your project by running the following command at the root:

   ```bash
   npm start
   ```

   This should tell you the bundle compiled correctly and that your app runs at **<http://localhost:8080>**.

1. Open up a browser and navigate to **<http://localhost:8080>**. You should see the following text on the webpage:

   ```output
   I am a Jedi Component
   ```

   Success!

## Exercise - create a function component

Let's create the other type of component, so you can compare.

1. Locate the *Jedi.js* file and change its content to the following:

   ```javascript
   import React from 'react';

   const Jedi = () => <div>I am a Jedi Component</div>

   export default Jedi;
   ```

   What you've done is to create component that is just a simple function. What makes it work is that it returns JSX so regardless if you use an arrow function or use the `function` keyword, it needs to return JSX.

1. Run the project with `npm start`:

    ```bash
    npm start
    ```

1. Open up a browser and navigate to **http://localhost:8080**. You should see:

   ```output
   I am a Jedi Component
   ```

   Success !

## Summary

You've taken your first steps to learning React and you know have a build tool to support you in Snowpack. In the next part we will cover how to render various pieces of data - stay tuned.