rick@tillitsdone.com

+66824564755

Scroll to discover

Setting Up a ReactJS Project from Scratch

Learn how to create a ReactJS project from scratch without Create React App.

This guide covers essential setup steps, dependencies, configuration, and best practices for beginners.

Setting Up a ReactJS Project from Scratch: A Beginner’s Guide

Abstract 3D render of building blocks coming together to form a structured foundation featuring geometric shapes in shimmering teal navy and silver tones conveying the concept of project setup and organization high-quality ultra-realistic cinematic 8K UHD high resolution sharp and detail

Getting started with ReactJS can feel overwhelming at first, but I’m here to break it down into simple, manageable steps. Today, I’ll walk you through creating a React project from the ground up, without using Create React App. This hands-on approach will give you a deeper understanding of how everything fits together.

Prerequisites

Before we dive in, make sure you have:

Node.js installed on your computer
A code editor (I personally love VS Code)
Basic knowledge of JavaScript
Terminal/Command Prompt familiarity

A serene mountain landscape with a clear path leading upward surrounded by minimal geometric patterns floating in the air in dusty lavender and cool gray tones high-quality ultra-realistic cinematic 8K UHD high resolution sharp and detail

Step-by-Step Setup Process

1. Creating Your Project Directory

First, let’s create a new directory for our project and navigate into it. Open your terminal and run:

mkdir my-react-project
cd my-react-project

2. Initializing the Project

Initialize your project with npm:

npm init -y

This creates a package.json file with default values. Don’t worry - we can modify these later!

3. Installing Essential Dependencies

Now for the exciting part - installing React and its core dependencies:

npm install react react-dom

For development dependencies:

npm install --save-dev @babel/core @babel/preset-react @babel/preset-env
npm install --save-dev webpack webpack-cli webpack-dev-server
npm install --save-dev babel-loader html-webpack-plugin

Abstract digital art depicting interconnected nodes and flowing energy patterns rendered in vibrant emerald holographic and rose gold colors representing the concept of dependencies and connections high-quality ultra-realistic cinematic 8K UHD high resolution sharp and detail

4. Setting Up Configuration Files

Create a .babelrc file:

{
  "presets": ["@babel/preset-react", "@babel/preset-env"]
}

Create webpack.config.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    port: 3000,
    open: true,
  },
};

5. Creating Source Files

Create a src folder with these essential files:

src/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React From Scratch</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

src/index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

src/App.js:

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello from React!</h1>
    </div>
  );
}

export default App;

6. Adding NPM Scripts

Update your package.json with these scripts:

{
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  }
}

7. Running Your Project

Finally, start your development server:

npm start

Visit http://localhost:3000 to see your React app in action!

A majestic Iceland nature scene with ethereal aurora borealis swirling in the night sky featuring crystalline formations in the foreground painted in iridescent violet and cyan colors high-quality ultra-realistic cinematic 8K UHD high resolution sharp and detail

And there you have it! You’ve successfully set up a React project from scratch. This foundation gives you complete control over your build process and helps you understand what’s happening under the hood. Remember, while this setup works great for learning, for larger projects you might want to consider using Create React App or Next.js for a more feature-rich development environment.

Happy coding! 🚀

ReactJs Blogs

Popular JavaScript library for building user interfaces with a component-based architecture.

image_generation/ReactJS-Basics--Getting-Started-1732623478423-d143f9967d0eda9f019968c163460db6.png

Introduction to ReactJS: Understanding Basics Dive into the fundamentals of ReactJS, exploring its component-based architecture, virtual DOM, and key concepts. Learn how React revolutionizes web development with its efficient approach.

image_generation/React-State-and-Lifecycle-Methods-1732623883284-7d912cb20e87f7fa6f0e0c9d87e87e4d.png

State and Lifecycle Methods in ReactJS Guide Explore React's state management and lifecycle methods in this comprehensive guide. Learn how components manage data, respond to changes, and understand the component lifecycle phases.

image_generation/ReactJS-Lists-and-Keys-Tutorial-1732624183636-fa2d2554c01e1cec03d99b9493cb6935.png

ReactJS Lists and Keys: Dynamic Rendering Guide Learn the essentials of handling dynamic lists in ReactJS efficiently. Understand the importance of keys, best practices for implementation, and common pitfalls to avoid in this beginner-friendly guide.

image_generation/Understanding-JSX-in-ReactJS-1732623680954-e673250a52a07b42ab5be39fabe7e40b.png

Understanding JSX in ReactJS: Modern Web Dev Dive into JSX, React's powerful feature that combines HTML and JavaScript. Learn how JSX transforms your code, simplifies component creation, and enhances modern web development.

image_generation/React-Components-and-Props-Guide-1732623781512-269e599c9312dfb575237f94356efc83.png

Components and Props in ReactJS Guide Master the fundamentals of React components and props with this beginner-friendly guide. Learn how to create reusable UI elements and manage data flow in your React applications effectively.

image_generation/ReactJS-Event-Handling-Guide-1732623982738-a870b40c0c1e3c32f61fb3bdf61e6c67.png

Master Event Handling in ReactJS Guide Learn how to handle user interactions effectively in ReactJS. This guide covers click events, form events, mouse events, and keyboard events with practical examples and best practices.

View all 209 ReactJs blogs

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?

Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!

🖐️ Contact us

Explore our best articles, cover a wide variety of technologies

Our knowledge base

UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

150 Articles

Explore

Nodejs

JavaScript runtime for building scalable, high-performance server-side applications.

60 Articles

Explore

Nextjs

React framework enabling server-side rendering and static site generation for optimized performance.

40 Articles

Explore

Typescript

Superset of JavaScript adding static types for improved code quality and maintainability.

39 Articles

Explore

TailwindCSS

Utility-first CSS framework for rapid UI development.

130 Articles

Explore

Golang

Programming language known for its simplicity, concurrency model, and performance.

70 Articles

Explore

AstroJs

Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.

40 Articles

Explore

Jest

Versatile testing framework for JavaScript applications supporting various test types.

337 Articles

Explore

CSS

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

Let's keep in Touch

Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.

Contact Information

rick@tillitsdone.com+66824564755

Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.

Address

9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand

Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.

Social media

Facebook Instagram LinkedIn

Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.

We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.

DesignRush
web design companies

Goodfirms