Fetch API from ReactJs
1. Create project
- create .js file inside in src folder and write this inside in .js file
import React, { Component } from "react";
export default class Interface extends Component
{
state ={
loading :true,
person :null
};
async componentDidMount()
{
const url ="https://api.randomuser.me/";
const response = await fetch(url);
const data = await response.json();
this.setState({person: data.results[0], loading: false });
//console.log(data.results[0]);
}
render()
{
return(
<div>
{this.state.loading || !this.state.person ? (
<div> fetch data loding...</div>
):(
<div>
<img src={this.state.person.picture.large} />
<div>Title: {this.state.person.name.title}</div>
<div>FirstName: {this.state.person.name.first}</div>
<div>LastName: {this.state.person.name.last}</div>
</div>
)}
</div>
);
}
}
2. go to .index.js file and write this code inside index.js file
import React from 'react';
import ReactDOM from 'react-dom';
import Interface from './Interface';
3. go to index.html file and write code <div id="appp"></div> inside in body in .html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="appp"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
Output
Title: Ms
FirstName: Kübra
LastName: Elmastaşoğlu
react.js is a scripting language or you can also say bioscripting or jquery library. Its main function is to design a website on a front base or to create a website on the front. online classes take here
React.js
react.js is a scripting language or you can also say bioscripting or jquery library. Its main function is to design a website on a front base or to create a website on the front. online classes take here
React.Jus installation
You can install React.js in two ways, first is the Node Package Manager ie command line interface with npm ie CLI and second is cdn content delivery network ie what is server and local host.
The second is Node Package Manager, through the command line, install it on the local server, in which the entire packets are created, you can read about React mcv to know more about it.
React MVC
React .. js is a framework through which when you create any new project, the entire package of all files is generated in it, time is also safe to make and work can be done at a speed.
Use of react.js
The man of react.js said that you can use it for the website and if you want to use it in mobile then you can also make it in mobile by creating its API.
The second reason is that you are this light and light scripting language, which I like to do in today's time.
React-Native.js
Manning racket-native.js is that it is made only for mobile and only makes hybrid mobile applications like - ios application and android application. Using React-native.js, you can create an application for multiple platforms.
The difference between React-Native and React is that of Liberbury, which separates Indono and both do their own work in their own right place.
React-native and React have been created through Facebook, where React is written in JavaScript.
React-native is written in Java, Objective-c, Python, JavaScript and C ++.
Use of React-Native
The main use of React-Native is to develop hybrid applications and can also be used with native platform, by creating APIs.
React-native can also do this with Ionic-Kordova for today's mobile applications and can also do API integration.
React-Native Installation
To install React-Native, you can install the command line interface with the help of Node Package Manager, and in this also the project is made in the form of a group.
Future of hybrid applications
Talking about the future of hybrid applications, today is the time for information technologies, new research and development are going on every day, so it is not right to say that it is not right now that any of the technologies or programming language is right Is about future
In the future, if you go for even better technologies, then anyone who designs good hybrid applications from the react-native and also takes time to work and fast to get everything fast, it is not possible to say anything about future.
Business of hybrid applications
If we talk about the business of hybrid applications, then today, according to the market of the future, if we talk about research and market needs of the client then there is a lot of demand.
No comments:
Please don't write any spam text or message