yarn install axios
import React, { Component } from 'react'
import { View, Text, ActivityIndicator } from 'react-native'
import axios from 'axios'
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
posts: []
}
}
componentDidMount() {
return axios.get('https://jsonplaceholder.typicode.com/posts')
.then(res => {
console.log(res)
this.setState({
posts: res.data.slice(0, 10)
})
}
)}
render() {
const { posts } = this.state
// const postList =posts.length ? ():()
const postList = posts.length ? (
posts.map(item => {
return (
<Text key={item.id}>{item.title}{item.body}</Text>
)
})
) : (<Text style={{ fontSize: 30 }}>loading</Text>)
return (
<View>
<Text>{postList}</Text>
</View>
)
}
}
..............................................................................................................................................................................................................
Example 2
import React, { Component } from 'react'
import axios from 'axios'
class Home extends Component {
constructor(props) {
super(props)
this.state = {
people: []
}
}
componentDidMount() {
axios.get(`https://jsonplaceholder.typicode.com/users`)
.then(res => {
console.log(res)
this.setState({ people: res.data })
})
}
render() {
return (
<ul>
{this.state.people.map((item) =>
<li key={item.id}>{item.name}</li>
)}
</ul>
)
}
}
class PersonInput extends Component {
constructor(props) {
super(props)
this.state = {
name: ''
}
}
handleChange=(event)=>{
this.setState({name: event.target.value})
}
handleSubmit = (event) => {
event.preventDefault()
const user={
name: this.state.name
}
axios.post(`https://jsonplaceholder.typicode.com/users`,{user})
.then(res=>{
console.log(res)
console.log(res.data)
})
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>Person Name:
<input type='text' name='name' onChange={this.handleChange}></input>
</label>
</form>
)
}
}
export default class App extends Component {
render() {
return (
<div>
<Home />
<PersonInput />
</div>
)
}
}
Example | React Native -1
import React, { Component } from 'react'
import { View, Text } from 'react-native'
import axios from 'axios'
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
Value: []
}
}
componentDidMount() {
axios.get(`https://jsonplaceholder.typicode.com/users`)
.then(res => {
console.log(res)
//console.log(res.data.movie) // similar way to defince
this.setState({ Value: res.data })
})
}
/**
`https://facebook.github.io/react-native/movies.json`
render() {
const { Value } = this.state
return (
<View>
<Text style={{ fontSize: 30 }}>Hello Sapan</Text>
{Value.map((item => (
<View key={item.id}>
<Text style={{ fontSize: 30 }}>{item.name}</Text>
</View>
)))}
</View>
)
}
}
.....................................................................................................................................................
Example | React Native -2
import React, { Component } from 'react'
import { View, Text } from 'react-native'
import axios from 'axios'
import ListData from './src/components/Hello'
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
people: []
}
this.getPeople = this.getPeople.bind(this)
}
getPeople() {
axios.get(`https://swapi.co/api/people`)
.then(res => {
console.log(res)
// console.log(res.data.results)
this.setState({ people: res.data.results})
})
}
componentDidMount(){
this.getPeople()
}
render() {
const { people } = this.state
return (
<View>
<ListData people={people}/>
</View>
)
}
}
..............................................................................................................................................................
import React, { Component } from 'react'
import { View, Text } from 'react-native'
import axios from 'axios'
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
Value: []
}
}
componentDidMount() {
axios.get(`https://jsonplaceholder.typicode.com/users`)
.then(res => {
console.log(res)
//console.log(res.data.movie) // similar way to defince
this.setState({ Value: res.data })
})
}
/**
`https://facebook.github.io/react-native/movies.json`
{
"title": "The Basics - Networking",
"description": "Your app fetched this from a remote endpoint!",
"movies": [
{ "id": "1", "title": "Star Wars", "releaseYear": "1977" },
{ "id": "2", "title": "Back to the Future", "releaseYear": "1985" },
{ "id": "3", "title": "The Matrix", "releaseYear": "1999" },
{ "id": "4", "title": "Inception", "releaseYear": "2010" },
{ "id": "5", "title": "Interstellar", "releaseYear": "2014" }
]
}
*/render() {
const { Value } = this.state
return (
<View>
<Text style={{ fontSize: 30 }}>Hello Sapan</Text>
{Value.map((item => (
<View key={item.id}>
<Text style={{ fontSize: 30 }}>{item.name}</Text>
</View>
)))}
</View>
)
}
}
.....................................................................................................................................................
Example | React Native -2
import { View, Text } from 'react-native'
import axios from 'axios'
import ListData from './src/components/Hello'
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
people: []
}
this.getPeople = this.getPeople.bind(this)
}
getPeople() {
axios.get(`https://swapi.co/api/people`)
.then(res => {
console.log(res)
// console.log(res.data.results)
this.setState({ people: res.data.results})
})
}
componentDidMount(){
this.getPeople()
}
render() {
const { people } = this.state
return (
<View>
<ListData people={people}/>
</View>
)
}
}
import React, { Component } from 'react'
import { View, Text } from 'react-native'
class ListData extends Component{
render(){
const people= this.props.people
return(
<View>
{
people.map((item)=>(
<View key={item.id}>
<Text>{item.name}</Text>
</View>
))
}
</View>
)
}
}
export default ListData
Example | React
import { View, Text, ActivityIndicator } from 'react-native'
import axios from 'axios'
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
posts: []
}
}
componentDidMount() {
return axios.get('https://jsonplaceholder.typicode.com/posts')
.then(res => {
console.log(res)
this.setState({
posts: res.data.slice(0, 10)
})
}
)}
render() {
const { posts } = this.state
// const postList =posts.length ? ():()
const postList = posts.length ? (
posts.map(item => {
return (
<Text key={item.id}>{item.title}{item.body}</Text>
)
})
) : (<Text style={{ fontSize: 30 }}>loading</Text>)
return (
<View>
<Text>{postList}</Text>
</View>
)
}
}
..............................................................................................................................................................................................................
Example 2
import React, { Component } from 'react'
import axios from 'axios'
class Home extends Component {
constructor(props) {
super(props)
this.state = {
people: []
}
}
componentDidMount() {
axios.get(`https://jsonplaceholder.typicode.com/users`)
.then(res => {
console.log(res)
this.setState({ people: res.data })
})
}
render() {
return (
<ul>
{this.state.people.map((item) =>
<li key={item.id}>{item.name}</li>
)}
</ul>
)
}
}
class PersonInput extends Component {
constructor(props) {
super(props)
this.state = {
name: ''
}
}
handleChange=(event)=>{
this.setState({name: event.target.value})
}
handleSubmit = (event) => {
event.preventDefault()
const user={
name: this.state.name
}
axios.post(`https://jsonplaceholder.typicode.com/users`,{user})
.then(res=>{
console.log(res)
console.log(res.data)
})
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>Person Name:
<input type='text' name='name' onChange={this.handleChange}></input>
</label>
</form>
)
}
}
export default class App extends Component {
render() {
return (
<div>
<Home />
<PersonInput />
</div>
)
}
}
Thanks for posting. Its an Important topic to be read.
ReplyDeleteReact JS Online training
React JS training in hyderabad