The Frontend engineering

Introduction

Over the past three weeks, I have been thinking why not try something new since I have been doing my projects using the basic Html,css and JavaScript. Working with Components is what I had from a Friend and I said why not?.I embarked on an intense learning journey, which focused on improving my skills and refining my projects. It has been a period of growth and perseverance and this is how React became a family both professionally and personally, as I explored various aspects of frontend development, and problem-solving.

Starting with React and Building My Portfolio.

I first installed React on my system. React requires Node.js and npm to be installed. so I used the following steps to set up my React project.

1. Install Node.js

   I Downloaded and installed Node.js from nodejs.org.

   Verified the installation by running:
   
bash
node -v
npm -v


2. Created a new React app using Vite and the steps are as follows on your terminal.


npm create vite@latest
cd my-portfolio
npm install
npm run dev


1. Folder Structure The React project structure appears this way after installation,
   • src/ – It Contains components and also the main logic.
   • public/ – This is where static files are placed.
   • package.json – It Manages dependencies.

With React successfully installed, I was ready to start building my portfolio.

Moving from custom CSS to Tailwind CSS for Styling.
To do better I knew I was to input something new to my project, this was something modern and I knew it would improve and make the experience enjoyable. This is how I styled my button with It


<button className="bg-blue-500 text-gray px-4 py-2 rounded-lg hover:bg-violet-500">
Submit
</button>


Portfolio build

I built a portfolio website to showcase my work. Through this process, I learned about component-based architecture and how to use React Router for navigation.I faced challenges while managing imports, and I decided that will Home.jsx handle all component imports while App.jsx only imported Home.jsx and integrated React Router properly.

my Home.jsx appeared this way.

``
import React from "react";
import { motion } from "framer-motion";
import NavBar from "./navBar";
import { FaGithub, FaLinkedin, FaTwitter } from "react-icons/fa";

export default function Home() {
const navLinks = [
{ title: "Home", path: "#home" },
{ title: "About", path: "#about" },
{ title: "Projects", path: "#projects" },
{ title: "Skills", path: "#skills" },
{ title: "Contact", path: "#contact" },
{ title: "Sign Up", path: "/signup" },
];
``

_The outcome _

Continued with Understanding Props, State Management, and Context API

As I progressed, I focused on React’s state management techniques. I explored props for passing data between components, useState for managing local state, and Context API for global state management.

State	Props
used to manage data within a component that can change over time	used to pass data from one component to another
mutable	immutable
controlled by the parent component	controlled by the component itself

---

Example of props usage

const Greeting = ({ name }) => {
return

Morning, {name}!

;
};

Example of state usage

``
import { useState } from 'react';

const Counter = () => {
const [count, setCount] = useState(0);
return (

Count: {count}

setCount(count + 1)}>Increment

);
};
``

Deplyoment of the portfolio on Vercel

After completing my portfolio, I deployed it on Vercel. The process was smooth, and I learned how to link my GitHub repository for automatic deployment.

Moving to React Native.

After gaining confidence in React, I transitioned to React Native.

What is React Native?

React Native is a framework for building mobile applications using JavaScript and React. Developers are able to create cross-platform apps for both iOS and Android using a single codebase.

Started with React Native CLI vs. Expo

• React Native CLI provides full control over the project but requires manual setup and configuration.
• Expo is a framework built on React Native that simplifies development with pre-configured settings and managed workflows.

I decided to use Expo because of its simplicity and built-in features.

Steps to Installing Expo

``
cd desktop
npx create-expo-app@latest
npx expo start

``
After that you are able to run it on your real device using the expo app or a mobile emulator this is through a scan.

Understanding Components in React Native

React Native follows a component-based architecture similar to React for web development. These are the main components I worked with.

• View: The basic container for layout and styling.
• Text: Used for displaying text.
• Image: Displays images.
• Button: Handles user interactions.
• TextInput: It Captures user input.

The structure.

``
import React from 'react';
import { View, Text, Button } from 'react-native';

export default function WelcomeScreen;

const WelcomeScreen = () => {
return (

Welcome to My App Project
alert('Button Pressed')} />

);

``

Switched to typescript

TypeScript is a strongly typed, object-oriented, compiled programming language. TypeScript adds static typing and other powerful features that help developers build more scalable and maintainable applications.

Example using classes and Objects.
``
class Person {
name: string;

constructor(name: string) {
this.name = name;
}

greet() {
return Hello, my name is ${this.name};
}
}

const kigen = new Person("Kigen");
console.log(kigen.greet()); // Hello, my name is Kigen
``

Created a sign In and Sign up screen.

Built a simple sign in and sign Up with authentication.

``
import React, { useState } from 'react';
import { View, Text, TextInput, Button } from 'react-native';

export default function AuthScreen;

const AuthScreen = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');

const handleSignIn = () => {
alert(Signing in with ${email});
};

return (

Sign In




);
};
``

On to Working with APIs in React Native

The Application Programming Interfaces allow mobile applications to communicate with backend servers to fetch or send data. React Native provides various ways to interact with APIs, including the built-in fetch method and third-party libraries like Axios.

Fetching Data Using fetch method.

This is a built-in JavaScript function that allows sending of network requests.

Fetching Data Using Axios

Axios is a popular library for making HTTP requests. To use it, you have to install Axios first so run this on your terminal.


npm install axios


Conclusion
with these Frontend becomes interesting I have improved my technical skill much better, do not be left behind dive in today and experience the best.