Category: React

Vue or React in 2020?

According to the StackOverflow survey, React.js is the popular framework than the Vue.js Look at the google trend When you analyze the trend you can see, all these three frameworks hav flat trend in last 12 months period. According to the graph Vue has taken the lead. But from beginning of 2020, react is leading […]

Read more

REACT -Define and access env variable from front-end

In your React.js app, you may need to define some environment variable depending on your application logic You can define those variables in webpack.config.js file You have the webpack.DefinePlugin({}) plug-in to do this So if you want to define API_URL, you can do it in following way If you want to access it through React […]

Read more

How to pass props to state variable

How to pass props to state variable to state variable inside a functional component I want to pass products ariable to <SearchBox > component. Your search box component is like this

Read more

Conditional Rendering in React JS

If you wan to use if statement

Read more

React State

Props are immutable and once the component is rendered you can not change the value of the Prop So how to do change the UI values ? This is where React sate comes into play When the state object changes, the component re-renders ´╗┐How to create state object´╗┐

Read more

Validate React Prop

You can validate the property of a React component using the built in PropTypes

When i pass the following props to the component When there are validation errors they will be shown in the console as warning message Warning: Failed prop type: Invalid prop rowsperpage of type string supplied to Setting, expected number.

Read more

Defaults Props in React Js

You can assign default values for properties of your components. When you do not supply prop values externally to the component default values are applied

You can Setting.defaultProps object is used to define the default properties. defaultProps is declared outside of the class or we call them instance of the class This is your […]

Read more

React Props

In simple terms, you can use the props to pass variables to child components So first, you define the child element which is able to accept the prop values

Now, Task child element can accept the prop named title In your parent component

You are rendering the Task element by passing the value […]

Read more

How to use axios in your React App

First install the axios in your working directory

Get Request We are using componentDidMount life time hooks to call the axios.get to get JSON data. Retrieved data will be put in state and will be used inside the the render() function

Read more

How to run your first React code

Read more