In this tutorial, you’ll learn how to create some API request in React.js, receive data from an API and finally display the data on the DOM. Make sure you’ve read the tutorial on Handling User Input and Forms, because you’re going to continue the same project from here. You’re going to use an API called … Read moreHow to make API request 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?
What is a Lifecycle Method in React.js? » If you remember in the previous tutorial you learnt how to show a loading screen with the text “Loading…” when the components are being loaded by the React server. You can of course customize this loading text and use something else by passing it as props. In … Read moreHow to specify Default Props 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?
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?
What is a Lifecycle Method in React.js? » Before you make further changes to the app, you may want to know how the compiled code looks like. At multiple places, you got to know that the syntax you follow to write ES and modern Javascript code is not directly understood by the browser. Babel takes … Read moreHow do compiled code looks like 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?
What is a Lifecycle Method in React.js? » You can determine whether it’s day or night using a simple logic. Javascript returns default hours in 24 hour format. That means, any hour between 7 to 17 can be considered as day (7am to 5pm). You can consider anything else as night time. Right now, inside … Read moreHow to determine day or night 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?
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?