Live Repo

First React Project

React logo image
React logo image

Welcome to my first React "Business card" project!

By creating this project, I practiced the basic React syntax and learned about the benefits of using the library.

How I built it?

The business card consists of 4 components which are gathered in the App component under a container div and then rendered in the index.js file.

What I learned

The advantages of React JS library are:

- It is composable ( Several React components can be combined to produce another React component. This is one of the best features of React. It’s a simple concept with great advantages.)

- It is declarative (declarative programming is when your code shows what you want to happen. Imperative programming your code shows exactly how to do what you want to happen.

- JSX syntax extension (it looks like HTML, but it's an object; it produces React “elements”.)

- Custom components (they are independent pieces of functionality that you can reuse in your application and are the building blocks of all React applications. Often, they can be simple JavaScript functions and classes, but you use them as if they were customized HTML elements. Buttons, menus, and any other front-end page content can all be created as components.)

- how to style react components

- how to create a static webpage

- how to set up React locally using Vite and Create React App

- parent/child components

- how to deploy the project, built with React

Reminders:

You can only render 1 parent element in React, so it's vital to put all of your code in an empty div or just in an empty wrapper <></>

Don't forget to import React from "react" as React defines JSX

Although the project is small, it was fun to build and finally get to know the famous React.