Getting Started (React Notes - 1)

My ReactJS learning journey. I take this notes for myself.

Live Server Installation #

Install live server globally on your computer. You won't want to refresh page manually on every change.

npm i -g live-server

Hello React! #

Add ReactJS with CDN links to your new shiny project. We just want to write 'Hello React' on page.

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

Create template element.

<div id="root"></div>
// JSX - JavaScript XML
let root = document.getElementById("root");

// JSX Syntax
// let template = <h1>Hello React! First App</h1>

// Compiled Original Syntax
let template = React.createElement(
'h1',
null,
'Hello React! First App'
);

// ReactDOM
ReactDOM.render(template, root);

Babel Installation & Usage #

We need Babel to use modern JavaScript features. Create package.json file. Install cli and presets. Configure babel and run commands.

  1. Create package.json and install babel packages locally.
npm init -y
npm install --save-dev @babel/core @babel/cli
npm install --save-dev @babel/preset-env
npm install --save-dev @babel/preset-react
  1. Create .babelrc file
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
  1. Create Folder Structure
-public
-scripts
-app.js
-index.html
-src
-app.js
  1. package.json Scripts
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "live-server public",
"babel": "npx babel src/app.js --out-file=public/scripts/app.js --watch"
}
  1. Run commands on Terminal
npm run start
npm run babel

JSX Expressions #

// JSX - JavaScript XML
let root = document.getElementById("root");


let product = {
name: "Huawei P20 Pro",
price: {
value: 5000,
currency: "USD"
},
stock: false
};

function formatPrice(p) {
return p.price.value + ' ' + p.price.currency;
}

let productCard = (
<div>
<h1>Name: {product.name}</h1>
<p>Price: {formatPrice(product)}</p>
<p>Stock: {product.stock ? "VAR" : "YOK"}</p>
</div>
);

// ReactDOM
ReactDOM.render(productCard, root);

Conditional Statements #

// JSX - JavaScript XML
let root = document.getElementById("root");

let product = {
name: "Huawei P20 Pro",
price: {
value: 12000,
currency: "GBP"
},
description: "Fingerprint (under display, optical), accelerometer, gyro, proximity, compass, color spectrum",
stock: false,
colors: ["red", "green", "blue"]
};

function getDescription(description) {
if(description){
return <p>Description: {description}</p>;
} else{
return 'no desc';
}
};

let productCard = (
<div>
<h1>Name: {product.name}</h1>
{(product.price.value && product.price.value>5000) && <p>Price: {product.price.value}</p>}
<p>Stock: {product.stock ? "VAR" : "YOK"}</p>
{getDescription(product.description)}
{(product.colors.length>0 ? "There are options" : "no options")}
</div>
);

// ReactDOM
ReactDOM.render(productCard, root);

Events & Data Binding #

// JSX - JavaScript XML
let root = document.getElementById("root");

let number = 0;
let btnAddClass = "button-increase";
let btnDecreaseClass = "button-decrease";

let addOne = () => {
number++;
renderApp();
}
let removeOne = () => {
number--;
renderApp();
}

function renderApp() {
let template = (
<div>
<h1>Number: {number}</h1>
<button type="button" id="increase" className={btnAddClass} onClick={addOne}>+1</button>
<button type="button" id="decrease" className={btnDecreaseClass} onClick={removeOne}>-1</button>
</div>
);

ReactDOM.render(template, root);
}

function tick() {
var element = (
<div>
<h2>time is {new Date().toLocaleTimeString()}</h2>
</div>
);

ReactDOM.render(element, root);
}
setInterval(tick, 1000);
Previous Post

Understanding JavaScript Promises

Many people struggle with understand how Promises work (including me). Promises are fundamental to asynchronous coding in JavaScript. In this post we try to understand promises with basic examples.

Read article
Next Post

JSX Arrays and Forms (React Notes - 2)

My ReactJS learning journey. I take this notes for myself.

Read article