react
-
React frontend with bootstrap and css
Steps to import bootstrap
- npm install bootstrap
- 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