How to handle User Inputs with Forms and Events in React.js?

In this tutorial, you’ll learn how to handle user inputs, how to fetch some data from an API (Application Programming Interface) and how to display a list of data in the form of records. You’re going to build an app that’ll help you search for any picture you want to see. You’ll search for something … Read moreHow to handle User Inputs with Forms and Events in React.js?

How to show a loading screen when components are loaded in React.js?

What is a Lifecycle Method in React.js? » Add a Loading… text Right now, when you start the server, it takes some time to show you the actual Day / Night details. During that time, hrs property in state is a blank string and hasError is false:        state = {hrs: ”, hasError: false}; But, … Read moreHow to show a loading screen when components are loaded in React.js?

How to use Config Objects in components in React.js?

What is a Lifecycle Method in React.js? » If you look at the code you’ve written inside DayNightDisplay.js, there should be a way to combine the text “It’s day!” with the image “day.png” and the text “It’s night” with “night.png”. This is a very appropriate situation to learn about Config Objects in Javascript. Right after … Read moreHow to use Config Objects in components in React.js?

How to display conditional images in a component in React.js?

What is a Lifecycle Method in React.js? » You’ve already found a way to find out whether it’s day or night in a React.js component. Next, you need to write some logic to display graphics or images as per the result (day or night). You’re going to use a variable and store the image URL … Read moreHow to display conditional images in a component in React.js?

How to pass state as props in React.js?

What is a Lifecycle Method in React.js? » If you remember, you created a component called DayNightDisplay? In this section, you’ll import this components inside the index.js file, and inside the render() method, instead of printing out the current hour right there, you’ll show the DayNightDisplay component instead. The goal here is not just to … Read moreHow to pass state as props in React.js?

How to initialize states without constructor in React.js?

What is a Lifecycle Method in React.js? » If you remember, I told you that there are multiple ways of initializing states in a React component. You’ve already seen one of the ways, which was like this (inside the constructor method):     constructor(props){        super(props);        this.state = {hrs: ”, hasError: false};    } There’s … Read moreHow to initialize states without constructor in React.js?