We require mainly 2 appl softwares.
1. node.js installation
2. visual studio code
react or react.js or react.jsx
How to create a project in ReactJs:
----------------------------------------
here we follows the given steps
step1: we create a one folder in any other drive name
D:\>test_reactjs
step2: open vscode from file menu select open folder option
step3: select our folder name in the existing path
step4: from the menu select terminal option
step5:from the terminal path create reactjs project in the following way
npx create-react-app projectname
Ex: npx create-react-app react_demo
OR
-->npm cache clean --force
-->npm install npm@latest -g
-->npm install
-->npx create-react-app react_demo
OR -->npm install -g create-react-app
npx create-react-app react_demo
step6: enter into our reactjs project we type as follows
d:>test_react>
d:>test_react>cd react_demo
d:>test_reat>react_demo>-
step7: we will start the project
npm start
How in react it display content on Browser:
----------------------------------------
By default the data flow from
app.js file -->index.js -->index.html
OR
index.js->index.html
Introduction:
----------------
react or reactjs or react.js
it is an open source front end application depends on javscript
library.
Developed by Facebook organization,
" Jordan walke " in the year 2013.
reactjs Angular vue
using reactjs application we develop user interface concepts on a webpage.
React is not a framework , Angular we say that it is a framework,
React js open source application,
react js application useful for to develop user interface concepts
Features of React Js application:
-----------------------------------------
->it follows jsx concept (javascript xml synatx)
->react js application we called as component based application
(Single page application)
here we reused same components in the application
-> Uni directional based application (One directional flow of data)
jsx (javascript xml)
--------------------------------
jsx stands for javscript xml.
jsx allows us to write HTML in React
jsx makes it easier to write and edit HTML in React.
Babel Compiler:
-----------------------------
In Reactjs here babel is called as javascript compiler .
it converts javscript library code into html code.
here babel it converst JSX code into normal html code.
JSX code:
==========================================
index.js
---------------------------------------------------------------------
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
Hello World
, document.getElementById('root'));
index.html
-----------------------------------
div tag in jsx:
-----------------------------------------------------------------------
in ReactDOM whenever we add multiple elements or tags
then we should include
tag.
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
Hello World
welcome to react
, document.getElementById('root'));
Expressions inJSX:
-------------------------------------
we need to add expression jsx then we should include
inside of the curly brackets.
{}
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(
shravan {2+4}
, document.getElementById('root'));
Ex2:
----------------------
import React from 'react'
import ReactDOM from 'react-dom'
const name='corporate Trainer'
ReactDOM.render(
shravan {name}
, document.getElementById('root'));
-----------------------------
Ex3:
import React from 'react'
import ReactDOM from 'react-dom'
const name=(
ApplesMangosCherris
)
ReactDOM.render(
{name}
, document.getElementById('root'));
Ex4:
------------------------------------
import React from 'react'
import ReactDOM from 'react-dom'
const name=(
Employee Name
Employee Designation
Shravan Kumar
Corporate Trainer
Kumar
developer
)
ReactDOM.render(
{name}
, document.getElementById('root'));
components in React Js:
-----------------------------
component is one of the part or position on web page.
in react js to create a component then user follows in
2 ways.
1. fucntional components
2. class components
1. fucntion components:
-----------------------------------------
App.js
-------------------
import React from 'react'
import Test from './components/Test'
import Test1 from './components/Test1'
export default function App()
{
return(
welcome to functional component
)
}
in this example i create one folder under src
i.e components
inside of this components folder we creted two child functional components.
Test1.js
----------------
import React from 'react'
function Test1()
{
return(
child 1 component
)
}
export default Test1
Test.js
----------
import React from 'react'
function Test()
{
return(
this is child component
)
}
export default Test
index.js
-------------------------------
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
,
document.getElementById('root')
);
reportWebVitals();
Example2:
-----------------------
App.js
--------
import React from 'react'
import Table from './components/Table'
function App()
{
return (
This is Root component in React
)
}
export default App
Table.js
---------------------------
import TableHeader from './TableHeader'
import TableBody from './TableBody'
import React from 'react'
export default function Table()
{
return(
)
}
TableHeader.js
------------------
import React from 'react'
export default function TableHeader()
{
return (
Employee Name
Employee Designation
)
}
TableBody.js
---------------------
import React from 'react'
export default function TableBody()
{
return(
Shravan
Trainer
)
}
Arrow function in React:
--------------------------------
import TableHeader from './TableHeader'
import TableBody from './TableBody'
import React from 'react'
const Table=()=>
{
return(
)
}
export default Table
2. Class Component:
--------------------------------------
syntax:
import React ,{ Component} from 'react';
class classname extends Component{
render()
{
return(
jsx code
)
}
}
export default classname;
App.js
---------------
import React from 'react'
import Table from './components/Table'
function App()
{
return (
This is Root component in React
)
}
export default App
Table.js
-----------------
import React,{Component} from 'react'
import TableHeader from './TableHeader'
import TableBody from './TableBody'
class Table extends Component{
render()
{
return(
)
}
}
Props:
properties
The props works as for sending or pass the data from one component into another component.
we declare in reactjs as props
React here the data flow between from one component to another only
based on uni directional
Once we pass the data from one component into another component then
after we cannot change the data .
Example program on functional components with props
App.js
-------------------------------------
import React from 'react'
import Test from './Test'
function App ()
{
return(
)
}
export default Test
Example program on Class component with props:
====================================================
App.js
-----------------------------------
import React, { Component } from 'react'
import Test from './Test'
class App extends Component
{
render()
{
return(
)
}
}
export default App
Test.js:
---------------------------------------------
import React, {Component} from 'react'
class Test extends Component
{
render()
{
return(
Name is {this.props.name} Designation is: {this.props.desig}
)
}
}
export default Test
React State and setState():
--------------------------------------------
The state is a builtin object in React component.
in the state object we store property values that belong to the component.
when the state object changes , the component also renders.
In react if we define state object then we follows the given syantx:
class classname extends Component{
constructor(props)
{
supper(props)
this.state={
-------
---------------
-----------------
}
}
}
index.js:
--------------------------------------------------------------
import React from 'react'
import ReactDOM from 'react-dom'
import StudentComponent from './StudentComponent'
ReactDOM.render( , document.getElementById('root'));
StudentComponent.js
---------------------------------------------
import React, {Component} from 'react'
class StudentComponent extends Component
{
constructor(props)
{
super(props)
this.state=
{
firstName:"reddy",
lastName:"shravan",
rollNo:101,
age: 25
}
}
render()
{
return(
First name: {this.state.firstName}
last name: {this.state.lastName}
Roll No is: {this.state.rollNo}
Age is: {this.state.age}
)
}
}
export default StudentComponent
*****setState() method :
If user wants to change the state object properties values in run time
then user follows done of the hook i.e setState() method includes in
application.
In the below example program using event trigger Mechanism we invoked
setState() method in React.
StudentComponent.js
========================
import React, {Component} from 'react'
class StudentComponent extends Component
{
constructor(props)
{
super(props)
this.state=
{
firstName:"kumar",
lastName:"shravan",
rollNo:101,
age: 25
}
}
updateStudent(){
this.setState(
{
rollNo: 102,
age: 30
}
)
}
render()
{
return(
First name: {this.state.firstName}
last name: {this.state.lastName}
Roll No is: {this.state.rollNo}
Age is: {this.state.age}
)
}
}
export default StudentComponent
Note:
The difference between state object and Props is
-------------------------------------------------------
1. using props we pass the data from one component into another component
using state object we pass the data within the component.
2. in props mechanism we cannopt possible to change the properties values
In state object mechanism it possible to change the properties values.
3. In props there no hook method implementation
in state object using setState() we change the properties values at run time
Handling Events in React:
---------------------------------------------------------
Handling Events with react elements is very similer to handling
events on DOM elemets.
There are few differences between the events.
In React application events are named using camelCase styles.
How we apply the event in React application is:
if u take example in javascript how we apply the event is
Handling onClick event in the class component example:
--------------------------------------------------------
In the below example represents Event Trigger Mechanism in react
application. in this example we create one of the event i.e onClick()
index.js
------------------------------------
import React from 'react'
import ReactDOM from 'react-dom'
import ClassClick from './ClassClick'
ReactDOM.render( , document.getElementById('root'));
ClassClick.js
--------------------------------------------------------
import React, {Component} from 'react'
class ClassClick extends Component{
clickHandler()
{
console.log('onclick event triggered')
}
render()
{
return(
)
}
}
export default ClassClick
Example2: using App.js file
---------------
index.js
---------------------------------------------------
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render( , document.getElementById('root'));
ClassClick.js
-------------------------------------------------------------
import React, {Component} from 'react'
class ClassClick extends Component{
clickHandler()
{
console.log('onclick event triggered')
}
render()
{
return(
)
}
}
export default ClassClick
App.js
---------------------------
import React,{ Component} from 'react'
import ClassClick from './ClassClick'
class App extends Component{
render()
{
return(
)
}
}
export default App
handling onclick event inthe functional component:
===================================================================
index.js-
--------
import React from 'react'
import ReactDOM from 'react-dom'
import FunctionClick from './FunctionClick';
ReactDOM.render( , document.getElementById('root'));
FunctionaClick.js
---------------------------------------------------------------
import React from 'react'
function FunctionClick()
{
function clickHandler()
{
console.log("Functional component event")
}
return(
)
}
export default FunctionClick
Binding Event in React:
--------------------------------------------
In react Applicaion in eventhandling if we declare the keyword as this
then it return the current object only.
but if we declare again this keyword in the method definition then we get Error
because the reason is this keyword exist in multiple location.
So over come this we implement bind() method in event handling mechanism.
'
EventBind.js
---------------------------------------------------------------------
import React,{Component} from 'react'
class EventBind extends Component{
constructor(){
super()
this.state={
message: "Hello"
}
}
clickHandler()
{
console.log(this)
this.setState({message: "good bye"})
}
render()
{
return(
)
}
}
export default EventBind
Styles and CSS in React js Application:
-------------------------------------------------
In reactjs application if we add styles using CSS then we follows the given ways.
Those are
1. Regular CSS Style sheets
2. Inline style sheets
3) CSS modules.
1. Regular CSS style sheet:
-----------------------------------------------
If we add css using as regular style mechanism then we follows the given ways
--> we create a seperate style css file
-->create a compoent with reactjs applicaation
-->we import css code in react js application
MyStyle.js
-------------------------------
import React,{Component} from 'react'
import './index.css'
class MyStyle extends Component{
render()
{
return(
)
}
export default MyStyle
index.js
-----------------------------
import ReactDOM from 'react-dom'
import React from 'react'
import MyStyle from './MyStyle'
ReactDOM.render(, document.getElementById("root"))
3) CSS modules:
----------------------------------
In react js applicaion if we want add styles using css modules then
we follows the given ways.
--> we should create a seperate file with the extension as filename.module.css
-->we create a component
--> we import module.css file in out component
ex: import styles from './mystyles.module.css'
MyStyle.js
--------------------------------------
import React from 'react'
import styles from './mystyle.module.css'
class MyStyle extends React.Component{
render()
{
return(
Module.css related styles
)
}
}
export default MyStyle
mystyle.module.css
--------------------------
body{
color:red;
background-image: url('ganesh.jpg');
}
index.js
------------------------
import ReactDOM from 'react-dom'
import React from 'react'
import MyStyle from './MyStyle'
ReactDOM.render(, document.getElementById("root"))
Conditions in ReactJS:
-----------------------------------------------------------------
1. if-else
Greeting.js
----------------------------------------------------------------
import React from 'react'
import UserGreeting from './UserGreeting'
import GuestGreeting from './GuestGreeting'
function Greeting(props)
{
const isLoggedIn=props.isLoggedIn;
if(isLoggedIn)
{
return ;
}
return ;
}
export default Greeting
index.js
--------------------------------------------------------------------------
import Greeting from './Greeting'
import ReactDOM from 'react-dom'
import React from 'react'
ReactDOM.render(, document.getElementById("root"));
GuestGreeting.js
---------------------------------------------------------
import React from 'react'
function GuestGreeting(props)
{
return
Please Sign Up
}
export default GuestGreeting
UserGreeting.js
---------------------------------------
import React from 'react'
function UserGreeting(props)
{
return
}
}
export default Greeting
index.js
----------------
import Greeting from './Greeting'
import ReactDOM from 'react-dom'
import React from 'react'
ReactDOM.render(, document.getElementById("root"));
Routing Mechanism in ReactJS application:
--------------------------------------------------
Routing : connecting or linking between from one component into another component is called as
routing in react.'
'
In React js application if we develop Routing Mechanism we follows the given steps:
there maily 5 steps we need to follows.
1. create React js routing project App
2. Install a react router
3. create react class components
4. Configure Routing in our react routing app
5. start project
1. create React routing app project:
------------------------------------
npx create-react-app react-routing
2. install a react router:
-------------------------------------------
npm install react-router-dom
3) create react class components:
-------------------------------------------
Home
About
Contact
Services
Home.js
------------
import React,{Component} from 'react'
class Home extends Component{
constructor(props)
{
super(props)
this.state={
title: 'Home page Window'
}
}
render()
{
return(
{this.state.title}
)
}
}
export default Home
About.js
-----------------
import React,{Component} from 'react'
class About extends Component{
constructor(props)
{
super(props)
this.state={
title: 'About page Window'
}
}
render()
{
return(
{this.state.title}
)
}
}
export default About
Contact.js
------------------------------------------------------
import React,{Component} from 'react'
class Contact extends Component{
constructor(props)
{
super(props)
this.state={
title: 'Contact page Window'
} }
render()
{
return(
)
}
}
export default Services
4) configure React App project:
------------------------------------
we need to import all the components files.
using import statement
similerly we import Browserrouter from react-router-dom.
for more better to apply styles for the components then we can install
bootstrap application in our react js application.
If we want to apply boot strap in our front end applications
user follows in ways>
4.1 using CDN we can add boot strap in reactjs
4.2 intsall bootstrap using npm
npm install bootstrap --save
App.js:
----------------------------------------------
import Home from './components/Home'
import About from './components/About'
import Contact from './components/Contact'
import Services from './components/Services'
import {BrowserRouter as Router, Switch, Link, Route} from 'react-router-dom';
import './App.css';
function App() {
return (
React Router Tutorial for Trainees
);
}
export default App;
5) We run the boot strap project
npm start