Top 5 Lessons Learned Building React Applications

Lesson 1: Use Functional Components

Why Functional Components?

import React, { useState } from "react";const YesNoButtonComponent = () => {
const [button, setButton] = useState("");
const onButtonPress = (buttonName) => {
setButton(buttonName);
console.log(buttonName);
};
return (
<div>
<button onClick={() => onButtonPress("Yes")}>Yes</button>
<button onClick={() => onButtonPress("No")}>No</button>
</div>
);
};

Lesson 2: Break down components — when needed!

When do I break down components?

Lesson 3: TypeScript is a life saver!

type HeadingProps = {
title: string;
bold: boolean;
}
export const Heading = ({ title, bold }: HeadingProps) => {
return (
<div>
{bold ? "Bold Title: " : "Regular Title: "}
{title}
</div>
);
};

Lesson 4: Start with local state!

Lesson 5: Test, Test and Test!

Unit Tests

Component Tests

Automated End to End Tests

Conclusion

--

--

Software Consultant, Author, Speaker, React Native|React|GraphQL|Cypress Dev & Indian Classical Musician

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Adhithi Ravichandran

Software Consultant, Author, Speaker, React Native|React|GraphQL|Cypress Dev & Indian Classical Musician