https://github.com/yosh1/react-ionic-practice

This is a react-ionic practice repository.
https://github.com/yosh1/react-ionic-practice

ionic npx react typescript yarn

Last synced: 4 days ago
JSON representation

This is a react-ionic practice repository.

• Host: GitHub
• URL: https://github.com/yosh1/react-ionic-practice
• Owner: yosh1
• Created: 2019-03-07T08:41:38.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2020-01-11T07:52:53.000Z (about 5 years ago)
• Last Synced: 2024-11-13T09:39:50.222Z (2 months ago)
• Topics: ionic, npx, react, typescript, yarn
• Language: TypeScript
• Homepage:
• Size: 171 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React × ionic app (Beta)

---

## How to run?

```

$ yarn i

$ yarn start

```

---

## How to develop?

### package init and install

```

$ npx create-react-app react-ionic-app --typescript

$ cd react-ionic-app

$ yarn add @ionic/react react-router react-router-dom @types/react-router @types/react-router-dom --save

```

### Edit `App.tsx`

```

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

class App extends Component {

  render() {

    return (

      


        

          

          


            Edit src/App.tsx and save to reload.

          

          

            Learn React

          

        

      

    );

  }

}


export default App;

```

to

```

import React, { Component } from 'react';

import '@ionic/core/css/core.css';

import '@ionic/core/css/ionic.bundle.css';

import {

  IonApp,

  IonContent,

  IonCard,

  IonCardHeader,

  IonCardTitle,

  IonCardSubtitle

} from '@ionic/react';

class App extends Component {

  render() {

    return (

      

        

          

            

              react with ionic app

              Hello World!

            

          

        

      

    );

  }

}

export default App;

```