The post React के प्रमुख 9 built-in Hooks appeared first on Cody Paste.

npm start

but if its shows that port is already running then you have first close this port and then try to start it.

How to Close/Stop PORT

1. Terminate the existing process using port 5000:

If you have a server already running on port 5000 (and you want to restart it), you need to stop that process first.

For Windows:

1. Open Command Prompt or PowerShell as Administrator.
2. Find the process using port 5000:
   

   netstat -ano | findstr :5000

   • This will show you the Process ID (PID) of the application using port 5000. E.X
     TCP 0.0.0.0:5000 0.0.0.0:0 LISTENING 4980
     TCP [::]:5000 [::]:0 LISTENING 4980
   • Kill the process using the PID found above. For example, if the PID is 4980, use:
     

     taskkill /PID 1234 /F

     
     This command forcefully stops the process occupying port 5000.

The post How to restart server in React / Node appeared first on Cody Paste.

• Move the images to public/images or src/assets/images (recommended).
• Update the paths in your code
  

  <img src="/images/logos/APC-(RK).svg" height="50px" alt="Logo" />

  
   

The post Image path in React appeared first on Cody Paste.

Your code references FontAwesome icons. To use them:

1. Install FontAwesome:

npm install @fortawesome/fontawesome-free

2. Import the CSS in your index.js or App.js file

import '@fortawesome/fontawesome-free/css/all.min.css';

The post Font Awesome icon in React appeared first on Cody Paste.

https://transform.tools/html-to-jsx

https://codebeautify.org/html-to-jsx-converter

1. Convert HTML to JSX

React uses JSX, so you need to adjust the HTML code to adhere to JSX syntax rules.

2. JSX Conversion

• Replace class with className.
• Self-close tags like <img> and <input />.
• Ensure attributes (like alt, src) are enclosed in quotes.
• Wrap the outermost element in a <React.Fragment> or <div> (if not already enclosed in a single root element).

3. Header.js Code

Here’s the converted JSX (Example):

import React from 'react';
import { Link } from 'react-router-dom'; // Assuming you're using React Router for navigation.

const Header = () => {
  return (
    <header className="header-section">
      <div className="container container-cus">
        <div className="header-container">
          {/* Logo */}
          <Link to="/" className="logo-top">
            <img src="images/logos/APC-(RK).svg" height="50px" alt="Logo" />
          </Link>

          <div className="nav-search-header">
            {/* Menu Icon for Mobile */}
            <i className="fas fa-bars menu-icon"></i>

            {/* Navbar */}
            <nav className="custom-navbar">
              <ul>
                <li className="drp">
                  <a href="#">
                    Home <i className="fas fa-angle-down"></i>
                  </a>
                  <ul className="drp-menu">
                    <li>
                      <Link to="/">Home v1</Link>
                    </li>
                    <li>
                      <Link to="/home-v2">Home v2</Link>
                    </li>
                  </ul>
                </li>
                <li className="drp">
                  <a href="#">
                    Solutions <i className="fas fa-angle-down"></i>
                  </a>
                  <ul className="drp-menu">
                    <li>
                      <Link to="/product-list">AI & Deep Learning Workstations</Link>
                    </li>
                    <li>
                      <Link to="/product-list">AI & Deep Learning Servers</Link>
                    </li>
                    <li>
                      <Link to="/product-list">Data Science</Link>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Components</a>
                </li>
                <li>
                  <a href="#">Build it Yourself</a>
                </li>
                <li>
                  <Link to="/blog">Blog</Link>
                </li>
                <li>
                  <Link to="/contact-us">Contact Us</Link>
                </li>
              </ul>
            </nav>

            {/* Search */}
            <div className="header-search">
              <i className="fas fa-search header-search-icon"></i>
            </div>

            {/* Cart */}
            <a href="#" className="btn-comm gradient btn-cart">
              <img src="images/cart.png" alt="Cart" />
            </a>
          </div>
        </div>
      </div>

      {/* Search Input */}
      <div className="header-search-inputGrp">
        <div className="container container-cus header-search-container">
          <form>
            <div className="header-search-inputGrpInn">
              <input type="text" className="form-control" placeholder="Search..." />
              <button className="btn-comm">
                <i className="fas fa-search"></i>
              </button>
            </div>
          </form>
        </div>
      </div>
    </header>
  );
};

export default Header;

The post HTML Template to React JSX appeared first on Cody Paste.

To set up a React frontend and Node.js backend with a manageable structure and Bootstrap 5 theme, follow these steps:

Frontend Setup (React)

1. Create a React App
   
   

   npx create-react-app frontend
   cd frontend

   
    
2. Install Bootstrap 5 Inside the frontend folder, run:
   

   npm install bootstrap

3. Integrate Bootstrap
   Open src/index.js and import Bootstrap CSS:

   import 'bootstrap/dist/css/bootstrap.min.css';

   (Optional) Import custom styles in src/index.css.
4. Organize Components
   – Create a src/components folder to house React components.
   – Use functional or class-based components to keep the structure modular.
5. Set Up Routing Install react-router-dom for page routing:
   

   npm install react-router-dom

   
   Example of App.js with basic routing:
   

   import React from 'react';
   import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
   import Home from './components/Home';
   import About from './components/About';
   
   function App() {
     return (
       <Router>
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/about" element={<About />} />
         </Routes>
       </Router>
     );
   }
   
   export default App;

   
    

   ———————-

Backend Setup (Node.js)

1. Create a Backend Directory
   

   mkdir backend
   cd backend
   npm init -y

    

2. Install Dependencies Install essential Node.js packages:

   npm install express cors body-parser

3. Set Up the Server Create a server.js file in the backend directory:

   const express = require('express');
   const cors = require('cors');
   const app = express();
   
   app.use(cors());
   app.use(express.json()); // For parsing JSON requests
   
   // Sample route
   app.get('/', (req, res) => {
     res.send('Hello, this is your backend!');
   });
   
   // Start server
   const PORT = 5000;
   app.listen(PORT, () => {
     console.log(`Server running on http://localhost:${PORT}`);
   });

4. Organize Backend Files Create folders for better structure:
   routes/ for route files
   controllers/ for business logic
   models/ for database models (if needed)Example routes/api.js:

   const express = require('express');
   const router = express.Router();
   
   router.get('/data', (req, res) => {
     res.json({ message: 'Data from backend' });
   });
   
   module.exports = router;

   Update server.js:

   const apiRoutes = require('./routes/api');
   app.use('/api', apiRoutes);

   ---

Connect Frontend and Backend

1. Use Proxy
   In frontend/package.json, add:
   

   "proxy": "http://localhost:5000"

2. Fetch Data from Backend Example in src/components/Home.js:
   

   import React, { useEffect, useState } from 'react';
   
   function Home() {
     const [data, setData] = useState('');
   
     useEffect(() => {
       fetch('/api/data')
         .then((response) => response.json())
         .then((data) => setData(data.message));
     }, []);
   
     return <div>{data}</div>;
   }
   
   export default Home;

   
   ——————————-

Run the Project

1. Start Backend:
   

   cd backend
   node server.js

2. Start Frontend
   

   cd frontend
   npm start

   
    

Implement a Bootstrap theme

To implement a Bootstrap theme (with its images, CSS, and JS files) into your React project, follow these steps. You’ll essentially integrate the theme’s assets into the React app while ensuring that React handles the structure, components, and routing.

Step-by-Step Guide to Implementing a Bootstrap Theme in React

1. Prepare Your React Project

Assuming you’ve already created your React project using create-react-app, navigate to your project folder:

cd frontend

2. Install Bootstrap in Your React Project

You can integrate Bootstrap in two primary ways:

• Via CDN: Link the Bootstrap CSS and JS files directly in your React project.
• Install Bootstrap via npm: This is the recommended way as it allows you to manage dependencies and update Bootstrap more easily.

Option 1: Installing Bootstrap via npm (Recommended)

1. Install Bootstrap via npm:
   

   npm install bootstrap

   
    
2. Import Bootstrap’s CSS file into your src/index.js or src/App.js file to apply the styles globally:In src/index.js:

   import 'bootstrap/dist/css/bootstrap.min.css';

   
   This will apply Bootstrap’s default styles to your entire React app.

   Option 2: Using Bootstrap CDN (Alternative)

   If you prefer to use the Bootstrap CDN, you can simply link the CSS and JS files in your public/index.html file.

   1. Open public/index.html.
   2. Add the following Bootstrap CSS link in the <head> tag:
      

      <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      />

      
       
   3. Add the Bootstrap JS script just before the closing </body> tag:
      

      <script
        src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-pzjw8f+ua7Kw1TIq0v8Fq95K6BaaJx27qjYmJz4QZyxE99rk4lt+kfjfXph0N2yA"
        crossorigin="anonymous"
      ></script>

      ---

      3. Integrating Your Bootstrap Theme’s Assets (CSS, JS, Images)

      Now, let’s integrate the theme’s specific files (CSS, JS, and images) into the React project.

      1. Copy Theme’s CSS and JS Files

      1. Copy the CSS and JS files from your Bootstrap theme (e.g., theme.css, theme.js) into the public or src folder of your React app. For better management, it’s a good idea to put them in a new folder like public/assets/css and public/assets/js.
      2. In src/index.js, import the CSS files to apply the theme’s styles:
         

         import './assets/css/theme.css';  // Replace with the path to your theme's CSS file

         
         If you’re using JS files that need to be included globally, you can add them in the public/index.html file:
         

         <script src="%PUBLIC_URL%/assets/js/theme.js"></script>

         
          

   2. Copy Theme’s Images

   1. Copy the images from your Bootstrap theme into the public folder, preferably inside public/assets/images.
   2. In your React components, use the images via relative paths, like so:
      

      <img src="/assets/images/logo.png" alt="Logo" />

      
      If you want to use an import statement for images (for optimized builds), you can use:

      import logo from './assets/images/logo.png';
      
      <img src={logo} alt="Logo" />

      
       

      3. Using JavaScript Plugins (If Any)

      If your Bootstrap theme relies on any JavaScript plugins (e.g., modals, tooltips, carousels), you can use React-friendly alternatives or manually integrate the Bootstrap JS plugins.

      1. If the JS file contains functionality that doesn’t conflict with React, you can still include it in public/index.html or use it in your components.For example:
         

         <script src="%PUBLIC_URL%/assets/js/theme.js"></script>

         
          

The post React With Node and Boostrap 5 Setup appeared first on Cody Paste.

Install

• node
• npm

Step 1: Install React Router (For Navigate to pages:page link)
Open your terminal and navigate to your React project directory. Then, run the following command to install React Router:

npm install react-router-dom

Step 2: Install React Bootstrap and Bootstrap

You can install both react-bootstrap and bootstrap using npm. Open your terminal and run the following command in your project directory:

npm install react-bootstrap bootstrap

Now will setup

Step 1: First we will create a header, so create a folder ‘components‘ under the src folder:

src/component

and create a file Header.js (The first letter should be capitalised and extension could be js or JSX)

src/components/Header.js

import React from 'react';
import { Navbar, Nav } from 'react-bootstrap';

function Header() {
  return (
    <Navbar bg="light" expand="lg">
      <Navbar.Brand href="/">MyApp</Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="ml-auto">
          <Nav.Link href="/">Home</Nav.Link>
          <Nav.Link href="/about">About</Nav.Link>
          <Nav.Link href="/services">Services</Nav.Link>
          <Nav.Link href="/contact">Contact</Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  );
}

export default Header;

Step 2: create 2 pages Home & About, so create a folder named ‘pages‘ under ‘src‘. here we will keep our pages. (you can choose any name in place of pages)

src/pages/About.jsx

import React from 'react';

const About = () => {
  return (
    <>
    <div><h1>About us Page </h1></div>
    <div><h3>dfgdfg fghfv </h3></div>
    </>
  );
}

export default About;

src/pages/Home.jsx

import React from 'react';

const Home = () => {
  return (
    <>
    <div><h1>AHopme Page </h1></div>
    <div><h3>hfgoh fghfv </h3></div>
    </>
  );
}

export default Home;

Step 3: Now we have to import both pages and header in src/App.js App.js and index.js are our main files so every component has to import here

App.js

import logo from './logo.svg';
import Header from './components/Header';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import './App.css';
import About from './pages/About';

function App() {
  return (
    <BrowserRouter>
    <Header />  {/* Render the Header here */}
      <Routes>
          <Route path='/' element={<Home/>} />
          <Route path='/about' element={<About />} />          
          {/* Other components */}        
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Step 4: Now we have to import bootstrap in src/index.js.

src/index.js

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';


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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

The post React Setup appeared first on Cody Paste.

The post Create React Project appeared first on Cody Paste.