• react

    React frontend with bootstrap and css

    Steps to import bootstrap

    1. npm install bootstrap
    2. src/index.js add the code

    import ‘bootstrap/dist/css/bootstrap.css’;

    • in index.js

    import ‘./index.css’;


    Inline style

    <h2 style={{borderWidth:’3px’;borderColor:’#333′}}>sample</h2>

    Sample index.js with bootstrap

    import React from 'react';
    
    import ReactDOM from 'react-dom/client';
    
    import './index.css';
    
    import 'bootstrap/dist/css/bootstrap.css';
    
    
    
    function ServiceList(){
    
        return (
            <div className="row">
    
                <h1> Data Based Services</h1>
    
                <Service />
    
                <Service />
    
                <Service />
    
                <Service />
    
    
    
            </div>
    
        );
    
    }
    const Service=()=>{
    
        return (
    
        <div className="col-sm-3"><Image ></Image>
    
        <Title />
    
    <Eb />
    
    </div>
    
        );
    
    };
    
    const Image= ()=>{
    
        return <img  alt=''
    
        src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQiSEiPuY8hANyZMO0UOUWdck8v5dObYgql0dgWQdka4A&s" />
    
    };
    
    const Title= ()=>{
    
        return <h3>Data Analyst</h3>
    
    };
    
    const Eb = () =>{
    
        return <button style={{color:'pink',borderWidth:'3px'}}>Enquire </button>
    
    };
    
    
    
    
    const root = ReactDOM.createRoot(document.getElementById('root'));
    
    root.render(<ServiceList />);

    to install react and start :

    npx create-react-app demo

    cd demo

    npm start