REACT JS
React (also known as React.js or ReactJS ) is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It can also be described as a declarative, efficient, and flexible JavaScript library for building user interfaces. You need to know HTML, CSS and most important; JavaScript before embarking on React.
Initial release date: 29 May 2013
Platform: Web platform
Developer(s): Meta and community
Original author(s): Jordan Walke
The main purpose of REACT
One of the main benefits of using React JS is its potential to reuse components and essentially used for building interactive user interfaces and web applications quickly and efficiently
Ways to add react to an application or application of react:
there are several ways to add react to an application;
Add React to a Website
You don’t have to build your whole website with React. Adding React to HTML doesn’t require installation, it means that you have an already existing website and will now create a component React library for it.
Steps:
Step 1; Add a root HTML tag
Step 2; Add the script tags
Step 3; Create a React component
Step 4; Add your React component to the page
Step 5; Minify JavaScript for production
Create a new React App
This is more like a tool to create a react application, it provides a comfortable environment for practicing React, and is a unique way to start building a new application in React.
It sets up your development environment so that you can use the latest JavaScript features, and provides a nice developer experience. You’ll need to have Node >= 14.0.0 and npm >= 5.6 on your machine. To create a project, run this on your terminal:
npx create-react-app my-app(name of app)
cd my-app
npm start
This automatically creates a JavaScript library on which your application depends on, your workspace is located in one of the folders called "src" which includes js files and another folder "public" which equally holds your html file to display the website
Basic features and concepts of React
React Element
It is the basic building block in a react application, it is an object representation of a virtual DOM node.
An element describes what you want to see on the screen:
Syntax:
const element = <h1 > Hello, world</ h1 >;
The part of React that makes sense to me:
React Component
It is independent and reusable. It returns the virtual DOM of the element. One may or may not pass any parameter while creating a component. Basically, a react component is either a function or class that returns JSX, now JSX stands for JavaScript XML. JSX allows us to write HTML in React, and JSX makes it easier to write and add HTML in React. A component can be further described into
functional components and class components.
Functional component
A React functional component is a simple JavaScript function that accepts props and returns a React element. This component is defined as a function and makes use of a hook since it can not make use of a state
Syntax:
function name(){
return {
<div>Hi<div>
}
}
Class component
this kind of component is defined as a class and is able to make use of state
Syntax:
class Hello extends React. Component
render () {
return < h2 > Hi </
}
}
Props and state in React:
Props- How we can modify a component by props(properties)
This means that you can alter the properties of a component in other words, it's used to change the value of the properties of a component by the keyword "props"
Syntax:
Function app(props){
return {
}
}
//When rendered, it takes any value it's given;
<app name=("jachx")>
State in React
the state is an instance of react component class that can be defined as an object of a set of observable properties that control the behavior of the component. it is also a built-in react object that is used to contain data or information about the class component.
Syntax:
class Car extends React. Component
//Specify the state object in the constructor method:
constructor ( props ) {
super( props);
this . state = { brand: "Ford" };
}
render () {
return (
< div >
< h1 > My Car </ h1 >
//Using the state Object
//Refer to the state object anywhere in the component by using the
//this.state. propertyname
//syntax:
< h1 > My { this . state. brand}
< p >
It is a { this . state. col
{ this . state. model}
from { this . state . year } .
</ p >
</ div >
);
}
}
Changing the state Object;
To change a value in the state object, use the "this.setState() method".
When a value in the state object changes, the component will re-render, meaning that the output will change according to the new value(s). Always use the setState() method to change the state object, it will ensure that the component knows it's been updated and calls the render() method (and all the other lifecycle methods).
Example:
Add a button with an onClick event that will change the color property:
syntax:
class Car extends React. Component
constructor ( props ) {
super( props);
this . state = {
brand : "Ford" ,
model : "Mustang" ,
color : "red" ,
year : 1964
};
}
changeColor = () => {
this . setState ({ color: "blue" }
}
render () {
return (
< div >
< h1 > My { this . state. brand}
< p >
It is a { this . state. col
{ this . state. model}
from { this . state . year } .
</ p >
< button
type =" button "
onClick={ this . changeColor
\> Change color </ button >
</ div >
);
}
}
difference between props and state
Props are immutable i.e. once set the props cannot be changed, while State is an observable object that is to be used to hold data that may change over time and to control the behavior after each change.
States can be used in Class Components, and Functional components with the use of React Hooks (useState and other methods) while Props don’t have this limitation
Conditional rendering in React
The concept of conditional rendering says that you can render a particular JSX or element based on conditions, there are several ways to archive this such as using the if conditional statement just like in JavaScript and using the logical operator "&&" which will only be shown below
Syntax:
//A react element
<P>welcome</p>
//A variable above the return function
const login =false;
//We now create a conditional rendering in the return method
{
Login && <p>welcome</p>
}
//This message will only display if login is set to "true"
Keys
A “key” is a special string attribute you need to include when creating lists of elements in React. Keys are used in React to identify which items in the list are changed, updated, or deleted. In other words, we can say that keys are used to give an identity to the elements in the lists.
Syntax:
const numbers = [ 1, 2, 3, 4, 5]
//An error will occur in our console because a key is not added
numbers.map(items=>
<li>{number}</li> );
//By adding a key, every item is now unique
numbers.map(items=>
<li key = {index}>
{number}
</li>);
Assuming we have two identical items in the list, this will equally return an error in our console, so we go further by applying another unique key
Syntax:
const numbers = [ 1,1, 2, 3, 4, 5]
numbers.map(items=>
<li key = {'numbers-&(index)}>
{number}
</li>);
Hooks
React Hooks are simple JavaScript functions that we can use to isolate the reusable part from a functional component. Hooks can be stateful and can manage side effects.
Creating a usestatehook;
const (variable, setvariable)=usestate(value)
Details;
Variable=the variable that holds the value/data
Setvariable=function that update the value taken in or to manage states
Syntax:
function Example() {
// Declare a new state variable, which we'll call "count"
const [ count, setCount ] =
useState (0 );
return (
< div >
< p > You clicked { count} times</ p >
< button onClick={() =>
setCount (count + 1 )}>
Click me
</ button >
</ div >
);
}
A React application to help you understand more about React.js
Hosted application:
jachvictor.github.io/Todo-list-react-app
github repository:
https://github.com/jachvictor/Todo-list-react-app.git
Conclusion
React Js offers several benefits including fast performance, scalability, and ease of learning, which is why most people prefer to React over other JavaScript libraries. These only cover the fundamentals of React js partially, there's still more to learn.