Day 4 of Brylnt: Learning the Basics of React with TypeScript

Hey everyone! Welcome to Day 4 of Brylnt. Today, I’ve been diving into the basics of React, and since I’m using TypeScript for Brylnt, I thought I’d share what I’ve been learning about combining React with TypeScript to make my development smoother and more efficient.

What is React?

React is a JavaScript library for building user interfaces, and it’s incredibly powerful for creating fast, dynamic, and interactive web applications. In the context of Brylnt, using React helps me break down the UI into components—small, reusable pieces that handle specific parts of the interface.

By using TypeScript with React, I get the added benefit of static typing, which catches errors early and makes my code more predictable and maintainable.

Key Concepts I’ve Learned So Far (With TypeScript)

1. Components (with TypeScript):
   Components are the foundation of React, and in TypeScript, you define the types of the props that components receive, which makes them safer and more predictable.
   

   type HeaderProps = {
       title: string;
   };
   
   const Header: React.FC<HeaderProps> = ({ title }) => {
       return <h1>{title}</h1>;
   };
   
   

   Here, I’m defining a Header component that accepts a title prop, ensuring that it will always be a string.

2. JSX and TypeScript:
   JSX lets me write HTML inside JavaScript (or TypeScript in this case), making UI creation feel natural. TypeScript adds type-checking to my JSX, making sure I’m passing the right data.
   

   const Greeting: React.FC<{ name: string }> = ({ name }) => {
       return <h2>Hello, {name}! Welcome to Brylnt!</h2>;
   };
   
   

   TypeScript ensures that the name prop must be a string, preventing potential errors down the line.

3. Props with TypeScript:
   Props are how you pass data between components, and TypeScript helps by enforcing strict types on them, ensuring components only receive the expected data.
   

   interface WelcomeMessageProps {
       name: string;
   }
   
   const WelcomeMessage: React.FC<WelcomeMessageProps> = ({ name }) => {
       return <h2>Welcome, {name}!</h2>;
   };
   
   

   TypeScript makes the code more self-explanatory and reduces bugs by ensuring the right types are passed to components.

4. State with TypeScript:
   Managing state with TypeScript is similar to plain React, but now I get strong type safety on my state values.
   

   const Counter: React.FC = () => {
       const [count, setCount] = React.useState<number>(0);
   
       return (
           <div>
               <p>Count: {count}</p>
               <button onClick={() => setCount(count + 1)}>Increment</button>
           </div>
       );
   };
   
   

   TypeScript makes sure the count is always a number, helping me avoid any unexpected bugs.

5. Hooks with TypeScript:
   Hooks like useState and useEffect work seamlessly with TypeScript. By explicitly defining types, I can make sure that I’m handling state and effects in a predictable way.
   

   const useFetchData = (url: string) => {
       const [data, setData] = React.useState<any>(null);
       React.useEffect(() => {
           fetch(url)
               .then((response) => response.json())
               .then((json) => setData(json));
       }, [url]);
   
       return data;
   };
   
   

   With TypeScript, I can add type definitions to data later, ensuring that I’m working with the right data structure.

Why TypeScript Makes React Even Better

TypeScript adds an extra layer of confidence to my React development. By catching errors early, ensuring type safety, and making the codebase more readable, it’s a huge benefit when building scalable applications like Brylnt.

I’m excited about using React with TypeScript because it combines flexibility with safety, allowing me to build interactive and reliable web apps. Stay tuned for more updates as I continue building Brylnt!