React JavaScript Library Fundamentals
React is a JavaScript library for building user interfaces. React was developed by Facebook and is especially optimized for large and complex applications.
React uses a “component” based approach. A component represents a specific part of a user interface. For example, a button could be a form field, or a menu item could be a component.
Components can be called by other components, such as other components and JavaScript functions. Components can have special functions specially designed to react to events such as user interactions or updating data.
React apps are a combination of JavaScript, HTML, and CSS. React improves performance by tracking component states and only updating components that change. React can also be used for mobile app development, which can also be used on other platforms such as React Native.
Some of the key features of React are:
JSX: React components are defined using JSX, an HTML-like language written within JavaScript code.
Virtual DOM: React uses a virtual DOM (document object model) to keep track of changing components. This allows only the changed components to be updated without having to reload the entire page.
Component Lifecycle: React components have a lifecycle that covers different phases such as creating, updating, or destroying a component.
React Hooks: Hooks are functions used to manage the states and properties of components.
React is an easy-to-learn library for those with JavaScript knowledge. React is supported by a large community, and a wealth of resources and documentation are available.
Let’s give examples of core React features
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React JavaScript Library Fundamentals</title>
</head>
<body>
<!-- container for app -->
<div id="root"></div>
<!-- load react -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<!-- react app -->
<script>
// it prevents the code we write from going outside the JavaScript standart rules
'use strict';
// this is react element
const e = React.createElement;
/**
* this is react component
*/
class LikeButton extends React.Component {
// run when the component is created
constructor(props) {
// assigning values to the variable of its superclass ( React.Component )
super(props);
// an object to hold the state information of this component
this.state = { liked: false };
}
// render is run once
render() {
// javascript expression to check if conditions are true
if (this.state.liked) {
return 'You liked this.';
}
// html content to display when rendering the component
return e(
// type | we create a button element
'button',
// props | run when the component is created like constractor
{ onClick: () => this.setState({ liked: true }) },
// conntent or other elements
'Like'
);
}
}
// the name of out html tag
const containerName = "root";
// it allow us to call an existing object in an html document
const domContainer = document.getElementById(containerName);
// allows you to create a root to display React components inside a browser DOM node
const root = ReactDOM.createRoot(domContainer);
// displays the react root in the DOM node
root.render(e(LikeButton));
</script>
</body>
</html>You can build it in a basic React project with Node.js
npx create-react-app fundamentalsJSX: JSX is a syntax for describing React components and has an HTML-like looking structure.
import React from 'react';
function App() {
return (
<div>
<h1>Hello World!</h1>
<p>Welcome to my React app.</p>
</div>
);
}
export default App;VirtualDOM:
React uses a virtual DOM to monitor changed components. This allows only the changed components to be updated without having to reload the entire page.
import React, { useState } from "react";
/**
* this is react component
*/
export default function CounterButton() {
// run when the component is created
// we used state and default value = 0
const [count, setCount] = useState(0)
// an increment function
function increment() {
setCount(count + 1);
}
// html content to display when rendering the component
return (
// conntent or other elements
<div>
<p>Count {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}Component Lifecycle:
React components have a lifecycle that covers different phases such as creating, updating, or destroying a component. This is useful when components are interactive.
import React, { Component } from "react";
/**
* this is react component
*/
export default class Timer extends Component {
// run when the component is created
constructor(props) {
// assigning values to the variable of its superclass ( React.Component )
super(props);
// an object to hold the state information of this component
this.state = { counter: 0, increment: props.increment };
}
// invoked immediately after a component is mounted
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
// invoked just before a component is dissembled and destroyed
componentWillUnmount() {
clearInterval(this.timerID);
}
// main function of this component
tick() {
// set current state
// normal function expressions
// this.setState(function (state, props) {
// return {
// counter: state.counter + props.increment
// }
// });
// Arrow function expressions is similar
this.setState((state, props) => ({
counter: state.counter + props.increment
}));
}
// render is run once
render() {
// html content to display when rendering the component
return (
// conntent or other elements
<div>
<p>Timer {this.state.counter}</p>
</div>
);
}
}
/**
* component default probs
*/
Timer.defaultProps = {
increment: 1
};Hooks are functions used to manage the states and properties of components. This allows components to be written more simply and simply.
import React, { useEffect, useState } from "react";
/**
* this is react component
* @param {*} props component default probs
* @returns Component
*/
export default function Timer2(props) {
// run when the component is created
// assigning values to the variable of its superclass ( React.Component )
const { increment } = props
// an object to hold the state information of this component
const [state, setState] = useState({ counter: 0, increment: increment })
// invoked immediately after a component is mounted
useEffect(() => {
const timerID = setInterval(
() => tick(),
1000
);
// invoked just before a component is dissembled and destroyed
return () => {
clearInterval(timerID)
}
})
// main function of this component
function tick() {
// set current state
// normal function expressions
// setState(function (state, props) {
// return {
// counter: state.counter + props.increment
// }
// });
// Arrow function expressions is similar
setState((state) => ({
counter: state.counter + increment
}));
}
// html content to display when rendering the component
return (
// conntent or other elements
<div>
<p>Timer {state.counter}</p>
</div>
);
}
/**
* component default probs
*/
Timer2.defaultProps = {
increment: 1
};These examples show a few examples of React core features. Of course, React has other features and these examples are just a starting point.
