[React course] How YOU can create your first React project and create your first component

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

Follow me on Twitter, happy to take your suggestions on topics or improvements /Chris

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:

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:

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
• Snowpack docs

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:

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

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

   npm install react react-dom --save

1. Rename your entry point file:

   mv index.js index.jsx

1. Add the following content to index.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:

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

1. Run the app with npm start

   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:

    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:

   import Jedi from './Jedi';

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

   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:

   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:

   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:

   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:
   

   npm start
   

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

   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.