React Tutorial #1 - Setup

19 Dec, 2022

So I'm going to begin this blog with what I'm most familiar with, React and I'm going to assume whoever is reading this tutorial has absolutely no prior experience.

Where do we begin?

I am not going to bore you with how to setup React as most of the Getting Started page already do the job quite well. We are going to just jump into the nitty gritty. Here you can find some bundlers to help you with, Vite or Create React App.

After you scaffold your project, you'll most likely have all of your source code in the src folder. Within that folder you will find main.tsx or index.tsx and usually App.tsx. Most of the time, the former will be the entrypoint into the application and the latter is the main React component itself.

We will be focusing on only the App.tsx today. You can open the source for App.tsx in a text editor and most likely you will find something akin to this.

export function App() {
  return <div>
    {/* excluded for brevity */}
  <div>;
}

Here, you will be greeted by a functional component. What a functional component does is similar to a regular function, it can take in params, and return some value. In this case, this is a functional component that does not take any arguments, and returns JSX.

So, can we pass arguments into functional components?

Yes, you can. However, usually we pass arguments into components by using a single object, props. We can declare a functional component that takes in a title as follows.

// Props can be declared as class or type or in this case interface
interface Props {
  title: string;
}

export function ListItem(props: Props) {
  return <li>{props.title}</li>
}

We will declare the ListItem component as above by giving it a single argument and the argument will be of type object. We can then type it using the Props type we declared above. Now that we've declared a functional component, we can use it in other components. You can do it like so.

export function App() {
  return <ul>
    <ListItem title={'list item 0'} />
  </ul>;
}

We can pass in our title property using syntax like this title={variable}. With this you will end up with markup as follows.

<ul>
  <li>list item 0</li>
</ul>

Conclusion

In this post, we have learned that,

a functional component is just like a regular function
a functional component can take in params just like a regular function
differet from a regular function, functional component can take in props, we can render it in our JSX.

I hope this blog post is helpful for beginners, in the next post we will dive deeper into React States. See you soon!