React Components

Overview

  • Class Components

    Class Components (Smart Components)

  • Development Environment

    first import the css file like index.css into index.js import ./index.css

  • Stateless functional Components

    Stateless functional Components (Dumb Components) Stateless functional Components always return jsx // not working because 'greetings' with small g indicated an html element and Captial G is recognized as React component.

  • Development Environment

    jsx is compiled by bible into javascript functions Three arguments: element, propsObject, children function Greeting() { return React.createElement("div", {}, "hi world"); } JSX Rules Always return single element. We can use the ‘React.

  • Development Environment

    // working code import React from "react"; import ReactDom from "react-dom"; function Greeting() { return ( <section> <Person /> <Message /> </section> ); } // create seprate reuseable components as many as you want and nest them in the root component that is being rendered in index.

  • Props

    Props (Properties) = Arguments to Components import React from "react"; import ReactDom from "react-dom"; import "./index.css"; const People = () => { return ( <section> <Person name="Ahmed Hassan Khan" job="Developer" number="03211177726" ></Person> <Person name="Ali Hassan Khan" job="Graphic Designer"></Person> </section> ); }; const Person = (props) => { console.

I will get back to you ASAP.