IMPORTING FILES & CSS styling IN REACT

 

import React from 'react';

import ReactDOM from 'react-dom';

import "./index.css"

const tech1 = "REACT";

const img1 = "https://picsum.photos/200";

const img2 = "https://picsum.photos/200";

const img3 = "https://picsum.photos/200";

const link = "https://www.webruchi.in/";

//for inline styling define here an object

//than call it in the JSX element as JS expression

const heading = {

  color: '#4444',

  textAlign: 'center',

  font: 'outline',

  textTransform: 'capitalize',

  fontWeight: 'bold',

  textShadow: '0px 2px 4px #f4f5',

  margin: '50px 0'

}

//style.css uses kebab(text-transform) but in react.js

// we use camelCase(textTransform). Here, 'top_head' is a css

// class whereas 'heading' is an inline css i.e.style

ReactDOM.render(

<> 

    <h1 className="top_head">Welcome to {tech1}</h1>    

    <div className="pic">

    <img src={img1} alt="dummyImage1"/>

    <a href={link} traget="_blank">

    <img src={img2} alt="dummyImage2"/>

    </a>

    <img src={img3} alt="dummyImage3"/>

    </div>

    <h3 style={heading}>This is a inline css Styling.</h3>

</>,

  document.getElementById('root')

);