{"id":377098,"date":"2023-03-10T08:41:52","date_gmt":"2023-03-10T16:41:52","guid":{"rendered":"https:\/\/css-tricks.com\/?p=377098"},"modified":"2023-03-10T08:41:56","modified_gmt":"2023-03-10T16:41:56","slug":"5-mistakes-starting-react","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/5-mistakes-starting-react\/","title":{"rendered":"5 Mistakes I Made When Starting My First React Project"},"content":{"rendered":"\n

You know what it’s like to pick up a new language or framework. Sometimes there\u2019s great documentation to help you find your way through it. But even the best documentation doesn\u2019t 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.<\/p>\n\n\n\n

That\u2019s how it was for me the first time I created a React project \u2014 and React is one of those frameworks with remarkable documentation, especially now with the beta docs. But I still struggled my way through. It\u2019s 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 \u201chow-to\u201d tutorials in out there, I thought I\u2019d share what I wish I knew when I first used it.<\/p>\n\n\n\n

So, that\u2019s what this article is \u2014 a list of the early mistakes I made. I hope they help make learning React a lot smoother for you.<\/p>\n\n\n\n\n\n\n

Using create-react-app to start a project<\/h3>\n\n\n

TL;DR Use Vite or Parcel.<\/p>\n\n\n\n

Create React App<\/a> (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.<\/p>\n\n\n\n

As a beginner, this seemed like a great way to start my work! No configuration! Just start coding!<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Both are good, but there are newer tools that can do the job better, specifically Vite<\/a> and Speedy Web Compiler<\/a> (SWC).<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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

npm create vite<\/code><\/pre>\n\n\n\n
You\u2019ll 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<\/code> or Typescript + SWC<\/code><\/p>\n\n\n\n
Then you\u2019ll have to change directory cd<\/code> into your project and run the following command;<\/p>\n\n\n\n
npm i && npm run dev<\/code><\/pre>\n\n\n\n
This should run a development server for your site with the URL localhost:5173<\/code><\/p>\n\n\n\n
And it\u2019s as simple as that.<\/p>\n\n\n\n    \t\t\n    
\n      
\n\n  
\n    \n      Adding Vite to Your Existing Web App    <\/a>\n  <\/h3>\n\n  \n      
\n      learning<\/a> react<\/a>    <\/div>\n  \n  
\n    \n          <\/a>\n  \n    \n      Adam Rackis    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      Making a Site Work Offline Using the VitePWA Plugin    <\/a>\n  <\/h3>\n\n  \n      
\n      learning<\/a> react<\/a>    <\/div>\n  \n  
\n    \n          <\/a>\n  \n    \n      Adam Rackis    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      Parcel CSS: A New CSS Parser, Transformer, and Minifier    <\/a>\n  <\/h3>\n\n  \n      
\n      learning<\/a> react<\/a>    <\/div>\n  \n  
\n    \n          <\/a>\n  \n    \n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      Using Parcel as a Bundler for React Applications    <\/a>\n  <\/h3>\n\n  \n      
\n      learning<\/a> react<\/a>    <\/div>\n  \n  
\n    \n          <\/a>\n  \n    \n      Kingsley Silas    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n\n\n
Using defaultProps<\/code> for default values<\/h3>\n\n\n
TL;DR Use default function parameters instead.<\/p>\n\n\n\n
Data can be passed to React components through something called props<\/code>. 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.<\/p>\n\n\n\n
\/\/ App.jsx\nexport default function App() {\n  return <Card title=\"Hello\" description=\"world\" \/>\n}\n\n\/\/ Card.jsx\nfunction Card(props) {\n  return (\n    <div>\n      <h1>{props.title}<\/h1>\n      <p>{props.description}<\/p>\n    <\/div>\n  );\n}\n\nexport default Card;<\/code><\/pre>\n\n\n\n
If a default value is ever required for a prop<\/code>, the defaultProp<\/code> property can be used:<\/p>\n\n\n\n
\/\/ Card.jsx\nfunction Card(props) {\n  \/\/ ...\n}\n\nCard.defaultProps = {\n  title: 'Default title',\n  description: 'Desc',\n};\n\nexport default Card;<\/code><\/pre>\n\n\n\n
With modern JavaScript, it is possible to destructure the props<\/code> object and assign a default value to it all in the function argument.<\/p>\n\n\n\n
\/\/ Card.jsx\nfunction Card({title = \"Default title\", description= \"Desc\"}) {\n  return (\n    <div>\n      <h1>{title}<\/h1>\n      <p>{description}<\/p>\n    <\/div>\n  )\n}\n\nexport default Card;<\/code><\/pre>\n\n\n\n
This is more favorable as the code that can be read by modern browsers without the need for extra transformation.<\/p>\n\n\n\n
Unfortunately, defaultProps<\/code> 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<\/code>.<\/p>\n\n\n\n    \t\t\n    
\n      
\n\n  
\n    \n      Demonstrating Reusable React Components in a Form    <\/a>\n  <\/h3>\n\n  \n      
\n      learning<\/a> react<\/a>    <\/div>\n  \n  
\n    \n          <\/a>\n  \n    \n      Kingsley Silas    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      I Learned How to be Productive in React in a Week and You Can, Too    <\/a>\n  <\/h3>\n\n  \n      
\n      learning<\/a> react<\/a>    <\/div>\n  \n  
\n    \n          <\/a>\n  \n    \n      Sarah Drasner    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      Props and PropTypes in React    <\/a>\n  <\/h3>\n\n  \n      
\n      learning<\/a> react<\/a>    <\/div>\n  \n  
\n    \n          <\/a>\n  \n    \n      Kingsley Silas    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n\n\n
Don’t use propTypes<\/code><\/h3>\n\n\n
TL;DR Use TypeScript.<\/p>\n\n\n\n
In React, the propTypes<\/code> 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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
\/\/ Card.jsx\nimport { PropTypes } from \"prop-types\";\n\nfunction Card(props) {\n  \/\/ ...\n}\n\nCard.propTypes = {\n  title: PropTypes.string.isRequired,\n  description: PropTypes.string,\n};\n\nexport default Card;<\/code><\/pre>\n\n\n\n
TypeScript<\/a> provides a level of type safety in data that\u2019s being passed to components. So, sure, propTypes<\/code> 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.<\/p>\n\n\n\n
\/\/ Card.tsx\ninterface CardProps {\n  title: string,\n  description?: string,\n}\n\nexport default function Card(props: CardProps) {\n  \/\/ ...\n}<\/code><\/pre>\n\n\n\n
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.<\/p>\n\n\n\n    \t\t\n    
\n      
\n\n  
\n    \n      Props and PropTypes in React    <\/a>\n  <\/h3>\n\n  \n      
\n      learning<\/a> react<\/a>    <\/div>\n  \n  
\n    \n          <\/a>\n  \n    \n      Kingsley Silas    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      Putting Things in Context With React    <\/a>\n  <\/h3>\n\n  \n      
\n      learning<\/a> react<\/a>    <\/div>\n  \n  
\n    \n          <\/a>\n  \n    \n      Neal Fennimore    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      An Overview of Render Props in React    <\/a>\n  <\/h3>\n\n  \n      
\n      learning<\/a> react<\/a>    <\/div>\n  \n  
\n    \n          <\/a>\n  \n    \n      Kingsley Silas    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n\n\n
Using class components<\/h3>\n\n\n
TL;DR: Write components as functions<\/p>\n\n\n\n
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<\/code> keyword and lifecycle methods.<\/p>\n\n\n\n
\/\/ Card.jsx\nclass Card extends React.Component {\n  render() {\n    return (\n      <div>\n        <h1>{this.props.title}<\/h1>\n        <p>{this.props.description}<\/p>\n      <\/div>\n    )\n  }\n}\n\nexport default Card;<\/code><\/pre>\n\n\n\n
I prefer writing components with classes over functions, but JavaScript classes are more difficult for beginners to understand and this<\/code> can get very confusing. Instead, I\u2019d recommend writing components as functions:<\/p>\n\n\n\n
\/\/ Card.jsx\nfunction Card(props) {\n  return (\n    <div>\n      <h1>{props.title}<\/h1>\n      <p>{props.description}<\/p>\n    <\/div>\n  )\n}\n\nexport default Card;<\/code><\/pre>\n\n\n\n
Function components are simply JavaScript functions that return JSX. They are much easier to read, and do not have additional features like the this<\/code> keyword and lifecycle methods<\/a> which make them more performant than class components.<\/p>\n\n\n\n
Function components also have the advantage of using hooks. React Hooks<\/a> allow you to use state and other React features without writing a class component, making your code more readable, maintainable and reusable.<\/p>\n\n\n\n    \t\t\n    
\n      
\n\n  
\n    \n      Getting to Know the useReducer React Hook    <\/a>\n  <\/h3>\n\n  \n      
\n      learning<\/a> react<\/a>    <\/div>\n  \n  
\n    \n          <\/a>\n  \n    \n      Kingsley Silas    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      Intro to React Hooks    <\/a>\n  <\/h3>\n\n  \n      
\n      learning<\/a> react<\/a>    <\/div>\n  \n  
\n    \n          <\/a>\n  \n    \n      Kingsley Silas    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      React Hooks: The Deep Cuts    <\/a>\n  <\/h3>\n\n  \n      
\n      learning<\/a> react<\/a>    <\/div>\n  \n  
\n    \n      \"\"    <\/a>\n  \n    \n      Blessing Ene Anyebe    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n\n\n
Importing React unnecessarily<\/h3>\n\n\n
TL;DR: There\u2019s no need to do it, unless you need hooks.<\/p>\n\n\n\n
Since React 17 was released in 2020, it\u2019s now unnecessary to import React at the top of your file whenever you create a component.<\/p>\n\n\n\n
import React from 'react'; \/\/ Not needed!\nexport default function Card() {}<\/code><\/pre>\n\n\n\n
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<\/code><\/a> that would only work when importing React. Since then, a new transformer has been release which can transform JSX without the createElement<\/code> method.<\/p>\n\n\n\n
You will still need to import React to use hooks, fragments<\/a>, and any other functions or components you might need from the library:<\/p>\n\n\n\n
import { useState } from 'react';\n\nexport default function Card() {\n  const [count, setCount] = useState(0);\n  \/\/ ...\n}<\/code><\/pre>\n\n\n
Those were my early mistakes!<\/h3>\n\n\n
Maybe \u201cmistake\u201d is too harsh a word since some of the better practices came about later. Still, I see plenty of instances where the \u201cold\u201d way of doing something is still being actively used in projects and other tutorials.<\/p>\n\n\n\n
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!<\/p>\n\n\n\n
If you\u2019ve 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.<\/p>\n","protected":false},"excerpt":{"rendered":"
You know what it’s like to pick up a new language or framework. Sometimes there\u2019s great documentation to help you find your way through it. But even the best documentation doesn\u2019t 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\u2019s […]<\/p>\n","protected":false},"author":288730,"featured_media":377100,"comment_status":"open","ping_status":"closed","sticky":true,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[870,557],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/react-facepalm.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":269385,"url":"https:\/\/css-tricks.com\/how-to-create-a-component-library-from-svg-illustrations\/","url_meta":{"origin":377098,"position":0},"title":"How to Create a Component Library From SVG Illustrations","date":"April 12, 2018","format":false,"excerpt":"I\u2019ve recently published my first ever open source npm package! It makes SVG illustrations from unDraw into customizable React components. Here\u2019s a GIF that shows what I mean: What\u2019s unDraw? While unDraw is still fairly new, its open source nature means that it\u2019s being used by a range of products\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/react-svg-component-featured.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":287709,"url":"https:\/\/css-tricks.com\/front-end-documentation-style-guides-and-the-rise-of-mdx\/","url_meta":{"origin":377098,"position":1},"title":"Front-End Documentation, Style Guides and the Rise of MDX","date":"May 23, 2019","format":false,"excerpt":"You can have the best open source project in the world but, if it doesn\u2019t have good documentation, chances are it\u2019ll never take off. In the office, good documentation could save you having to repeatedly answer the same questions. Documentation ensures that people can figure out how things work if\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/mdx.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":321306,"url":"https:\/\/css-tricks.com\/using-markdown-and-localization-in-the-wordpress-block-editor\/","url_meta":{"origin":377098,"position":2},"title":"Using Markdown and Localization in the WordPress Block Editor","date":"September 23, 2020","format":false,"excerpt":"If we need to show documentation to the user directly in the WordPress editor, what is the best way to do it? Since the block editor is based on React, we may be tempted to use React components and HTML code for the documentation. That is the approach I followed\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/markdown-locale-wordpress.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":305290,"url":"https:\/\/css-tricks.com\/an-introduction-to-mdxjs\/","url_meta":{"origin":377098,"position":3},"title":"An Introduction to MDXJS","date":"March 25, 2020","format":false,"excerpt":"Markdown has traditionally been a favorite format for programmers to write documentation. It\u2019s simple enough for almost everyone to learn and adapt to while making it easy to format and style content. It was so popular that commands from Markdown have been used in chat applications like Slack and Whatsapp\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/mdx.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":281513,"url":"https:\/\/css-tricks.com\/react-16-6-0-goodies\/","url_meta":{"origin":377098,"position":4},"title":"React 16.6.0 Goodies","date":"January 23, 2019","format":false,"excerpt":"React 16.6.0 was released October 2018 and with it came goodies that spice up the way we can develop with React. We\u2019re going to cover what I consider the best of those new goodies with examples of how we can put them to use in our work. React.memo() avoids unnecessary\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/react.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":307780,"url":"https:\/\/css-tricks.com\/working-with-mdx-custom-elements-and-shortcodes\/","url_meta":{"origin":377098,"position":5},"title":"Working With MDX Custom Elements and Shortcodes","date":"May 7, 2020","format":false,"excerpt":"MDX is a killer feature for things like blogs, slide decks and component documentation. It allows you to write Markdown without worrying about HTML elements, their formatting and placement while sprinkling in the magic of custom React components when necessary. Let\u2019s harness that magic and look at how we can\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/mdx.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/react-facepalm.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/377098"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/288730"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=377098"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/377098\/revisions"}],"predecessor-version":[{"id":377106,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/377098\/revisions\/377106"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/377100"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=377098"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=377098"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=377098"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}