10 Important Topics in React

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

*React is just a library. Like another framework like Angular or Ember React is not a framework, the framework comes with lots of built-in rules and regulations you cannot go beyond them but using react for the front end you have lots 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 :

*JSX is blending a bit of JavaScript with a bit of HTML — really an extension to JavaScript. It lets you streamline your code by mixing the two when appropriate and is used by React.createElement to produce React elements more efficiently.
*When looking at React examples you’ve probably seen JSX in action already.
But React code can be written in plain JS too:

3. It’s All about JavaScript :

Many popular frameworks use templating languages for operations like the one above. Every framework comes with its own. So every time you want to use a framework, you need to learn a new templating language, quirks, and drawbacks. To generate markup dynamically in React you also use JS:

4. It’s declarative :

In this <select> example you are not using for loop to manually create a
mapped collection. You are not saying what should be done just how it should look like.

5. How Data goes down :

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

6. State Management :

The state is an important topic of reaction. when we need to change a
specific property value… like we need to update things. we have to use state. using state life became easier.
Imagine you have a logged-in user state there you have a value logged in user and its initial value is false. when a user logged in somehow you want to change the status of the logged-in user to true...
how will you do that ?? that’s where comes the state

7. How the event goes up :

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

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 the login page then we can use only one state that only keeps our login user info.
*Like the login page in the registration page we can use our state as a
small one by using the only user name, password, and sometimes we call to keep him some other information.
*if we need a big state instead of reacting state we can use redux state management.

9. Default Props :

*Default props is an interesting topic in reacting and it is very handy. when we need a specific prop 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 below 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 prop which has a blue color property.

*when we set a default value like this color blue, we don’t pass any other color, it will take that color as default.

10. Conditional rendering :

In react application, we cannot use if-else or any other conditional rendering .but rather than use another 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 below, and you will see that I use an h1 and
inside that h1 I used curly braces and inside that curly braces
I used a ternary operator and set a value depending on that condition.