My ReactJS learning journey. I take these 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.
- 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
- Create
.babelrc
file
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
- Create Folder Structure
-public
-scripts
-app.js
-index.html
-src
-app.js
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"
}
- 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);