React JS- Conceptual discussion

So, you might have heard of React js and you may already know that it is a javascript library that is mainly used for making user interfaces. It can be used for making mobile applications or single-page applications. Today, we will talk about some important concepts of react.

So, what is a single-page application? When I first started learning ‘react’ I used to think that react can only create an application of one page. Actually, I was wrong. It is called a single-page application because it behaves like a single page although it contains multiple pages. React allows developers to create large web applications that can change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple. It works only on user interfaces in the application.

Components:

So, what is the first thing you need to know if you are going to learn React JS? Have you heard of react components? Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML via a render() function. You need to know about this.

Components come in two types, Class components and Function components, in this tutorial we will concentrate on Class components. In this article, we will talk about functional components. Functional Components are also known as Stateless component and class components are also known as Stateful component

Functional Component or Stateless Component:

• It is simple javascript functions that simply returns html UI
• It is also called “stateless” components because they simply accept data and display them in some form that is they are mainly responsible for rendering UI.
• It accept properties(props) in function and return html(JSX)
• These can be typically defined using arrow functions but can also be created with the regular function keyword.

function Car() {
  return <h2>I have a very big Car!</h2>;
}

Props

Props are arguments passed into React components. Props are passed to components via HTML attributes. React Props are like function arguments in JavaScript and attributes in HTML. If you need to pass data from one component to another component then you are going to need props. Let’s see an example

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Mr. X" />     
      <Welcome name="Mr. Y" />      
      <Welcome name="Mr. Z" />    
    </div>
  );
}

Here you can see, we are reusing the “Welcome component” by sending different props value. This is just like sending arguments to a function.

React Hooks

A Hook is a react function that lets you use state and react features from a function-based component. Hooks let you always use functions instead of having to constantly switch between functions, classes, higher-order components, and render props. But remember hooks only works in functional components. It doesn’t work in class-based components. Now we are going to talk about some very useful react hooks.

useState()

useState is a Hook that allows you to have state variables in functional components. You pass the initial state to this function and it returns a variable with the current state value (not necessarily the initial state) and another function to update this value.

const [state, setState] = useState(initialState);

useEffect()

By using this Hook, you tell React that your component needs to do something after render.

useEffect(() => {    
 //code to fetch data
 }, []);

Generally, the second parameter in the square bracket controls useEffect. Passing no 2nd argument causes the useEffect to run every render. Then, when it runs, it fetches the data and updates the state. This is a very useful hook but remember, you can’t use it in class-based components like any other hooks.

useParams()

A simple yet effective hook. When you need to pass something in the URL and get the parameters from the URL, you can use useParams(). it will return the parameters object in key-value pair.

let { prm } = useParams();

The “prm” object will obtain the parameters from the URL.

useHistory()

Another simple yet very useful hook that helps you navigate your react app. useHistory provides access to the history prop in React Router. Refers to the history package dependency that the router uses. You can use routing functions such as push, replace to change directory. Let’s see an example-

const history = useHistory();
history.push("/home");

this code will redirect your react app to the home directory. As simple as that.

In this article, we tried to go through some core concepts of React that you need to know if you want to learn React. The primary goal of this article is to give you a simple overview of react core concepts. If you want to dive deep into react then at least you should first know the name of the things you are going to learn and this is what I intended to do in this article. Thanks for your valuable time to go through this article.