JavaScript For Fun: React

A Small Introduction Of React

JavaScript very well for UI but React sends it to another level. Day by day React becomes one of the most demanding things in the IT sector.

Is React A Framework?

React actually not a JavaScript framework, it is a small library. So to complete something with react we need some third-party library. But React does one thing well and it does tremendously. That is building user interface. So what are the features of a library? They are small and have no limitation, mainly for specific work like UI, with no built-in rules.

Components

In React, components look like a function. Components are reusable, composable, and stateful. In the function we input something then it regenerates it and sends us the output. Component will do the same things. We can divide components into 4 types. Repeating in pattern, container components, big element breakdown, and single-unit components. But we should remember that the Component must be tart with a capital letter.

const Test = () => {
return (
    <h1>Hello</h1>
  );
};

JSX

JSX or JavaScript Extension is a react extinction that looks like HTML but not HTML. It is an HTML-like syntax that can coexist with JavaScript and React. JSX can offer to type HTML as well as JavaScript at the same file, then the preprocessor converts those expressions to actual JavaScript code.

//JSX
<h1>Hello World</h1>
//Actually looks like
React.createElement("h1", null, "Hello World");

Here it sends three arguments one is the element, two is the arguments, and three is the contents.

Nested Element In JSX

To use multiple elements then we should wrap them into one container element.

import React from 'react';
const Test = () => {
return (
    <div>
       <h1>Hello</h1>
       <p>How are you ?</p>
    </div>
  );
};
export default Test;

JSX Style

We can also add style to the function and connect it to the JSX. But by implementing style we have to use camel case text.

const test = () => {
    const testStyle = {
         border: '1px solid red',
         margin: '10px'
 }
return (
     <div>
        <h1 style={testStyle}>Hello</h1>
        <h1>How are you ?</h1>
     </div>
 );
};

Props

Props is the short version of Properties. We know that HTLM has assigned attributes like id, React uses it with props. Props can send data from one component to another component.

<Car name = 'Toyota' cost = '10000'></Car>
const Test = (props) => {
return (
    <div>
      <h1>{props.name}</h1>
      <h1>{props.cost}</h1>
    </div>
  );
};

Hooks

A hook is a type of special function that “hook into” React state and lifecycle features from one function components. Some of the hooks carrying multiple data (useState), some of carrying single data(useParams), some of them used for data load(useEffect). Hooks basically used in a few components without rewriting any existing code.

State Hook

useState should be used only inside functional components. useState is the way if we need an internal state and don't need to implement more complex logic such as lifecycle methods.

const [count, setCount] = useState();

useState can return an array or object that contain two parameters where the first one count is the state name and setCount is allowing us to update the state and set the state.

import React, { useState } from 'react';
const Test = () => {
    const [count, setCount] = useState(0);
    const handleIncrease = () => setCount(count+1);
    const handleDecrease = () => setCount(count-1);
return (
    <div>
       <h1>Test Count {count}</h1>
       <button onClick={handleIncrease}>Increase</button>
       <button onClick={handleDecrease}>Decrease</button>
    </div>
  );
};
export default Test;

Effect Hook

useEffect basically used for fetching the data or changing DOM manually from react components. useEffect adds the ability to perform side effects from a function component.

import React, { useState, useEffect } from 'react';
const Test = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {    
       document.title = `You clicked ${count} times`; 
  });
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}
export default Test;
import React, { useState, useEffect } from 'react';
const Test = () => {
  const [user, setUser] = useState(0);

  useEffect(() => {
       fetch('url)
       
       .then(response => res.Json())
       .then(data => setUser(data))
});
return (
    <div>
       //code
    </div>
  );
}
export default Test;