Introduction to React JS

Pros

Cons

React Components

function FormInput(props) {const [inputType] = useState(props.type)const [inputValue, setInputValue] = useState('')function handleChange(event){setInputValue(event.target.value);if(props.onChange) props.onChange(inputValue)}return (<><input type={inputType} value={inputValue} name="input-form" onChange={handleChange} class="inputclass"/></>);}export default TextInput;

Functional Components

function Welcome(props) {return <h1>Hello, {props.name}</h1>;}export default Welcome;
import { useState } from "react";function FavoriteColor() {const [color, setColor] = useState("blue");}
useEffect(() => {
class Car extends React.Component {constructor(props) {super(props);this.state = {brand: "Ford"};}render() {return (<div><h1>My Car</h1></div>);}}

Props in React

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store