Skip to main content

Create a react project from scratch - the template for a new start

How to Create a React Project on Ubuntu 24.04

How to Create a React Project on Ubuntu 24.04

Step-by-Step Guide

1. Create a Folder for the Project

Start by creating a dedicated folder where your project will reside. Open a terminal and run:

mkdir react-project && cd react-project

2. Check if Node.js and npm Are Installed

Node.js and npm are essential for creating React projects. Verify their presence with:

node -v
npm -v

If they aren’t installed, use nvm (Node Version Manager) for easy installation:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.4/install.sh | bash
source ~/.bashrc
nvm install --lts

After installing, verify the installation again with the commands above.

Learn more about nvm here.

3. Use Vite to Create the Project

Vite is a fast build tool optimized for modern web apps. To initialize a project, run:

npm create vite@latest

Follow the prompts to name your project and select "React" (or "React + TypeScript" if you're using TypeScript).

4. Open the Project in VS Code

If you have VS Code installed, launch it in your project folder by typing:

code .

If code isn’t recognized, ensure Visual Studio Code is in your system PATH.

Instructions for setting up VS Code on Linux.

5. Run the Development Server

To see your React app in action, start the development server:

npm run dev

Open the provided URL (e.g., http://localhost:5173) in your browser.

6. Additional Considerations

  • Ensure your project dependencies are installed with npm install if needed.
  • Use npm run build to create a production build when you're ready to deploy.
  • Learn the basics of React if you're new. The React documentation is a great resource.

Conclusion

With these steps, you can quickly set up a React project on Ubuntu 24.04. If you encounter issues, the community forums and official documentation are excellent places to seek help.

Labels:

Comments

Post a Comment

Popular posts from this blog

Making an AppImage discoverable in ubuntu and configuring URL handling in Firefox

OS: Ubuntu 24.04 Using software in AppImage format can lead to Ubuntu not recognizing it properly when handling links. Here’s how to configure Ubuntu to manage an AppImage application seamlessly. We'll use Obsidian as an example. Step 1: Creating a .desktop File To make the Obsidian AppImage discoverable by the system, create a .desktop file—a shortcut that defines how the application should be launched. Here’s the content for the file: [Desktop Entry] Exec=/path_to_the_appimage/Obsidian-1.6.5.AppImage --no-sandbox %U Name=Obsidian Terminal=false Type=Application MimeType=x-scheme-handler/obsidian; Explanation of Key Entries: Exec : The command to run the AppImage, with --no-sandbox to avoid sandboxing errors. Name : The display name of the app. Terminal : Set to false to avoid opening a terminal window. Type : Identifies this as an application. MimeType : Registers obsidian:// links to be handled by this application. After creating t...
Post a Comment
Read more

A workflow to support personal learning from raw sources

 Unlocking Efficient Learning with AI-Powered Flashcards in Obsidian As learners, we're constantly seeking ways to optimize our learning workflow and process new information more effectively. In this post, I'll explore a powerful combination of tools that can help you achieve just that: Obsidian and the SystemSculpt and the Spaced Repetition plugins. Together, these tools can help you generate flashcards that support a structured learning workflow, making it easier to create knowledge from your source materials.   The Power of Obsidian Obsidian allows you to organize your thoughts and ideas in a flexible and customizable way. Its unique features, such as tags, folders, and links, enable you to create a knowledge graph that connects your notes and ideas. In this workflow, I'll be using Obsidian as the central hub for my learning process.   SystemSculpt and Spaced Repetition: The AI-Powered Flashcard Generators SystemSculpt is an AI-powered plugin that integrates seamless...
Post a Comment
Read more