top of page
Search

How to Create React App

  • Writer: CODING Z2M
    CODING Z2M
  • Nov 3, 2024
  • 3 min read

Updated: Mar 27

How to Create React App

How to Create React App: Build & Deploy a Car Rental Landing Page | React JS, Tailwind CSS


How to Create React App: Learn how to build and deploy a stunning, fully responsive Car Rental Landing Page using React JS and Tailwind CSS. This project offers hands-on experience with structuring React components and implementing modern responsive design techniques. You’ll create a visually captivating and user-friendly landing page that effectively combines the power of React and Tailwind CSS. Key features include a dynamic mobile-friendly navigation menu with hamburger and close icons, utilizing React’s useState for state management. The project includes seamless navigation across pages like Home and Featured Cars, achieved using React Router DOM for dynamic routing. Each page is organized with distinct sections, including a visually appealing Navigation Bar and a professional Footer. The Featured Cars page dynamically displays car information by extracting and rendering data from an array of objects, ensuring scalability and maintainability. By the end, you'll have a professional-grade landing page, ready to enhance your portfolio and demonstrate your web development skills. Live Application

How to Create React App

What You Will Learn?

Fully Responsive Design​

  • Ensures seamless usability across all devices, including desktops, tablets, and smartphones.

React Component-Based Structure

  • Clean and reusable components for efficient page layout and development.

Understanding Functional Components

  • Using functional components in React, which return JSX, serves as JavaScript functions that define how a user interface should appear.

Understanding JSX in React

  • Using JSX to describe the structure of the UI, leveraging JavaScript to dynamically generate UI elements.

Interpolation in React JSX & Conditional Rendering

  • Using interpolation to embed dynamic values directly into JSX code, to enable components to react to changes in data or state. Conditional logic is embedded via ternary operators.

Tailwind CSS Styling

  • Modern utility-first CSS framework for consistent and visually appealing designs.

Interactive Mobile Menu

  • Hamburger and close icons for toggling the navigation menu on mobile devices.

State Management with useState

  • Efficient use of React's state management to handle menu toggle functionality.

Visually Appealing Layout

  • Professionally designed landing page that highlights the power of combining React and Tailwind CSS.

Dynamic Page Navigation

  • Utilizes React Router DOM to enable smooth transitions between pages, enhancing user experience.

Structured Layout Design

  • Well-defined sections like Navigation Bar and Footer provide a polished and professional appearance.

Dynamic Data Rendering

  • The Featured Cars page efficiently extracts and displays car details from an array of objects, offering dynamic content updates and scalability.

Component-Based Architecture

  • Ensures modularity and reusability by building the UI with React components.

Deployment-Ready Project

  • Complete project setup ready to be deployed for showcasing a professional landing page.

Hands-On Learning

  • Practical experience in structuring and styling modern web pages with React and Tailwind CSS.


Technologies Used:

  • Frontend: Vite + React 18, React Router, TailwindCSS.

  • Hosting: Vercel Hosting.

Resources:

Install Plugins: Tailwind CSS IntelliSense, es7+ (ES7+ React/Redux/React-Native snippets)

Browser: Use the latest version of Google Chrome/Microsoft Edge.

Version Control: GitHub

Setting Up the Vite + React Project

Create a React Project: Create a project folder "React" and open it in VS Code

Let’s start by setting up Vite with React. Check the following URL's: Scaffolding Your First Vite Project Installing Tailwind CSS as a Vite plugin to integrate it with React Installing the necessary dependencies: > npm install react-icons react-router-dom

Delete "App.CSS" & Remove everything from index.css files.

> Run your build process with "npm run dev" -> http://localhost:5173/


NOTE: Encapsulate the 'App' component with 'BrowserRouter' in the 'main.jsx'

createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
)

Creating your own components...


How to Create React App

Deploying code (GitHub Commands):

git init

git add .

git commit -m "first commit"

git branch -M main

git push -u origin main

Vercel Deployment:

Note: Vercel serves static files but doesn’t automatically handle client-side routing in Vite + React Router apps. Solution: You need to tell Vercel to redirect all requests to index.html, allowing React Router to handle routing.

  1. Create a vercel.json file in your project root (if it doesn’t exist already).

  2. Add the following configuration: {

"rewrites": [

{ "source": "/(.*)", "destination": "/index.html" }

]

}

Comments

bottom of page