Scribd
Upload
80 views

Reactjs Notes

This document provides an overview of React concepts including JSX, components, props, states, and CSS styling. JSX allows embedding XML-like syntax directly in JavaScript. Components are reusable pieces of code and can be function or class-based. Props are used to pass data from parent to child components, while states allow components to be dynamic. CSS can be added inline, globally, or with CSS modules.

Uploaded by

subhanshu sahu
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
80 views

Reactjs Notes

This document provides an overview of React concepts including JSX, components, props, states, and CSS styling. JSX allows embedding XML-like syntax directly in JavaScript. Components are reusable pieces of code and can be function or class-based. Props are used to pass data from parent to child components, while states allow components to be dynamic. CSS can be added inline, globally, or with CSS modules.

Uploaded by

subhanshu sahu
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

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;

You might also like