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.

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.

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.

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.

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.

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.

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.

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.

I am a front-end developer who loves coding, feel joy to learn, just need a cup of tea and ready for new journey.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store