Extension for react(.

jsx)

What is JSX ?
It is combination of javascript and XML (xtensible markup language).

Rule to follow while using jsx

*className Instead of Class.

*follow camelCase.

*Every tag should be in one single container.

npx(node package executor)

npm(node package manager)

folder Structure:

*node_modules (warning: should not touch)

*public (main file is index.html)

*src (delete default src

 Components are reusable.

Component
Types of components.

 FBC(function based component).

 CBC(class based component).

Difference between FBC and CBC.

FBC CBC

 Pure js function.  Creating using class

 Stateless.  Statefull
 Hooks can be used only in fbc  We cannot use hooks in cbc
 Life cycle methods are not used  Lifecycle methods are used
 This keyword is not used  This keyword is used.
JAVASCRIPT CODE SHOULD BE WRITTEN BEFORE RETURN
KEYWORD.
PROPS
 Props are inbuilt Objects.
 They are used to send the data from parent(App) component to child component.
 It is uni-directional.

For example
<Child1 data=”world”/>
<Child data=”galaxy”/>

Props(Properties)
-Props are inbuilt Objects.
-Props are used to pass the data from parent component to child component.
-props are immutable.

How to run a program ?

1. Go to terminal
2. Command (npm start)

States
 To create a dynamic data.
 States are mutable.
 States belong to only one component are local.

FBC are Stateless components to make this component statefull we use hooks.

GitHub API LINK:

https://api.github.com/users
FRAGMENT-->
 it acts like a invisible containers.
 It will not create unnecessary Objects.
 If you want to use fragments you need to import it from react library.

LISTS AND KEYS

 Lists are used to display data in ordered format.
 Map() method is used to create a list in react.

KEYS
 Keys are used to identify the unique elements of the html.
 Key is an attribute.

ADDING CSS INTO REACT

1. INLINE.
2. GLOBAL.
3. MODULE.CSS.

MODULE----

Create a file in component named as Style.jsx.

Create a file in component named as style.module.css and import it from
Style.jsx by taking a variable as design(variable name)……

1. Simple
2. Combinator
1. Descendent(“ ”)
2. Child(“>”)-------->target only child
3. Adjacent-sibling(“+”)-------------->target only nearest one
4. General sibling(“ ~ ”)-------------->target all after the section tag

There are 3 ways to apply css in react:

1) Inline:- it’s a type of css where will be applying using an style attribute
* it should be written in the form of an attribute
 Eg: <div style={{background: “red”,fontSize:”50px”}}>Inline</div>
2) Global:
 It is a type of css where we maintaining one single file for entire react project.
 It should be imported in parent component
3) Module.css:-
*It is a type of css where we will be creating a css file for every child component
*particulars component css code will be written in respective component.

Ref

Directly targets the real dom.

Inbuilt object.
It is used to target element.

Form-Handling

1) UNCONTROLLED FORMS(Ref).
2) CONTROLLED FORMS(States).

Uncontrolled forms:
* These forms are directly handled by real dom ,the data whichever user enters it
is completely handled by real dom
*These forms are created using ref (reference) which targets real dom
*It is completely disadvantages to use these forms

Eg:  let handledata=(e)=>{

        e.preventDefault()
        let username = name.current.value
        let useremail = email.current.value
        console.log(username)
        console.log(useremail)
    }
  return (
    <div>
        <form>
            <label>Name</label>
            <input type="text" ref={name}/><br/>
            <label>Email</label>
            <input type="Email" ref={email} /><br/>
            <button onClick={handledata}>Submit</button>
        </form>
    </div>
  )
}
app.jsx

import Props from "./components/Props"

const App =()=>{
    let obj = {
        name:"ABC",
        id:"123",
        place:"Banglore"
    }
    return(
        <props data={obj}/>
           )
}

export default App;