5 Mistakes I Made When Starting My First React Project

You know what it is to learn a new language or a new structure. Sometimes there’s great documentation out there to help you navigate it, but even the best documentation doesn’t cover everything, and when you’re working on something new, you might run into a problem that doesn’t have a written solution.

It was like that for me when I first created a React project, and React is one of those frameworks with great documentation, especially now with beta documentation. . But I still had a hard time getting out of it. It’s been a while since this project, but the lessons I learned are still fresh in my mind. And while there are plenty of handy tutorials for React, I thought I’d share what you might want to know if you’re using it for the first time.

This is what this article is about: a list of the first mistakes I made. I hope they will help you learn how to react much easier to do.

Using create-react-app to start a project

Create React App (CRA) is a tool to help you set up a new React project. Create a development environment with the best configuration options for most React projects. This means you don’t have to spend time configuring anything yourself.

For me, as a beginner, it seemed like a great way to start my work! No installation! Just start coding!

CRA uses two popular packages: Webpack and Babel. Webpack is a web pack that optimizes all your project resources like JavaScript, CSS, and images. Babel is a tool that allows you to use new JavaScript features, even if some browsers don’t support them.

Both are good, but there is There are new tools that can do the job better, especially Vite and Speedy Web Compiler (SWC).

These new and improved alternatives are faster and easier to configure than webpack and babel This makes it easier to adjust settings, which is hard to do in create-react application without eviction.

To use both when setting up a new React project you need to make sure you have installed Node version 12 or higher then run the following command.

npm create vite

You will be asked to choose a name for Next, select “React” from the list of frames. After that you can select Javascript + SWC or Typescript + SWC

Then you need to change directory. Family: SFMano-Regular, Consolas, “Liberation Mono”, Menlo, MPV; “>cd into your project and run the following command:

npm i && npm run dev

Here is a development server for your website should work with URL localhost:5173

Using defaultProps for default values

Data may be passed to components React via something called Accessories. These are added to a component like the attributes of an HTML element and can be used in a component definition by selecting the relevant values ​​are taken from the prop object passed 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 needed 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 JavaScript modern, destructuring possible props object and give it a default value 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;

It’s cheaper because code can be read by modern browsers without additional transformation.

Unfortunately defaultProps require some transformations for the browser to read them, as JSX (JavaScript XML) is not supported by default, which could potentially affect the performance of an application that uses a lot of defaultProps.

Don’t use propTypes

In React, the font size “propTypes” property can be used to verify that a component passes the type of correct data for its prop let you specify the type of data to use for each prop, such as a string, number, object, etc. They also let you specify whether a prop is required or not.

This way, if a component receives the wrong data type or a required prop is not provided, 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 provides type-safety for data passed to components. Of course, propTypes was a good idea at first. However, now that TypeScript has become the go-to solution for type safety, I highly recommend using it above everything else.

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

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

TypeScript is a JavaScript-based programming language in adding static type checking. TypeScript provides a more powerful type system that can catch more potential errors and improve the development experience.

Using class components

Class components in React are built using JavaScript class helper. They have a more object-oriented nature structure and some additional features, such as the ability to this lifecycle keyword and 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 to write components with classes rather than functions, but JavaScript classes are harder for beginners very hard to understand and can get confusing Instead I would 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 don’t have extra features like this keyword and lifecycle methods that make them more powerful than class components.

Feature components also have the advantage of using per hook. React hooks let you use status and other React functions without having to write a class component, making your code more readable, maintainable, and reusable.

Importing React unnecessarily

Since the release of React 17 in 2020 , it is no longer necessary to import React at the top of your file each time you create a component.

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

But we had to do this before React 17 because JSX -Transform (the JSX converted to regular JavaScript) used a method called React.createElement which would only work when importing React. Meanwhile, a new transformer has been released which can transform JSX without createElement Method.

You still need to import React to use square brackets, Fragments and any other functions or components you may need in the library:

Those were my early mistakes!

Maybe “Error” is a word too hard among the best practices came later, but I see many cases where the “old” approach is still actively used in projects and other tutorials.

To be honest, I probably made more than five mistakes at first. Whenever you seek out a new tool, using it effectively is more of a learning journey 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 do you want to know before you start? It would be great to have a collection to help others avoid the same pitfalls.