DEV Community

Chris Noring for Microsoft Azure

Posted on

[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>
      );
    }
}
Enter fullscreen mode Exit fullscreen mode

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>
}
Enter fullscreen mode Exit fullscreen mode

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

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
Enter fullscreen mode Exit fullscreen mode
  1. Run npm install to add the React specific libraries:
   npm install react react-dom --save
Enter fullscreen mode Exit fullscreen mode
  1. Rename your entry point file:
   mv index.js index.jsx
Enter fullscreen mode Exit fullscreen mode
  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')
   );
Enter fullscreen mode Exit fullscreen mode
  1. Add the following line to index.html just above the script tag:
   <div id="root"></div>
Enter fullscreen mode Exit fullscreen mode
  1. Run the app with npm start
   npm start
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode
  1. Locate the part of the code that says ReactDOM.render and change it to look like so:
   ReactDOM.render(
    <Jedi />,
    document.getElementById('root')
   );
Enter fullscreen mode Exit fullscreen mode

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

  1. Test your project by running the following command at the root:
   npm start
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (3)

Collapse
likileads profile image
Likith R

Well structured blog,
Chris also I would like to know how do you choose between class and functional component (like when to use which component)

Collapse
softchris profile image
Chris Noring Author

Thanks. so I would say it feels like more developers are leaning on using functional components + hooks (if they need state). However, a lot of old projects are written with class based components. I think the guidance is to use functional components more and more now that we have hooks.. I think you and your team needs to decide what to do about older projects that are using class based components and ensure all greenfield projects are using function based components. Hope that helps?

Collapse
jimronson2 profile image
jimronson2

so nice