Node.js and React Project Setup Guide

Here's a command block to initialize a Node.js and React project in the /home/vncuser/project directory with the name project:

# Navigate to the project directory
cd /home/vncuser/project

# Initialize a new Node.js project
npm init -y

# Install React and related packages
npm install react react-dom

# Install development dependencies for React (Webpack and Babel)
npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin

# Create necessary directories and files
mkdir src public

# Create main project files
touch src/index.js src/App.js public/index.html webpack.config.js .babelrc

# Add basic React setup to src/App.js
echo "import React from 'react';

function App() {
  return <h1>Hello, project!</h1>;
}

export default App;" > src/App.js

# Set up entry point in src/index.js
echo "import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const root = createRoot(document.getElementById('root'));
root.render(<App />);" > src/index.js

# Add a simple HTML file in public/index.html
echo "<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Toshiko Project</title>
</head>
<body>
  <div id='root'></div>
</body>
</html>" > public/index.html

# Configure Webpack in webpack.config.js
echo "const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

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

# Configure Babel in .babelrc
echo '{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}' > .babelrc

# Build the project and start the development server
npx webpack --mode development
npx webpack serve --mode development

This will initialize a new Node.js project with React, configure Webpack, and start a development server accessible at http://localhost:3000.

Initialize a Node.js and React project