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 frontnd development.

Starting with React and Building My Portfolio.

Before diving into building projects, I first installed React on my system. React requires Node.js and npm to be installed. I used the following steps to set up a React project:

1. Install Node.js

   Download and install Node.js from nodejs.org.

   Verify the installation by running:
   

   node -v
   npm -v
   

2. Create a new React app using Vite
   

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

1. Folder Structure After installation, the project structure includes:
   • src/ – It Contains components and also the main logic.
   • public/ – It Holds static files.
   • package.json – 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 faced challenges while managing imports, which I solved by ensuring that Home.jsx handled 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 NavBar from './NavBar';
import About from './About';
import Projects from './Projects';
import Contact from './Contact';

const Home = () => {
  return (
    <div>
      <NavBar />
      <About />
      <Projects />
      <Contact />
    div>
  );
};

export default Home;

The outcome

Continued with Understanding Props, State Management, and Context API

Differences between props and state

Example of props usage

const Greeting = ({ name }) => {
  return <h1>Morning, {name}!h1>;
};

Example of state usage

import { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}p>
      <button onClick={() => setCount(count + 1)}>Incrementbutton>
    div>
  );
};

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. The platform's continuous deployment feature ensures that any changes I push to my repository are automatically.

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.

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 chose Expo because of its simplicity and built-in features.

Steps to Installing Expo

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

You are now able to run it on your real device using the expo app or a mobile emulator this is through a scan.

Switched to Understanding Components in React Native

React Native follows a component-based architecture similar to React for web development. The main components I worked with include:

• View: This is the basic container for layout and styling.
• Text: Used for displaying text.
• Image: Displays images.
• Button: It Handles user interactions.
• TextInput: used for Capturing user input.

An Example of this.

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

const WelcomeScreen = () => {
  return (
    <View>
      <Text>Welcome to My App ProjectText>
      <Button title="Start" onPress={() => alert('Button Pressed')} />
    View>
  );
};

export default WelcomeScreen;

Moved to understanding 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.

Decided to build a simple sign in and sign Up with authentication.

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

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

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

  return (
    <View>
      <Text>Sign InText>
      <TextInput placeholder="Email" onChangeText={setEmail} value={email} />
      <TextInput placeholder="Password" onChangeText={setPassword} value={password} secureTextEntry />
      <Button title="Sign In" onPress={handleSignIn} />
    View>
  );
};

export default AuthScreen;

On to Working with APIs in React Native

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

The fetch method is a built-in JavaScript function that allows sending network requests.

Fetching Data Using Axios

Axios is a popular library for making HTTP requests. To use it, you have to install Axios first:

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.