10 React Fundamental Concept You Should Know
React is a JavaScript library. We can make single page application with react so easily. With react we create a virtual DOM. As a bigger you should some fundamental concept which makes you more comfortable to be a react developer.
1. What is react
React is a JavaScript library. This library develop by Facebook. With react we can make single page application. React is very popular because of it’s easiest ways. In react application we write html code with JavaScript. React application created base with components. You can think components just like function. We can reuse components as much as we want. It’s makes the react so fun.
2. How react work?
React makes virtual dom to manipulate code. We write many piece of code with component and then react make all of the code into single application. React changes the code what need to be change only.
Think a counter you have added on the ui with react and the counter changing every 1s. So what is happening every 1s into your code? The element where you put your counter changing code only that code is changing and everything will be same as before. This system is called diffing. This is possible for the virtual dom.
3.what is jsx
JSX means JavaScript XML. this is JS extension. jsx is not html code. So when we write something inside the jsx file is is not shown the ui directly. We used reactdom.render to show jsx file.
4.Function and class Component
There are two types of components in react. One is functional components and another is class components. Bellow there are two photo about photo showing functional component and bellow photo is showing class component.
Both will render same thing but there is some different in usage. React class components basically used before react hooks coming in 2019. Now functional component usage is more comfortable because of react hooks and state management system.
5. Components and elements
We sometime make mistake with these two word. Components is the total code which we write inside a jsx file but elements is only things which return get return from the jsx file. In this photo only red mark code is element but component is the hole file
6. Hooks
The most interesting and useful things in react. There are some hooks in react . Hooks start with the word ‘use’. Let’s talk about a hook which name useState and it use to change the state.
Look at the component and the output image. I have useState hook in the component. Here useState basically a function and it return two value into one array . Here count has a initial value 0 and we can change this value using setCount function. We have created a button with onClick event handler. When we click the button it will increase the count by one. It’s so easy to do with react hook.
7. Event Handler
There are some event handler in react like: onClick, onChage, onBlur, onFocus etc. The important things is to remember the camel case system. In html code we write onclick but in react we write onClick. like we use className in react instead of class.
8. Data Flow
Data goes down from parents components to child components. We can send data from parent component from child component using ‘props’. There is another system sending data all the components using useContext hook. hooks are really awesome.
9. ternary operator
React use ternary operator for conditional rendering. It is very useful. React hooks with ternary operator makes the react app awesome.
10. why react is called react?
React is called react because it’s react on every interaction :).
That’s it for today. we will talk again with this topic on broad discussion.
