React Tutorial : Basic Form of React Code

Basic Form of React. import React, { useState } from ‘react’; // JS // const input = document.getElementById(‘myText’); // const inputValue = input.value // React // value, onChange const ControlledInputs = () => { const handleSubmit = (e) => { e.preventDefault(); console.log(‘Hello World…’); } return <> <article> <form className=”form”> <div className=”form-control”> <label htmlFor=”firstName”> Name : […]

React: Create Simple Counter Use Function, Inline CSS and Call function in React

React: Create Simple Counter Use Function, Inline CSS and Call function in React   import React, { useState } from ‘react’; const UseStateCounter = () => { const [value, setValue] = useState(0); const reset = () => { setValue(0); } return <> <section style={{ margin : ‘4rem 0’}}> <h2>Regular Counter</h2> <h1>{value}</h1> <button className=”btn” onClick={() => […]

Create First React Component

import React from ‘react’; import ReactDom from ‘react-dom’; function Greeting(){ return( <div> <h4> this is john and this is my first componenet; </h4> </div> ); } ReactDom.render(<Greeting />, document.getElementById(‘root’)); Create element by React.createElement.   import React from ‘react’; import ReactDom from ‘react-dom’; const Great = () => { return React.createElement(‘h1’,{}, ‘Hello this element create by […]

React Babel with React Fragment Create Page Elements

HTML Code <!doctype html> <html> <head> <title>Page Title</title> <meta charset=”UTF-8″> <meta name=”viewport” content=”initial-scale=1.0″> </head> <script crossorigin src=”https://unpkg.com/[email protected]/umd/react.development.js”></script> <script crossorigin src=”https://unpkg.com/[email protected]/umd/react-dom.development.js”> </script> <script src=”https://unpkg.com/[email protected]/babel.min.js”></script> <body> <div id=”root”></div> </body> </html> React Babel JavaScript Code <script type=”text/babel”> const main = <React.Fragment> <main> <h1>My Blog</h1> <h2>H2 Heading of Page</h2> <article> <h2>My First Blog</h2> <p>This is Content of paragraph</p><p>This is […]

React Tutorial : Create Article DIV, Heading, Sub Heading & Paragraph

<!doctype html> <html> <head> <title>Page Title</title> <meta charset=”UTF-8″> <meta name=”viewport” content=”initial-scale=1.0″> </head> <script crossorigin src=”https://unpkg.com/[email protected]/umd/react.development.js”></script> <script crossorigin src=”https://unpkg.com/[email protected]/umd/react-dom.development.js”></script> <body> <div id=”root”></div> <script type=”text/javascript”> const articleHeading = React.createElement(‘h2’, null, ‘My First Blog Post’); const paragraph = React.createElement(‘p’, {className : ‘text’}, ‘This is Paragraph Text Contnet Here of MyFreeOnlineTools’); const article = React.createElement(‘article’, null, articleHeading, paragraph ); […]

React Basic : Create A Button with React

<!doctype html> <html> <head> <title>React – Create Button</title> <meta charset=”UTF-8″> <meta name=”viewport” content=”initial-scale=1.0″> </head> <script crossorigin src=”https://unpkg.com/[email protected]/umd/react.development.js”></script> <script crossorigin src=”https://unpkg.com/[email protected]/umd/react-dom.development.js”></script> <body> <div id=”root”></div> <script type=”text/javascript”> const button = React.createElement( ‘button’, { type:’button’}, ‘Save’ ); ReactDOM.render(button, document.getElementById(‘root’)); </script> </body> </html> Rajvinder SinghLive in Delhi, Working in Gurgaon as Web Designer and Graphic Designer. Developed and Design […]