React JS - JSX

#React Notes
JSX
 Introduction to JSX
▪ JSX is a technology that was introduced by React.
▪ JSX stands for JavaScript XML.
▪ Although React can work completely fine without using JSX, it’s an ideal
technology to work with components, so React benefits a lot from JSX.
▪ At first, you might think that using JSX is like mixing HTML and JavaScript
▪ https://reactjs.org/docs/introducing-jsx.html

Akash Technolabs www.akashsir.com

 What is JSX?
▪ JavaScript extension, JSX is not valid JavaScript that browsers can read.
▪ It’s a JavaScript file that contains JSX code, very similar to HTML and the file
have to be complied before it reaches web browser, with JSX complier that
translates the JSX into JavaScript.
▪ JSX element are treated as JavaScript expression, they can be saved as
variable, passed to function or stored in an object or array.
▪ Each JSX expression must have exactly one outermost element. Usually wrap
the JSX expression in a <div></div>.

Akash Technolabs www.akashsir.com

 Cont.
• JSX must have a closing tag, even if it’s a self-closing.
• <Contact />

• To evaluate JSX expressions you must wrap it in curly braces.

{variable}
Rendering JSX element means to make it appear on screen. We render JSX
expression like this:

Akash Technolabs www.akashsir.com

 React Element Render
▪ import React from ‘react’;
▪ import ReactDOM from ‘react-dom’;
▪ ReactDOM.render(<h1>Hello</h1>, document.getElementById(‘app’));

Akash Technolabs www.akashsir.com

 Create File with .jsx
▪ We can create component using .jsx

Akash Technolabs www.akashsir.com

▪ https://babeljs.io/

Akash Technolabs www.akashsir.com

JSX Convert Code Into JavaScript

Akash Technolabs www.akashsir.com

▪ Inside a JSX expression, attributes can be inserted very easily:
▪

const myId = 'test'

const element = <h1 id={myId}>Hello, world!</h1>

Akash Technolabs www.akashsir.com

 JSX
▪ Comments
▪ Variable Print
▪ String
▪ CSS
▪ Internal Css
▪ Inline Css
▪ External Css

▪ If Condition

Akash Technolabs www.akashsir.com

 Comment in React JSX
▪ You can use regular /* Block Comments */, but they need to be wrapped in
curly braces
▪ Single Line Comment
▪ {/* A JSX Single Line comment */}

▪ Multiline Comments
{/*
Multi
line
comment
*/}

Akash Technolabs www.akashsir.com

Comments Demo

Akash Technolabs www.akashsir.com

 Expression
▪ Arithmetic Expression in React
▪ Use {}

Akash Technolabs www.akashsir.com

 Variable Expression
▪ Variable name must be wrap in {}.

Akash Technolabs www.akashsir.com

Sum Example

Akash Technolabs www.akashsir.com

If Demo

Akash Technolabs www.akashsir.com

Class Component

Akash Technolabs www.akashsir.com

Akash Technolabs www.akashsir.com
Component Styling

Akash Technolabs www.akashsir.com

 How to style React components
▪ Mainly there are 3 methods to design component
1. Inline styling
2. styled-components (Internal)
3. CSS Modules (External)

Akash Technolabs www.akashsir.com

 Camel Case for Property
▪ Note : All CSS and JS properties must be written as per below format
▪ Rename
▪ HTML -> React
▪ Class – className
▪ for – htmlFor
▪ Value - DefaultValue

▪ onclick - onClick
▪ tabindex - tabIndex

Akash Technolabs www.akashsir.com

 Camel Case for Property
In React Css Properties Name will be change. Remove – and use Capital Letter

External CSS (React) JS (Internal Css / Inline css in React)

▪ background-color: #44014C; ▪ backgroundColor: "#44014C",
▪ min-height: 200px; ▪ minHeight: "200px",
▪ box-sizing: border-box; ▪ boxSizing: "border-box“

Akash Technolabs www.akashsir.com

Home Component

Akash Technolabs www.akashsir.com

Inline Style

Akash Technolabs www.akashsir.com

 Inline Css
▪ If you are familiar with basic HTML, you’ll know that it is possible to add your
CSS inline. This is similar in React.
▪ We can add inline styles to any React component we want to render. These
styles are written as attributes and are passed to the element.

Akash Technolabs www.akashsir.com

Inline CSS Class Component Example

Akash Technolabs www.akashsir.com

Inline Css Demo With Function Component

Akash Technolabs www.akashsir.com

 Inline Css Code
import React from "react";

class Home extends React.Component {

render() {
return (
<div>
{/* Inline Css Demo */}
<h1 style={{backgroundColor:"#800080", color:'white'}}>Home</h1>
</div>
)
}
}

export default Home;

Akash Technolabs www.akashsir.com

Internal Css

Akash Technolabs www.akashsir.com

 Internal Css
▪ We create a style object variable the same way we create a JavaScript object.
▪ This object is then passed to the style attribute of the element we want to
style.
var mycolors = {
backgroundColor:'#800080',
color:'white'
};

<h1 style={mycolors}>Home</h1>

Akash Technolabs www.akashsir.com

 Internal Css
▪ We can Create JS Object and Pass in Style

Akash Technolabs www.akashsir.com

Functional Component

Akash Technolabs www.akashsir.com

Internal Code
import React from "react";
class Home extends React.Component {

render() {
var mycolors = {
backgroundColor:'#800080',
color:'white'
};

return (
<div>
{/* Internal Css Demo */}
<h1 style={mycolors}>Home</h1>
</div>
)
}
}

export default Home;

Akash Technolabs www.akashsir.com

External

Akash Technolabs www.akashsir.com

 External Css
▪ Create new css file and design code.
▪ To Add css in Component we can use below code.
▪ import './Mystyle.css’;

▪ To Access Class in React Component we can call using

▪ className

Akash Technolabs www.akashsir.com

External Css

Akash Technolabs www.akashsir.com

Component
Reusability

Akash Technolabs www.akashsir.com

 Common Component
▪ We can use same component in multiple Component
▪ Example:
▪ Header and Footer will remain same in Home,About,Contact

▪ We can Create below component and will reuse in Other Component.

▪ Header
▪ Footer

Akash Technolabs www.akashsir.com

 Header.js
▪ Header Component having Title.

Akash Technolabs www.akashsir.com

 Footer
▪ Footer Component having Footer Text

Akash Technolabs www.akashsir.com

 Home
▪ Call Header and Footer Component in Home Component.

Akash Technolabs www.akashsir.com

 App
▪ Home Component call in App Component

Akash Technolabs www.akashsir.com

 About
▪ Create New Component About and Call Header and Footer.

Akash Technolabs www.akashsir.com

 App.js
▪ In App Component we can call multiple Component
▪ Home
▪ About

Akash Technolabs www.akashsir.com

<> Fragments </>

Akash Technolabs www.akashsir.com

 React Fragments
▪ In React, whenever you want to render something on the screen, you need to
use a render method inside the component.
▪ This render method can return single elements or multiple elements.
▪ The render method will only render a single root node inside it at a time.
▪ However, if you want to return multiple elements, the render method will
require a 'div' tag and put the entire content or elements inside it.

Akash Technolabs www.akashsir.com

 Div Wrap
▪ Div required to print multiple Items.

Akash Technolabs www.akashsir.com

 React Fragments
▪ React introduced Fragments from the 16.2 and above version.
▪ Fragments allow you to group a list of children without adding extra nodes to
the DOM.

<React.Fragment>
<h2> child1 </h2>
<p> child2 </p>
.. ..... .... ...
</React.Fragment>

Akash Technolabs www.akashsir.com

 Why to use Fragments?
▪ The main reason to use Fragments tag is:
▪ It makes the execution of code faster as compared to the div tag.
▪ It takes less memory.

Akash Technolabs www.akashsir.com

 Default Div Render inside Main Root Div
▪ By Default Component will render in Div Tag of id Root.

Akash Technolabs www.akashsir.com

▪ To print multiple Items Div is required

Akash Technolabs www.akashsir.com

 New Div will Render inside Root Div
▪ Div id root having div to print multiple items.

Akash Technolabs www.akashsir.com

 React.Fragement
▪ React.Fragement will help to render multiple items.

Akash Technolabs www.akashsir.com

 Fragments Short Syntax
▪ There is also another shorthand exists for declaring fragments for the above
method.
▪ It looks like empty tag in which we can use of '<>' and '' instead of the
'React.Fragment'.
▪ Note: The shorthand syntax does not accept key attributes in that case you
have to use the <React.Fragments> tag.

Akash Technolabs www.akashsir.com

 Empty <> </> tag
▪ We can use <></> Empty tag.

Akash Technolabs www.akashsir.com

Akash Technolabs www.akashsir.com
Fragments Short Syntax

Akash Technolabs www.akashsir.com

All in one Example ☺

Akash Technolabs www.akashsir.com

 Get Exclusive
Video Tutorials

www.aptutorials.com
https://www.youtube.com/user/Akashtips
www.akashsir.com
Rating Us Now

Just Dial
https://www.justdial.com/Ahmedabad/Akash-Technolabs-Navrangpura-
Bus-Stop-Navrangpura/079PXX79-XX79-170615221520-S5C4_BZDET

Sulekha
https://www.sulekha.com/akash-technolabs-navrangpura-ahmedabad-
contact-address/ahmedabad
Connect With Me
# Social Info

Akash.padhiyar
Akashpadhiyar
Akash Padhiyar
#AkashSir Akash_padhiyar

+91 99786-21654

www.akashsir.com
www.akashtechnolabs.com #Akashpadhiyar
www.akashpadhiyar.com #aptutorials
www.aptutorials.com