All The Fundamental React.js

A better introduction to the most powerful UI library. 10 things you need to know about React.

1.Use React Hooks In Functional Components

Hooks were introduced in React latest version and are a huge boost for functional programming within React. With Hooks, you can, and should, make use of functional components instead of class components.

example:

2.Conditionals in JSX

JSX is really cool and one of the main features of React. JSX improve our capabilities we can make use of the following trick.

{return loginattempts <maxAttempts ? <MyComponent/> : null}

3.Higher-Order Components

Higher-Order Components (HOC) are an advanced React concept used to abstract shared code to make it accessible where needed. The concept is similar to higher-order functions in JavaScript — HOCs take components and return components but they are not components themselves; they are functions. On an abstract level it looks like this

4.Styled-Components

Styled-Components belong effectively to the CSS-in-JS libraries that abstract the CSS to component level, using just JavaScript to describe styles. They can be created via the ES6 Template Literal Notation using back-ticks like this.

5.Props

Part of the benefits of using Interfaces is that you’re able to enforce the properties of your props for your components.Understanding Render Props at a conceptual level is very easy. Let’s forget about React for a minute and look at things in context of vanilla JavaScript.

We have a function that calculates the sum of two numbers. At first we just want to log the result to console. So, we designed the function like this

Const sum =(a ,b) =>{

const result =a+b ;

console.log(result);

6.Conditional rendering

The if-else statements can cause wasted re-renders in React. It might not be perceived in small to medium apps, but the performance drag will be quite noticeable in large apps with hundreds or thousands of components.

example:

render() {
if(props.showX) {
return (
<X />
<Y />
<Z />
)
}
return (
<Y />
<Z/>
)
}

7.Ternary operator

Ternary operator is a shorter form of the ‘if-else’ condition. The first part states the condition, the second part is the returned value if true and the last part is the returned value if false.

example:

let cond = truefunction App() {
return (
{cond ?
<div>If Rendering</div>
:
<div>Else Rendering</div>
}
)
}

8. Render

This is a Particularily good tool when you’re trying to debug the behavior of your components. Trying to understand when they get rendered, or re-rendered when they shouldn’t is not always straightfoward, specially if you’re just starting with React.

9. Return Null

We can set a component to return a null value instead of a JSX expression so that it would be evaluated but will not render anything.

function App(props) {
if(props.noRender)
return null

return (
<div>App Component</div>
)
}

10.Set Defaults

Setting defaults is yet another way to make your reusable components simple and easy to use. Customizing your reusable components should be your component-consumers prerogative, not a mandate/

Thank you…..