Creating your React project from scratch without create-react-app: The Complete Step by Step Guide.

by

To create a React project from scratch without using create-react-app, here are the requirements and steps we need to follow:

Requirements:

  1. Node.js and npm installed:
  • Make sure you have Node.js and npm installed on your machine.
  • Check Node.js version:
    node -v
  • Check npm version:
    npm -v
  1. Package Management:
  • Use npm (or yarn) to manage dependencies. This will allow us to install and manage the required libraries for the project.

Webpack for Bundling:

Install and configure Webpack to bundle JavaScript, CSS, images, and other assets. Webpack is used to compile JavaScript modules and other assets into a single bundle that can be served in a browser.

Babel for Transpiling:

Install and configure Babel to transpile modern JavaScript (ES6+ and JSX) into browser-compatible JavaScript.

ESLint for Linting:

Install and configure ESLint to enforce coding standards and catch syntax issues early.

Dev Server (Webpack Dev Server or similar):

Set up a local development server with live reloading to preview changes in real time during development.

React and ReactDOM Libraries:

Install the core React library and react-dom to render the React components into the DOM.

CSS and CSS Modules Setup:

Set up Webpack to handle CSS and, optionally, CSS modules for scoped styles.

Source Map Configuration:

Enable source maps in Webpack for easier debugging in the browser.

Detailed Steps:

1. Initialize Project

mkdir react-app-from-scratch
cd react-app-from-scratch
npm init -y

This will create a package.json file.

2. Install Required Dependencies

npm install react react-dom

For development, install Webpack, Babel, ESLint, and their dependencies:

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

Optionally, install ESLint and related plugins:

npm install eslint eslint-plugin-react eslint-plugin-react-hooks --save-dev

For CSS Styling install Some dependencies

npm install style-loader css-loader --save

3. Configure Webpack

Create a webpack.config.js file:

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

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

4. Configure Babel

Create a .babelrc file:

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

5. Create the Source Files

  1. Create a src folder.
  2. Inside the src folder, create an index.js file:
import React from 'react';
import ReactDOM from 'react-dom';
import './styles.css';

const App = () => <h1>Hello, React from Scratch!</h1>;

ReactDOM.render(<App />, document.getElementById('root'));
  1. Create an index.html file in the public folder:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React App from Scratch</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
  1. Optionally, create a styles.css file in the src folder:
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  text-align: center;
}

6. Add Scripts to package.json

Modify the package.json file to add the following scripts:

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

7. Run the Development Server

Start the development server:

npm start

This will open the React app in the browser at http://localhost:3000.

8. Build for Production

To build the project for production, run:

npm run build

This will generate a dist folder with the compiled assets.

These are the complete steps and requirements for creating a React project from scratch without create-react-app. You now have full control over every aspect of the build process, from bundling to transpiling and linting!