5 Mistakes I Made When Starting My First React Project
Tags: article, learning, react
Published: 2023-08-21 21:02:24

---
title: 5 Mistakes I Made When Starting My First React Project
published: true
date: 2023-03-10 16:41:52 UTC
tags: Article,learning,react
canonical_url: https://css-tricks.com/5-mistakes-starting-react/
---

You know what it’s like to pick up a new language or framework. Sometimes there’s great documentation to help you find your way through it. But even the best documentation doesn’t cover absolutely everything. And when you work with something that’s new, you’re bound to find a problem that doesn’t have a written solution.

That’s how it was for me the first time I created a React project — and React is one of those frameworks with remarkable documentation, especially now with the beta docs. But I still struggled my way through. It’s been quite a while since that project, but the lessons I gained from it are still fresh in my mind. And even though there are a lot of React “how-to” tutorials in out there, I thought I’d share what I wish I knew when I first used it.

So, that’s what this article is — a list of the early mistakes I made. I hope they help make learning React a lot smoother for you.

### Using create-react-app to start a project

TL;DR Use Vite or Parcel.

[Create React App](https://create-react-app.dev/) (CRA) is a tool that helps you set up a new React project. It creates a development environment with the best configuration options for most React projects. This means you don’t have to spend time configuring anything yourself.

As a beginner, this seemed like a great way to start my work! No configuration! Just start coding!

CRA uses two popular packages to achieve this, webpack and Babel. webpack is a web bundler that optimizes all of the assets in your project, such as JavaScript, CSS, and images. Babel is a tool that allows you to use newer JavaScript features, even if some browsers don’t support them.

Both are good, but there are newer tools that can do the job better, specifically [Vite](https://vitejs.dev) and [Speedy Web Compiler](https://swc.rs) (SWC).

These new and improved alternatives are faster and easier to configure than webpack and Babel. This makes it easier to adjust the configuration which is difficult to do in create-react-app without ejecting.

To use them both when setting up a new React project you have to make sure you have [Node](https://nodejs.org/en/) version 12 or higher installed, then run the following command.

```
npm create vite
```

You’ll be asked to pick a name for your project. Once you do that, select React from the list of frameworks. After that, you can select either `Javascript + SWC` or `Typescript + SWC`

Then you’ll have to change directory `cd` into your project and run the following command;

```
npm i && npm run dev
```

This should run a development server for your site with the URL `localhost:5173`

And it’s as simple as that.

<time datetime="2022-01-11" title="Originally published Mar 10, 2023">
    <strong>
                
        Article
      </strong>

    on

    Jan 11, 2022 </time>
### [Adding Vite to Your Existing Web App](https://css-tricks.com/adding-vite-to-your-existing-web-app/)

[learning](https://css-tricks.com/tag/learning/) [react](https://css-tricks.com/tag/react/)

[![](https://secure.gravatar.com/avatar/d4b0907c0d98a2394568d9bf9e8814c3?s=80&d=retro&r=pg)](https://css-tricks.com/author/adam-rackis/)[Adam Rackis](https://css-tricks.com/author/adam-rackis/)

<time datetime="2022-01-18" title="Originally published Mar 10, 2023">
    <strong>
                
        Article
      </strong>

    on

    Jan 18, 2022 </time>
### [Making a Site Work Offline Using the VitePWA Plugin](https://css-tricks.com/vitepwa-plugin-offline-service-worker/)

[learning](https://css-tricks.com/tag/learning/) [react](https://css-tricks.com/tag/react/)

[![](https://secure.gravatar.com/avatar/d4b0907c0d98a2394568d9bf9e8814c3?s=80&d=retro&r=pg)](https://css-tricks.com/author/adam-rackis/)[Adam Rackis](https://css-tricks.com/author/adam-rackis/)

<time datetime="2022-01-12" title="Originally published Mar 10, 2023">
    <strong>
                
        Article
      </strong>

    on

    Jan 12, 2022 </time>
### [Parcel CSS: A New CSS Parser, Transformer, and Minifier](https://css-tricks.com/parcel-css/)

[learning](https://css-tricks.com/tag/learning/) [react](https://css-tricks.com/tag/react/)

[![](https://secure.gravatar.com/avatar/8081b26e05bb4354f7d65ffc34cbbd67?s=80&d=retro&r=pg)](https://css-tricks.com/author/chriscoyier/)[Chris Coyier](https://css-tricks.com/author/chriscoyier/)

<time datetime="2019-04-25" title="Originally published Mar 10, 2023">
    <strong>
                
        Article
      </strong>

    on

    Apr 25, 2019 </time>
### [Using Parcel as a Bundler for React Applications](https://css-tricks.com/using-parcel-as-a-bundler-for-react-applications/)

[learning](https://css-tricks.com/tag/learning/) [react](https://css-tricks.com/tag/react/)

[![](https://secure.gravatar.com/avatar/b0d0ce2a0e59387acbf0848f62aa52bf?s=80&d=retro&r=pg)](https://css-tricks.com/author/kinglseysilas/)[Kingsley Silas](https://css-tricks.com/author/kinglseysilas/)

### Using `defaultProps` for default values

TL;DR Use default function parameters instead.

Data can be passed to React components through something called `props`. These are added to a component just like attributes in an HTML element and can be used in a component’s definition by taking the relevant values from the prop object passed in as an argument.

```
// App.jsx
export default function App() {
  return <Card title="Hello" description="world" />
}

// Card.jsx
function Card(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  );
}

export default Card;
```

If a default value is ever required for a `prop`, the `defaultProp` property can be used:

```
// Card.jsx
function Card(props) {
  // ...
}

Card.defaultProps = {
  title: 'Default title',
  description: 'Desc',
};

export default Card;
```

With modern JavaScript, it is possible to destructure the `props` object and assign a default value to it all in the function argument.

```
// Card.jsx
function Card({title = "Default title", description= "Desc"}) {
  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
    </div>
  )
}

export default Card;
```

This is more favorable as the code that can be read by modern browsers without the need for extra transformation.

Unfortunately, `defaultProps` do require some transformation to be read by the browser since JSX (JavaScript XML) isn’t supported out of the box. This could potentially affect the performance of an application that is using a lot of `defaultProps`.

<time datetime="2019-10-02" title="Originally published Mar 10, 2023">
    <strong>
                
        Article
      </strong>

    on

    Oct 23, 2019 </time>
### [Demonstrating Reusable React Components in a Form](https://css-tricks.com/demonstrating-reusable-react-components-in-a-form/)

[learning](https://css-tricks.com/tag/learning/) [react](https://css-tricks.com/tag/react/)

[![](https://secure.gravatar.com/avatar/b0d0ce2a0e59387acbf0848f62aa52bf?s=80&d=retro&r=pg)](https://css-tricks.com/author/kinglseysilas/)[Kingsley Silas](https://css-tricks.com/author/kinglseysilas/)

<time datetime="2016-02-08" title="Originally published Mar 10, 2023">
    <strong>
                
        Article
      </strong>

    on

    Jun 7, 2017 </time>
### [I Learned How to be Productive in React in a Week and You Can, Too](https://css-tricks.com/productive-in-react/)

[learning](https://css-tricks.com/tag/learning/) [react](https://css-tricks.com/tag/react/)

[![](https://secure.gravatar.com/avatar/48cfd8342f9b9e5b7970f63afb0a8ee3?s=80&d=retro&r=pg)](https://css-tricks.com/author/sdrasner/)[Sarah Drasner](https://css-tricks.com/author/sdrasner/)

<time datetime="2018-08-31" title="Originally published Mar 10, 2023">
    <strong>
                
        Article
      </strong>

    on

    Aug 31, 2018 </time>
### [Props and PropTypes in React](https://css-tricks.com/props-and-proptypes-in-react/)

[learning](https://css-tricks.com/tag/learning/) [react](https://css-tricks.com/tag/react/)

[![](https://secure.gravatar.com/avatar/b0d0ce2a0e59387acbf0848f62aa52bf?s=80&d=retro&r=pg)](https://css-tricks.com/author/kinglseysilas/)[Kingsley Silas](https://css-tricks.com/author/kinglseysilas/)

### Don’t use `propTypes`

TL;DR Use TypeScript.

In React, the `propTypes` property can be used to check if a component is being passed the correct data type for its props. They allow you to specify the type of data that should be used for each prop such as a string, number, object, etc. They also allow you to specify if a prop is required or not.

This way, if a component is passed the wrong data type or if a required prop is not being provided, then React will throw an error.

```
// Card.jsx
import { PropTypes } from "prop-types";

function Card(props) {
  // ...
}

Card.propTypes = {
  title: PropTypes.string.isRequired,
  description: PropTypes.string,
};

export default Card;
```

[TypeScript](https://github.com/microsoft/TypeScript) provides a level of type safety in data that’s being passed to components. So, sure, `propTypes` were a good idea back when I was starting. However, now that TypeScript has become the go-to solution for type safety, I would highly recommend using it over anything else.

```
// Card.tsx
interface CardProps {
  title: string,
  description?: string,
}

export default function Card(props: CardProps) {
  // ...
}
```

TypeScript is a programming language that builds on top of JavaScript by adding static type-checking. TypeScript provides a more powerful type system, that can catch more potential bugs and improves the development experience.

<time datetime="2018-08-31" title="Originally published Mar 10, 2023">
    <strong>
                
        Article
      </strong>

    on

    Aug 31, 2018 </time>
### [Props and PropTypes in React](https://css-tricks.com/props-and-proptypes-in-react/)

[learning](https://css-tricks.com/tag/learning/) [react](https://css-tricks.com/tag/react/)

[![](https://secure.gravatar.com/avatar/b0d0ce2a0e59387acbf0848f62aa52bf?s=80&d=retro&r=pg)](https://css-tricks.com/author/kinglseysilas/)[Kingsley Silas](https://css-tricks.com/author/kinglseysilas/)

<time datetime="2018-03-21" title="Originally published Mar 10, 2023">
    <strong>
                
        Article
      </strong>

    on

    Mar 27, 2018 </time>
### [Putting Things in Context With React](https://css-tricks.com/putting-things-in-context-with-react/)

[learning](https://css-tricks.com/tag/learning/) [react](https://css-tricks.com/tag/react/)

[![](https://secure.gravatar.com/avatar/fc8aa639f5c8b5362773475c3734a4db?s=80&d=retro&r=pg)](https://css-tricks.com/author/nealfennimore/)[Neal Fennimore](https://css-tricks.com/author/nealfennimore/)

<time datetime="2018-11-16" title="Originally published Mar 10, 2023">
    <strong>
                
        Article
      </strong>

    on

    Nov 16, 2018 </time>
### [An Overview of Render Props in React](https://css-tricks.com/an-overview-of-render-props-in-react/)

[learning](https://css-tricks.com/tag/learning/) [react](https://css-tricks.com/tag/react/)

[![](https://secure.gravatar.com/avatar/b0d0ce2a0e59387acbf0848f62aa52bf?s=80&d=retro&r=pg)](https://css-tricks.com/author/kinglseysilas/)[Kingsley Silas](https://css-tricks.com/author/kinglseysilas/)

### Using class components

TL;DR: Write components as functions

Class components in React are created using JavaScript classes. They have a more object-oriented structure and as well as a few additional features, like the ability to use the `this` keyword and lifecycle methods.

```
// Card.jsx
class Card extends React.Component {
  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>{this.props.description}</p>
      </div>
    )
  }
}

export default Card;
```

I prefer writing components with classes over functions, but JavaScript classes are more difficult for beginners to understand and `this` can get very confusing. Instead, I’d recommend writing components as functions:

```
// Card.jsx
function Card(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  )
}

export default Card;
```

Function components are simply JavaScript functions that return JSX. They are much easier to read, and do not have additional features like the `this` keyword and [lifecycle methods](https://css-tricks.com/the-circle-of-a-react-lifecycle/) which make them more performant than class components.

Function components also have the advantage of using hooks. [React Hooks](https://css-tricks.com/intro-to-react-hooks/) allow you to use state and other React features without writing a class component, making your code more readable, maintainable and reusable.

<time datetime="2019-06-26" title="Originally published Mar 10, 2023">
    <strong>
                
        Article
      </strong>

    on

    Jul 6, 2019 </time>
### [Getting to Know the useReducer React Hook](https://css-tricks.com/getting-to-know-the-usereducer-react-hook/)

[learning](https://css-tricks.com/tag/learning/) [react](https://css-tricks.com/tag/react/)

[![](https://secure.gravatar.com/avatar/b0d0ce2a0e59387acbf0848f62aa52bf?s=80&d=retro&r=pg)](https://css-tricks.com/author/kinglseysilas/)[Kingsley Silas](https://css-tricks.com/author/kinglseysilas/)

<time datetime="2019-01-18" title="Originally published Mar 10, 2023">
    <strong>
                
        Article
      </strong>

    on

    May 1, 2020 </time>
### [Intro to React Hooks](https://css-tricks.com/intro-to-react-hooks/)

[learning](https://css-tricks.com/tag/learning/) [react](https://css-tricks.com/tag/react/)

[![](https://secure.gravatar.com/avatar/b0d0ce2a0e59387acbf0848f62aa52bf?s=80&d=retro&r=pg)](https://css-tricks.com/author/kinglseysilas/)[Kingsley Silas](https://css-tricks.com/author/kinglseysilas/)

<time datetime="2022-07-13" title="Originally published Mar 10, 2023">
    <strong>
                
        Article
      </strong>

    on

    Jul 15, 2022 </time>
### [React Hooks: The Deep Cuts](https://css-tricks.com/react-hooks-the-deep-cuts/)

[learning](https://css-tricks.com/tag/learning/) [react](https://css-tricks.com/tag/react/)

[![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2022/07/blessing.webp?resize=80%2C80&ssl=1)](https://css-tricks.com/author/blessingeneanyebe/)[Blessing Ene Anyebe](https://css-tricks.com/author/blessingeneanyebe/)

### Importing React unnecessarily

TL;DR: There’s no need to do it, unless you need hooks.

Since React 17 was released in 2020, it’s now unnecessary to import React at the top of your file whenever you create a component.

```
import React from 'react'; // Not needed!
export default function Card() {}
```

But we had to do that before React 17 because the JSX transformer (the thing that converts JSX into regular JavaScript) used a method called [`React.createElement`](https://reactjs.org/docs/react-api.html#createelement) that would only work when importing React. Since then, a new transformer has been release which can transform JSX without the `createElement` method.

You will still need to import React to use hooks, [fragments](https://css-tricks.com/render-children-in-react-using-fragment-or-array-components/), and any other functions or components you might need from the library:

```
import { useState } from 'react';

export default function Card() {
  const [count, setCount] = useState(0);
  // ...
}
```

### Those were my early mistakes!

Maybe “mistake” is too harsh a word since some of the better practices came about later. Still, I see plenty of instances where the “old” way of doing something is still being actively used in projects and other tutorials.

To be honest, I probably made way more than five mistakes when getting started. Anytime you reach for a new tool it is going to be more like a learning journey to use it effectively, rather than flipping a switch. But these are the things I still carry with me years later!

If you’ve been using React for a while, what are some of the things you wish you knew before you started? It would be great to get a collection going to help others avoid the same struggles.

* * *

<small><a rel="nofollow" href="https://css-tricks.com/5-mistakes-starting-react/">5 Mistakes I Made When Starting My First React Project</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</small>