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

Ubuntu & Ollama & Obsidian: Your Local AI Powerhouse

My pc runs on Ubuntu 24.04 and one of my favorite things to do in my pc is take notes and annotations using Obsidian . Even though I have a modest pc with a low end graphics card, instead of using a paid cloud AI service, I run ollama with local LLMs - it might be slow but is nevertheless useful. But then I ran into a problem when trying to use obsidian plugins that run AI on ollama local LLMs. After running   ollama serve in the terminal, the following error would show up: Error: listen tcp 127.0.0.1:11434: bind: address already in use I tried some tweaking here and there, like changing the port address in the command line, but it didn't work as I needed it to. Turns out the solution is simpler than I thought. Here is how it works. When you install ollama on ubuntu 24.04 it will install itself as a systemd service. Ollama runs in the background Ubuntu 24.04 uses systemd, so Ollama automatically starts as a service when the pc starts. Think of it like a silent workhorse, always ...
Post a Comment
Read more