tutorial101 is the one place for high quality web development, Web Design and software development tutorials and Resources programming. Learn cutting edge techniques in web development, design and software development, download source components and participate in the community.
An event is an action that could be triggered as a result of the user action or system generated event. For example, a mouse click, loading of a web page, pressing a key, window resizes, and other interactions are called events.
React events are written in camelCase syntax:
onClick instead of onclick.
React event handlers are written inside curly braces:
onClick={shoot} instead of onClick="shoot()".
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
//src/App.js
import React from 'react';
//React Events
class App extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
//this Toggle component renders a button that lets the user toggle between “ON” and “OFF” states
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
export default App;
Example 6src/App.js
//src/App.js
import React from 'react';
//React Events
class App extends React.Component {
handleClick() {
console.log('this is:', this);
}
render() {
// This syntax ensures `this` is bound within handleClick
return (
<button onClick={() => this.handleClick()}>
Click me
</button>
);
}
}
export default App;
//src/App.js
import React from 'react';
//React Lifecycle
class App extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
//The getDerivedStateFromProps method is called right before the render method:
//static getDerivedStateFromProps(props, state) {
// return {favoritecolor: props.favcol };
//}
//The componentDidMount() method is called after the component is rendered.
componentDidMount() {
setTimeout(() => {
this.setState({favoritecolor: "yellow"})
}, 1000)
}
//getDerivedStateFromProps method This is the first method that is called when a component gets updated.
//static getDerivedStateFromProps(props, state) {
// return {favoritecolor: props.favcol };
//}
//shouldComponentUpdate() method you can return a Boolean value that specifies whether React should continue with the rendering or not.
//shouldComponentUpdate() {
// return true;
//}
//changeColor = () => {
// this.setState({favoritecolor: "blue"});
//}
//getSnapshotBeforeUpdate() method you have access to the props and state before the update, meaning that even after the update, you can check what the values were before the update.
getSnapshotBeforeUpdate(prevProps, prevState) {
document.getElementById("div1").innerHTML =
"Before the update, the favorite was " + prevState.favoritecolor;
}
//componentDidUpdate method is called after the component is updated in the DOM.
componentDidUpdate() {
document.getElementById("div2").innerHTML =
"The updated favorite is " + this.state.favoritecolor;
}
render() {
return (
<div>
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
<button type="button" onClick={this.changeColor}>Change color</button>
<div id="div1"></div>
<div id="div2"></div>
</div>
);
}
}
export default App;
Example 2 src/App.js
//src/App.js
import React from 'react';
//React Lifecycle
class App extends React.Component {
constructor(props) {
super(props);
this.state = {show: true};
}
delHeader = () => {
this.setState({show: false});
}
render() {
let myheader;
if (this.state.show) {
myheader = <Child />;
};
return (
<div>
{myheader}
<button type="button" onClick={this.delHeader}>Delete Header</button>
</div>
);
}
}
//componentWillUnmount method is called when the component is about to be removed from the DOM.
class Child extends React.Component {
componentWillUnmount() {
alert("The component named Header is about to be unmounted.");
}
render() {
return (
<h1>Hello World!</h1>
);
}
}
export default App;
Components are like functions that return HTML elements.
React Components
Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML via a render() function.
Components come in two types, Class components and Function components, in this tutorial we will concentrate on Class components.
src/index.js
//src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
src/app.js
import React from 'react';
//Create a Class Component
//class App extends React.Component {
// render() {
// return <h2>Hi, I am a Car!</h2>;
// }
//}
//Function Component
//function App() {
// return <h2>Hi, I am also a Car!</h2>;
//}
//Component Constructor
//class App extends React.Component {
// constructor() {
// super();
// this.state = {color: "red"};
// }
// render() {
// return <h2>I am a {this.state.color} Car!</h2>;
// }
//}
//Components in Components
class Car extends React.Component {
render() {
return <h2>I am a Car!</h2>;
}
}
class App extends React.Component {
render() {
return (
<div>
<h1>Who lives in my Garage?</h1>
<Car />
</div>
);
}
}
export default App;
//
// ContentView.swift
// swiftuidev
//
// Created by Cairocoders
//
import SwiftUI
struct ContentView: View {
let toyota = ["Corolla","Camry","Yaris"]
let honda = ["HR-V","Odyssey","Mobelio"]
var body: some View {
NavigationView {
List {
Section(header:
Text("Toyota")) {
ForEach(0 ..< toyota.count) {
Text(self.toyota[$0])
}
}
Section(header:
HStack {
Image(systemName: "car")
Text("Honda")
}
, footer: Text("This is a example list of a few car brands").font(.footnote)) {
ForEach(0 ..< honda.count) {
Text(self.honda[$0])
}
}
} .navigationBarTitle("Cars")
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
SwiftUI Spacer sample aligned parent view
Spacers can be used to push align views horizontally or vertically aligned at the top-left, middle and bottom-toght of their parent view ContentView.swift
React.js how to install get started, classes render html and JSX
React (also known as React.js or ReactJS) is a free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.
1. C:\reactdev>npm install -g create-react-app
2. C:\reactdev>create-react-app myreactdev
3. C:\reactdev>cd myreactdev
4. C:\reactdev\myreactdev>npm start
5. http://localhost:3000/
reactdev\myreactdev\src\index.js
////C:\reactdev\myreactdev\src\index.js
import React from 'react';
import ReactDOM from 'react-dom';
//Render HTML
const myelement = (
<table>
<tr>
<th>Name</th>
</tr>
<tr>
<td>John</td>
</tr>
<tr>
<td>Elsa</td>
</tr>
</table>
);
ReactDOM.render(myelement, document.getElementById('root'));
reactdev\myreactdev\src\index.js
//C:\reactdev\myreactdev\src\index.js
import React from 'react';
import ReactDOM from 'react-dom';
//JavaScript XML
const myelement = <input type="text" />;
ReactDOM.render(myelement, document.getElementById('root'));
