5 Mistakes I Made When Starting My First React Project

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.

You will still need to import React to use hooks, fragments, and any other functions or components you might need from the library:

Create React App (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.

Using create-react-app to start a project

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

export default Card;

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.

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

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

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

export default Card;

import { useState } from 'react';

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

Those were my early mistakes!

TL;DR: Write components as functions

TL;DR Use default function parameters instead.

TL;DR Use Vite or Parcel.

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

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.

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.

npm i && npm run dev

And it’s as simple as that.

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

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.

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

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.

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

export default Card;

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.

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

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

export default Card;

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.

// 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;

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

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

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

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

export default Card;

Function components also have the advantage of using hooks. React Hooks allow you to use state and other React features without writing a class component, making your code more readable, maintainable and reusable.

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.

npm create vite

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.

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.

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.

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

TL;DR Use TypeScript.

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!

Both are good, but there are newer tools that can do the job better, specifically Vite and Speedy Web Compiler (SWC).

Similar Posts