Scribd
Upload
54 views

React Programming

The document provides examples of basic React programming concepts including: 1. Rendering a simple element to the DOM using ReactDOM.render(). 2. Passing multiple elements to render. 3. Using JSX syntax to define elements with child elements. 4. Creating elements without JSX by calling React.createElement(). 5. Defining user-defined React components to encapsulate and reuse code. 6. Using state and methods to update the UI on user interactions like button clicks. 7. Nesting components to display related data like employee and department details.

Uploaded by

Varshan kb
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
54 views

React Programming

The document provides examples of basic React programming concepts including: 1. Rendering a simple element to the DOM using ReactDOM.render(). 2. Passing multiple elements to render. 3. Using JSX syntax to define elements with child elements. 4. Creating elements without JSX by calling React.createElement(). 5. Defining user-defined React components to encapsulate and reuse code. 6. Using state and methods to update the UI on user interactions like button clicks. 7. Nesting components to display related data like employee and department details.

Uploaded by

Varshan kb
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 7

/*-----------------------Basic

programming1------------------------------------------------*/
////////////////////////Reactpage/////////////////////////////////

index.js:-

import React from 'react';


import ReactDom from 'react-dom';
const element=<h1>Welcome to react programming</h1>
ReactDom.render(element,document.getelementByid('root'));

////////////////////////Htmlpage/////////////////////////////////

index.html:-

<!DOCYTYPE html>
<html>
<head>
</head>
<title>
</title>
<body>
<div id='root'></div>
</body>
</html>

/*-----------------------Basic
programming2------------------------------------------------*/

////////////////////////Reactpage/////////////////////////////////

index.js:-

import React from 'react';


import ReactDom from 'react-dom';
const element=<h1>Welcome to react programming</h1>
ReactDom.render(element,document.getelementByid('root'));
const newelement=<h1>Welcome to react programming</h1>
ReactDom.render(newelement,document.getelementByid('app'));
/*Here requrired some many line to execute the statement
so the reason uses single element pasing multiple value*/

////////////////////////Htmlpage/////////////////////////////////

index.html:-

<!DOCYTYPE html>
<html>
<head>
</head>
<title>
</title>
<body>
<div id='root'></div>
<div id='app'></div>
</body>
</html>

/*-----------------------Basic
programming3-----------------------------------------------*/

////////////////////////Reactpage/////////////////////////////////

index.js:-

import React from 'react';


import ReactDom from 'react-dom';
const element=
{
<div classname="testclass">
<h1>Welcome to react programming</h1>
<h2>Welcome to react programming</h2>
</div>
}
ReactDom.render(element,document.getelementByid('root'));
/* Div is act like parent and inside element like h1 and h2 are child element*/
/* Here JSX used to conver react element into plain javascript
but in react there is no requried to use this JSX everytime
so the reson we are devolping programming without JSX alos*/

////////////////////////Htmlpage/////////////////////////////////

index.html:-

<!DOCYTYPE html>
<html>
<head>
</head>
<title>
</title>
<body>
<div id='root'></div>
</body>
</html>

/*-----------------------Basic programming4 with out


JSX-------------------------------------*/

////////////////////////Reactpage/////////////////////////////////

index.js:-

import React from 'react';


import ReactDom from 'react-dom';
const element=React.createdElement("h1", null, "welcome");
ReactDom.render(element,document.getelementByid('root'));

////////////////////////Htmlpage//////////////////////////////////

index.html:-

<!DOCYTYPE html>
<html>
<head>
</head>
<title>
</title>
<body>
<div id='root'></div>
</body>
</html>

/*-----Basic programming5 with out JSX and pasing multiple value into
element-----------*/

////////////////////////Reactpage/////////////////////////////////

index.js:-

import React from 'react';


import ReactDom from 'react-dom';
const element={
React.createdElement("Div", (classname="testclass")),
React.createdElement("h1", null, "welcome"),
React.createdElement("h1", null, "welcome")
};
ReactDom.render(element,document.getelementByid('root'));

////////////////////////Htmlpage//////////////////////////////////

index.html:-

<!DOCYTYPE html>
<html>
<head>
</head>
<title>
</title>
<body>
<div id='root'></div>
</body>
</html>

/*-----------------------Basic programming6 in React


componet--------------------------------*/

////////////////////////Reactpage/////////////////////////////////

index.js:-

import React from 'react';


import ReactDom from 'react-dom';
import '.index.css';
fuction DisplayEmployeeInfo(employee)
{
return
<div>
<p>
<label>EmployeeID:<b>{employee.ID}</b></label>
</p>
<p>
<label>EmployeeName:<b>{employee.Name}</b></label>
</p>
<p>
<label>EmployeeLocation:<b>{employee.Location}</b></label>
</p>
<p>
<label>EmployeeSalary:<b>{employee.Salary}</b></label>
</p>
</div>
}

const element=<DisplayEmployeeInfo ID="101" Name="Sam" Location="Banglore"


Salary="12345"></DisplayEmployeeInfo>
ReactDom.render(element,document.getelementByid('root'));
/*DisplayEmployeeInfo=>User defined fuction name,
employee=>Objects,Componet=>,Componets=>*/

////////////////////////Htmlpage//////////////////////////////////

index.html:-

<!DOCYTYPE html>
<html>
<head>
</head>
<title>
</title>
<body>
<div id='root'></div>
</body>
</html>

/*-----------------------Basic programming6 in React class


componet------------------------------*/

////////////////////////Reactpage/////////////////////////////////

index.js:-.

import React from 'react';


import ReactDom from 'react-dom';

class Employee extends React.componet


{
render()
{
return
<div>
<h2>Employee Details.....</h2>
<p>
<label>Employee Id:<b>{this.props.ID}</b></label>
</p>
<p>
<label>Employee Name:<b>{this.props.Name}</b></label>
</p>
<p>
<label>Employee location:<b>{this.props.Location}</b></label>
</p>
<p>
<label>Employee Salary:<b>{this.props.Salary}</b></label>
</p>
</div>
}

const element=<Employee ID="101" Name="Sam" Location="Banglore"


Salary="12345"></Employee>
ReactDom.render(element,document.getelementByid('root'));

////////////////////////Htmlpage//////////////////////////////////

index.html:-

<!DOCYTYPE html>
<html>
<head>
</head>
<title>
</title>
<body>
<div id='root'></div>
</body>
</html>

/*--------Basic programming7 in React class componet(Display Data at


Department)----*/

////////////////////////Reactpage/////////////////////////////////

index.js:-.

import React from 'react';


import ReactDom from 'react-dom';

class Employee extends React.componet


{
render()
{
return
<div>
<h2>Employee Details.....</h2>
<p>
<label>Employee Id:<b>{this.props.ID}</b></label>
</p>
<p>
<label>Employee Name:<b>{this.props.Name}</b></label>
</p>
<p>
<label>Employee location:<b>{this.props.Location}</b></label>
</p>
<p>
<label>Employee Salary:<b>{this.props.Salary}</b></label>
</p>
</div>
}
class Department extends React.componet
{
render()
{
return
<div>
<h2>Department Details.....</h2>
<p>
<label>Department Name:<b>{this.props.DepatName}</b></label>
</p>
<p>
<label>Head Name:<b>{this.props.HeadName}</b></label>
</p>
</div>
}
const element=<Employee ID="101" Name="Sam" Location="Banglore" Salary=12345
DepatName="Java" HeadName="Pragim Technology"></Employee>
ReactDom.render(element,document.getelementByid('root'));

////////////////////////Htmlpage//////////////////////////////////

index.html:-

<!DOCYTYPE html>
<html>
<head>
</head>
<title>
</title>
<body>
<div id='root'></div>
</body>
</html>

/*------------Basic programming7 Introduction to stack in React-----------*/

////////////////////////Reactpage/////////////////////////////////

import React from 'react';


import Reactom from 'react-dom';

classEmployee extends React.Componet(state=[counter:0]; addEmployee=()=>

{
this.setstate([counter: this.state.counter+1]);
//this.counter=this.counter+1;
//alert('Adding a new Employee');
//alert('Add Employee Button is clicked'+this.counters+'times');
}
render()
{

return <div>
<h2>Welcome to Employee componet...</h2>
<p>
<label>Add Employee Button is clicked:<b>{this.state.counter}</b></label>
</p>
</div>
}
}
const element=<Employee></Employee>
ReactDom.render(element,document.getelementByid('root'));

////////////////////////Htmlpage//////////////////////////////////

index.html:-

<!DOCYTYPE html>
<html>
<head>
</head>
<title>
</title>
<body>
<div id='root'></div>
</body>
</html>

/*------------Basic programming7 Introduction to stack in React(Button)-----------


*/

////////////////////////Reactpage/////////////////////////////////

import React from 'react';


import Reactom from 'react-dom';

class countCharcters extend React.componet


[
constructor(prpos)
{
super(props);
this.state={"message:"};
onmessage change(text)
this.state

You might also like