Use History in react

 import { useHistory } from "react-router-dom";

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

Load More in react

 import React  from 'react';

import { NavLink } from 'react-router-dom';

import './assets/css/bootstrap.css'; 

import './assets/css/styles.css';

import './assets/css/custom.css';

import Hlogo from  './assets/images/hlogo.png';

import Footer from  './include/Footer';

 

 

class News extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      items: [],

      visible: 10,

      error: false

    };

    this.loadMore = this.loadMore.bind(this);

  }

  loadMore() {

    this.setState((prev) => {

      return {visible: prev.visible + 10};

    });

  }

  componentDidMount() {

    fetch("https://msaini.in.net/api/newsList").then( 

      res => res.json()

    ).then(res => {

      this.setState({

        items: res

      });

    }).catch(error => {

      console.error(error);

      this.setState({

        error: true

      });

    });

  }

  render() {

  return (

    <>

<div className="header sticky" id="myHeader"> 

<img src={Hlogo} className="hbg" />

<div class="searchbox" id="latestmessage">

  <input type="text" name="search" id="search" value=" ram aram saa"  />

</div>

</div>   

<div class="hspace">--</div> 

<section class="content newsboxlist">

{this.state.items.slice(0, this.state.visible).map((item, index) => {

              return (

                 

<div className="listItem">

<NavLink exact to={'/newsdetail/'+item.id} > 

<div className="newsList">

<div className="nwsDtl1" style={{ padding:"5px" }}>

<table style={{ width:"100%" }} >

    <tbody>

<tr>

<td  style={{ width:"15%" }}   >

<img src={item.path} alt="news logo" className="newsImg" /> 

</td>

<td  style={{ paddingLeft:"5px", color: "#000", fontSize:"16px", width:"85%", verticalAlign:"top" }} >

{ item.title }

</td> 

</tr>

</tbody>

</table>  

 

</div>

</div> 

</NavLink>

</div>

 

              );

            })}

 

 

 

<div id="load_more">

<center>

{this.state.visible < this.state.items.length &&

             <button onClick={this.loadMore} type="button" className="load-more">Load More </button>

          }

</center>

</div>

</section>

    <Footer/>

    </>

  );

}

}

export default News;

Codeignioter Code :

function newsList(){ $result = $this->Api_model->getNewsList(); $data = array(); if(!empty($result)){ foreach($result as $row){ $data[] = array( 'id' => $row['id'], 'title' => $row['title'], 'path' => base_url('upload/resizer/resizer.php?file=../news/').$row['path'].'&width=60&height=60&action=resize&quality=100' ); }} echo json_encode($data); //$this->response($data, REST_Controller::HTTP_CREATED); }

Routing with peramiter

 import React from 'react';

import { BrowserRouter, Switch, Route } from 'react-router-dom';

import './assets/css/bootstrap.css';

import './assets/css/custom.css';

import News from  './News';

import Team from  './Team';

import Newspost from  './Newspost';

import Newsdetail from  './Newsdetail';

import FileUploadForm from  './FileUploadForm';

import Error from  './Error';

function App() {

 

  return (

    <> 

    <BrowserRouter>

    <Switch>

      <Route exact path="/" component={News} ></Route>

      <Route path="/newsdetail/:id" component={Newsdetail} ></Route>

      <Route path="/team" component={Team} ></Route>

      <Route path="/newspost" component={Newspost} ></Route>

      <Route path="/fileUploadForm" component={FileUploadForm} ></Route>

      

      <Route component={Error} ></Route>

    

    </Switch>

    </BrowserRouter>

    

    </>

  );

}

export default App;

Use Links : -

<NavLink exact to={'/newsdetail/'+post.id} > </NavLink>

Data get with codeigniter

 import React, { useState, useEffect } from 'react';

import { NavLink } from 'react-router-dom';

import './assets/css/bootstrap.css';

import './assets/css/custom.css';

import NewsLogo from './assets/images/news.jpg';

import Header from  './include/Header';

import axios from 'axios'; 

function News() {

 

  const [posts , setPosts] = useState([])

    

  useEffect( () => {

  

    

    axios

    .get('https://msaini.in.net/api/newsList')

    .then(function (response) {

      // handle success

      console.log(response);

      setPosts(response.data)

    })

    .catch(function (error) {

      // handle error

      console.log(error);

    })

      

   

  

  },[])

  return (

    <>

    <div className="top-container topbar">

    

     <Header/>

      

 

<section className="content listSecBox" id="results">

      

{ posts.map(post => ( 

<div className="listItem"  >

<NavLink exact to={'/newsdetail/'+post.id} > 

      <div className="newsList" >

        

        <div className="news-img"> 

             

            <img src={post.path} width="100" height="50" alt="news logo" /> 

            

        </div> 

        <div className="nws-dtl">  

        {post.id} { post.title }

        </div>

      </div>

</NavLink>

</div> 

))} 

</section>

        

        <center><div className="loadmore" onclick="autoloaddata();"> और देखने के लिए क्लिक करे <i class="fa fa-search" aria-hidden="true"></i></div></center>

         

 

    

    </div>

    </>

  );

}

export default News;

Codeigniter Code : -

function newsList(){ /* login check */ //if (!$this->auth->isLogged()) { redirect('admin'); exit; } $result = $this->Api_model->getNewsList('News'); $data = array(); if(!empty($result)){ foreach($result as $row){ $data[] = array( 'title' => $row['title'], 'path' => base_url('upload/news/').$row['path'] ); }} echo json_encode($data); //$this->response($data, REST_Controller::HTTP_CREATED); }

Data post with image & php

 import React from 'react'

import axios from 'axios';

class FileUploadForm extends React.Component {

    UPLOAD_ENDPOINT = 'http://aagajkiaawaj.com/react_api/product/upload.php';

    constructor(props) {

        super(props);

        this.state ={

          file:null

        }  

        this.onSubmit = this.onSubmit.bind(this)

        this.onChange = this.onChange.bind(this)

        this.uploadFile = this.uploadFile.bind(this)

    }

    async onSubmit(e){

        e.preventDefault() 

        let res = await this.uploadFile(this.state.file);

        console.log(res.data);

    }

    onChange(e) {

        this.setState({file:e.target.files[0]})

    }

    async uploadFile(file){

        

        const formData = new FormData();

        

        formData.append('avatar',file)

        formData.append('name',document.getElementById('name').value)

        

        return  await axios.post(this.UPLOAD_ENDPOINT, formData,{

            headers: {

                'content-type': 'multipart/form-data'

            }

        });

      }

    

      render() {

        return (

          <form onSubmit={ this.onSubmit }>

            <h1> React File Upload Example</h1>

            <input type="text" name="name" id="name" />

            <input type="file" onChange={ this.onChange } />

            <button type="submit">Upload File</button>

          </form>

       )

      }

        

}

export default FileUploadForm;

Php Code :

<?php header('Content-Type: application/json; charset=utf-8'); header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Methods: PUT, GET, POST"); /* @session_start(); echo 'aaaaaaa'; if($_REQUEST['name']!=''){ echo $_SESSION['name'] = $_REQUEST['name']; }else{ echo $_SESSION['name']; } */ $response = array(); $upload_dir = 'uploads/'; $server_url = 'http://aagajkiaawaj.com/react_api/product/'; if($_FILES['avatar']) { $avatar_name = $_FILES["avatar"]["name"]; $avatar_tmp_name = $_FILES["avatar"]["tmp_name"]; $error = $_FILES["avatar"]["error"]; if($error > 0){ $response = array( "status" => "error", "error" => true, "message" => "Error uploading the file!" ); }else { $random_name = rand(1000,1000000)."-".$avatar_name; $upload_name = $upload_dir.strtolower($random_name); $upload_name = preg_replace('/\s+/', '-', $upload_name); if(move_uploaded_file($avatar_tmp_name , $upload_name)) { $response = array( "status" => "success", "error" => false, "name" => $_POST['name'], "message" => "File uploaded successfully", "url" => $server_url."/".$upload_name ); }else { $response = array( "status" => "error", "error" => true, "message" => "Error uploading the file!" ); } } }else{ $response = array( "status" => "error", "error" => true, "message" => "No file was sent!" ); } echo json_encode($response); ?>

Data Post with fetch api & codeigniter

 import React, { useState } from 'react';

import './assets/css/bootstrap.css';

import './assets/css/custom.css';

import Header from  './include/Header';

function Newspost() {

const [result, setResult] = useState("hhhhhh");

  const onSubmits = (event) =>{

    event.preventDefault();

   

    const postData = {

      title: document.getElementById("title").value,

      detail: document.getElementById("detail").value

      };

   

      /* 

      axios.post(`https://msaini.in.net/api/newsInsert`,postData)

      .then(res => {

        console.log(res);

        setResult(res);

      }

      

      )

   */

  fetch('https://msaini.in.net/api/newsInsert', {

    method: 'POST',

    body: JSON.stringify({

      title: document.getElementById("title").value,

      detail: document.getElementById("detail").value

    })

  })

  .then(res => res.json())

  .then(data => {

    console.log(data);

    setResult(data.message);

  }) 

  .catch(err => console.log(err));

  

  

 

};

     

  return (

    <>

    <div classNameName="top-container topbar">

    

     <Header/>

      

 

<section classNameName="content listSecBox" id="results">

<form onSubmit={onSubmits} > 

<div className="space60"></div>

<center>

<div className="title_bar"> 

  <a href="#"> News Form 1 </a>

</div> 

  <p className="alert">{ result}</p>

</center> 

       <div className="form-submit1">

                

        <div className="form-group">  

                  

        <div className="input-group date">       

        <div className="input-group-addon"><b>*फोटो 1 के लिए क्लिक करे 👉</b> </div>         

        <input type="file" className="form-control" name="path"     />

        </div>

        

        </div>

        

                 

 

       <div className="form-group">

          <textarea name="title" id="title" rows="1" className="form-control" placeholder="* न्यूज़ हेडिंग यहाँ डाले  "></textarea>

               </div>

       

          

         

         

         <div className="form-group">

          <textarea name="detail" id="detail" rows="10" className="form-control" placeholder="* पूरी न्यूज़ यहाँ डाले " required></textarea>

               </div>

       

         

     

          

               

       </div> 

          <div className="footer">

            

       <div className="error"><span> Required Field Empty!!</span></div>

   

     <input className="form-control button ui primary fluid" type="submit" name="submit" value=" Submit " />

     

        </div>

       

      

  

  <div className="space100"></div>

  </form>  

</section>

 

    

    </div>

    </>

  );

}

export default Newspost;

Codeigniter :-

function newsInsert(){ $data = json_decode(file_get_contents("php://input")); $insertData = array( "title" => $data->title, "detail" => $data->detail ); $lastInsert = $this->Api_model->insertNews($insertData); $response = array( "title" => $data->title, "error" => false, "message" => "News successfully send." ); echo json_encode($response); }

Webview in react native

 Create Project....................................

Cmd : npx react-native init Projectname

Webview -------------------------------------------

https://blog.logrocket.com/the-complete-guide-to-react-native-webview/

Cmd

yarn add react-native-webview

npx react-native link react-native-webview

//This is an example code to understand WebView// 

import React, { Component } from 'react';

//import react in our code. 

import { WebView } from "react-native-webview";

//import all the components we are going to use. 

export default class App extends Component {

  render() {

    return (

       <WebView

        source={{uri: 'https://eleader.in/'}}

        style={{marginTop: 0}}

      />

    );

  }

} 

add this code

android/src/AndroidManifest.xml

 android:icon="@mipmap/ic_launcher" After

 android:usesCleartextTraffic="true"

-----------------------------------------------------------

Build Bundle & Apk in React Native

https://www.youtube.com/watch?v=SzwTGDDXTAE

Doc : 

https://reactnative.dev/docs/signed-apk-android

keytool -genkeypair -v -keystore aagajkiaawaj.keystore -alias aagajkiaawaj -keyalg RSA -keysize 2048 -validity 20000

Build Apk......................

cd android

gradlew assembleRelease

Build Bundle......................

cd android

gradlew bundleRelease

----------------------------