10 Important Topics in React

5 min readNov 4, 2020

1. React is not a framework it’s a library.

like other framework as like Angular or Ember React is not a framework, framework comes with lot’s of built in rules and regulation you cannot go beyond them but using react for front end you have lot’s of control of your application.
React is all about flexibility, you can use much more third party tools while building react application.

2. All About Jsx

For beginner developer react is very good choice i should say, because i see a lot’s of developer this days learn basic html css before they learn the programming basics

because of the outcomes, when you will doing programming you see only a black console and some input output things . but you want to be a web developer you’re doing nothing with web still now. that’s where many people get frustrated, they want to see some output some visual output i must say. that’s why they learn html first writing some lines of output they can see their output in the browser window and they will pumped. that’s why jsx is important and jsx is some way easier for who did psd to html first.

it’ s look like wow. it’s all about html .. i knew this. and they don’t get scared and trying to cope with react .. that’s why jsx is important and it plays a vital role for being a react developer.

see how easy it is , we can write html code inside a javascirpt function.

3. It’s All about JavaScript

what you see in the above example is not like that. there is no html inside the functions . It’ s all about syntactic sugar. behind the scene their is no html in react application. behind the scene

see what i say …. under the hood React.creatElement () method create what we want . like DOM creation, document.createElement() our React.createElement() also create what order the react dom.

4. How Data goes down.

Data goes down means data flow from parent element to child element .
If we want to pass the data from our parent component to child component we have to pass as a props .
when we use a component inside another component then we can send some of the data into the child component

5. State Management

State is a important topics of react. when we need to change a specific property value… like we need to update things . we have to use state. using state life became more easier.
imagine you have a logged in user state there you have a value loggedInUser and it’s initial value is false. when a user logged in somehow you want to change the status of loggedInUser to true.. how will you do that ?? that’s where comes the state

6. How event goes up

Event goes up means event bubbling. event bubble is a important topics in react, how event are bubbling and why they are bubbling .
let’s say parent component needs to do a button click event and it will perform the button click event in parent element and get’s the data from the child element.
sounds like fishy but many many times you will do that in the future and it’s very helpful for the application. let’ s see the example.

7. working process of render

When a state is changed and need to update then it will do componentDidUpdate() and it will call the render function and will say that hey render i need to update so you must re-render again and then render will be re-render again.

when a state is changed and and render is re-render then child component will also re-render and will update if need any.

8. State Must be simple

when we use state , we need to keep our state as small as we can do. because if we make our state so big then it will be very tough to handle.
when we keep our state simple then we can easily handle our state ,like when we use a state in login page then we can use only one state that only keep our login user info.
like login page in the registration page we can use our state as a small one by using only user name, password , and sometimes we call keep his some other information.
if we need a big state instead of react state we can use redux state management

9. Conditional rendering in React

In react application, we cannot use if else or any other conditional rendering .but rather than use other conditional rendering we can user ternary operator rendering

inside a {} curly braces we can use our conditional rendering using ternary operator.
look at this example bellow , and you will se that i use a h1 and inside that h1 i used a curly braces and inside that curly braces i used a ternary operator and set a value depending on that condition.

10. Default Props

default props is a interesting topics in react and it is very handy. when we need a props that is specific and we don’t need to change that any time soon in that situation we can use default props
if i give an example like bellow that there is a button component and we want to give a default props color as blue. if u remember or if u use react-bootstrap then you must know that when you use a button like this <Button > or button class primary then that’s the use of default props their primary button has a default props which has a blue color property.