How To Do In React Js

Here in this post, we will be learning some general how-to do’s in react js like rendering list, giving dynamic styling and many other things lets check the thing in detail.

How To Set Dynamic HTML Attribute value In React Js.

In React we can set dynamic value to the attribute’s value dynamically. In react we use {<some-value>} to display any dynamic value in jsx exprestion.

Here <some-value> can be

• Any function return dynamic image url
• OR, value’s received from state or props as we used in below code.

Here above we are providing the src attribute value dynamically using currly brackets {}.

How To Set CSS Styles in React Js

Style Attribute in JSX is given using property className as shown below.

className is used to provide CSS classes to elements and is equivalent to class attribute of HTML element.

How To Add Internal CSS Styles in React JS

 If required to provide Internal CSS styling we can use style={<object>} of JSX element as shown in below image.

Eample:

How to provide Inline Styling to JSX Element in React js

you can provide in inline styling as below

It should be noted here we are not providing the unit of weight. If we want to have so we can provide by using.

Style = {{ fontSize:'20px'}}

How to Set CSS Class Dynamically in React Js

There may be the need that requires to provide dynamic CSS class at runtime. Here we will be setting the className Property dynamically. We will set badge class to badge-primary when the counter is 0 else to badge-warning.

Check the below code snippet.

Here we are evaluating the class name through getBadgeClasses() method.

How to Display List in React Js

To render list in React we will be following below steps. Check the snippet.

Here we are using map function to list the elements of tags.

Note : Here we are using the key attribute in <li> tag as react need this key to uniquely identify the elements in Virtual DOM . Key attribute is used by the React to identify which element was changed in Virtual DOM so that it can maintain sync with actual DOM.

By executing the above code we will get the below Result.

How to Have Conditional Rendering in React js

Like if we want to display the list of tag only when list is not empty. As in react we don’t have *ngIf attribute like angular, we have to achieve this by using regular javascript. Below code snippet will clarify that. Let’s see.

Here in the above code, We have deleted the elements in tags array. And renderTag() method will take of the logic of toggling the list on basis of availability content in list.

Beow will be the result in browser.

List will not displayed as tags has no value instead it displays our deafult message is being shown.

Now we will add the elements in tags. As the tag is available in tags then list is visible as shown below.

How To Handle Events in React Js

React provides many events here we will learn how to handle onClick Events. To our Increment  Button will add onClick event and pass a function reference. 

There are two ways of handling the events

1. By binding this keyword to event handler in our case handleIncrement.
2. By using arrow function.

Handling event’s by binding this keyword to it’s handler.

For achieving this we will create handler named handleIncrement. Then we will create a constructor and bind this to our handler and assign the reference of handler returned from calling bind function back to our handler. Below snippet will make it more clear.

Step 1 : we are adding onClick event and assigning our handler reference.

In Step 2 : we are creating the Handler name handleInccrement and increasing the counter by setting the increased value to state. Here directly we cannot set a variable of state like this.state.counter++  because when we do that then react in not aware of the change and do not update the VirtualDOM nor BrowserDOM. Their for here we use the setState  of its parent class to update the counter value. This setState method accepts the object that’s why we are passing  { counter: this.state.counter +1}.

Step 3 : In this we are binding the value our event handler with this

Handling event’s by using Arrow function

This is the simplest way here we do not require to create a constructor and bind this value to our handler. Here just we will create handler with arrow function. Below snippet will give more clarification.

Here we created the arrow function just as shown and commented constructor old handler created.

How to Add BootStrap to React js App

BootStrap is most used library used by web developer to design their web application. BootStrap us initially developed by twitter and later released for public. This library comprises of pre build JS and Css library that can help us make astonishing web design for our web application. Let’s Check out how will we be adding this to our React App. There are several ways to add BootStrap to React JS App.

Here we will be discussing a simple way of adding bootstrap using npm to our react App. For this to use, first traverse to the root directory of your react js app and then open terminal or node console and fire below command.

npm install --save bootstrap

Above command will add bootstrap to your app i.e it will do following task

1. It will download the bootstrap latest version to your node_module directory for your react js app.
2. It will add entry in your package.json file under dependencies of your react js app.

Now, wherever you want to use bootstrap elements you can just import Bootstrap into your component and can use it like this.

import 'bootstrap/dist/css/bootstrap.css';

Conclusion

In this post we learned about many general how to do’s that comes in mind of every react js beginner.

Thank’s Note,

Thanks for spending you valuable time on this post hope this post was use full to you and you learned something new today. If you like our post please share our post.