Use Internal and External CSS AND App.js file in React tut 6

# Use Internal and External CSS in React

# To import External CSS in js or jsx file

       import './index.css';

# TO use Internal or Inline CSS.

      1st Way :

  <p style={{ color: 'blue', marginTop: '2rem', fontSize: '30px', textAlign: 'center' }}>

  hi this is inline css </p>

   

• we have to use {{ }} to write css property under style attribute.
• Because we are passing css property as object.

   2st Way :

var pstyle = {

        color: 'blue',

        marginTop: '2rem',

        fontSize: '20px',

        textAlign: 'center',

        fontFamily: ' "Oswald", sans-serif'

    }

<p style={pstyle}>variable style hai ye bro</p>

# App.jsx file in React

     App.jsx is file where all components are connected then only we have import App.jsx file in 

index.js

# code where we are using App.jsx , internal css and etc concept

# index.js 

import React from "react"

import ReactDOM from "react-dom"

import './index.css'

import App from './App'

ReactDOM.render(

      <App/>

  ,

  document.getElementById('root')

);

# App.jsx

import React from 'react';

import Gallery from './Gallery';

import Greet from './Greet';

function App()

{

    return(

        <>

        <Greet/>

         <Gallery/>

        </>

    )

}

export default App;

# Greet.jsx

import React from 'react';

function Greet() {

    var pstyle = {

        color: 'blue',

        marginTop: '2rem',

        fontSize: '20px',

        textAlign: 'center',

        fontFamily: ' "Oswald", sans-serif'

    }

    var curtime = new Date(2020, 5, 5, 2).getHours()

    var msg = ""

    const cssStyle = {}

    if (curtime >= 1 && curtime < 12) {

        msg = "Good Morning"

        cssStyle.color = "Green"

    }

    else if (curtime >= 12 && curtime < 18) {

        msg = "Good Evening"

        cssStyle.color = "orange"

    }

    else if (curtime >= 18 && curtime <= 24) {

        msg = "Good Night"

        cssStyle.color = "black"

    }

    return (

        <>

            <p style={{ color: 'blue', marginTop: '2rem', fontSize: '30px', textAlign:

 'center' }}>  hi this is inline css </p>

            <p style={pstyle}>variable style hai ye bro</p>

            <div className="greet">

                <h1>Hello Sir , <span style={cssStyle}>{msg} </span></h1>

            </div>

        </>

    )

}

export default Greet;

# Gallery.jsx

import React from 'react'

import Heading from './Heading'

function Gallery()

{

    var img1 = "https://picsum.photos/200/350"

    var img2 = "https://picsum.photos/250/300"

    

    var img3 = "https://picsum.photos/200/250"

   return(

       <>

        <a href="basicReact.html">Basic React</a>

    <Heading/>

 {/* we use className instead of class in React because class keyword is 

reserved alredy in React */}

   <div className="image">

  <img src="https://picsum.photos/250/200" alt="random pics"/>

  <img src={img1} alt="random pics"/>

  <img src={img2} alt="random pics"/>

  <img src={img3} alt="random pics"/>

  </div>

  </>

   )

}

export default Gallery;