What is React?

Setup

INDEX.HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- THE REACT CDN LINKS -->
<script
crossorigin
src="https://unpkg.com/react@16/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
></script>
<!-- -------------------------- -->
<!-- THE BABEL CDN LINK -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"
integrity="sha512-kp7YHLxuJDJcOzStgd6vtpxr4ZU9kjn77e6dBsivSz+pUuAuMlE2UTdKB7jjsWT84qbS8kdCWHPETnP/ctrFsA=="
crossorigin="anonymous"
></script>
<!-- ------------------------------------ -->
<!-- YOU CUSTOM CODE TAGS -->
<script type="text/babel" src="app.js" defer></script>
<link rel="stylesheet" href="style.css" />
<!-- ----------------------------------------------- -->
</head>
<body>
<div id="app"></div>
</body>
</html>

APP.JS

// THE APP COMPONENT
const App = props => {
return <h1>Hello World</h1>
}
// REACTDOM RENDER FUNCTION INSERT THE APP AND ITS CHILDREN TO THE DOM
ReactDOM.render(<App />, document.getElementById("app"))

React Features Features

JSX

const pieceOfUI = true ? <h1>It's true</h1> : <h1> It's false </h1>

Interpolation

// THE APP COMPONENT
const App = props => {
const hello = "Hello World"
return <h1>{hello}</h1>
}
// REACTDOM RENDER FUNCTION INSERT THE APP AND ITS CHILDREN TO THE DOM
ReactDOM.render(<App />, document.getElementById("app"))

Components

//Hello World Component
const HelloWorld = props => <h1>Hello World</h1>
// THE APP COMPONENT
const App = props => {
const hello = "hello world"
return <HelloWorld />
}
// REACTDOM RENDER FUNCTION INSERT THE APP AND ITS CHILDREN TO THE DOM
ReactDOM.render(<App />, document.getElementById("app"))

Props

//Hello World Component
const HelloWorld = props => <h1>{props.words}</h1>
// THE APP COMPONENT
const App = props => {
const hello = "hello world"
const bye = "goodbye world"
return (
<div>
<HelloWorld words={hello} />
<HelloWorld words={bye} />
</div>
)
}
// REACTDOM RENDER FUNCTION INSERT THE APP AND ITS CHILDREN TO THE DOM
ReactDOM.render(<App />, document.getElementById("app"))

State

//Hello World Component
const HelloWorld = props => (
<div>
<h1>{props.words}</h1>
<button onClick={props.setter}>Click Me</button>
</div>
)
// THE APP COMPONENT
const App = props => {
const [hello, setHello] = React.useState("Hello World")
const [bye, setBye] = React.useState("Goodbye World")
return (
<div>
<HelloWorld
words={hello}
setter={() => {
setHello("cheese")
}}
/>
<HelloWorld
words={bye}
setter={() => {
setBye("cheese")
}}
/>
</div>
)
}
// REACTDOM RENDER FUNCTION INSERT THE APP AND ITS CHILDREN TO THE DOM
ReactDOM.render(<App />, document.getElementById("app"))

Bottom Line

Alex Merced is a Full Stack Developer, learn more about his work at AlexMercedCoder.com

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