Using React in an Ionic application in One Go

tutorials
1

Hello,

Ionic 4 can now work with any JS framework/library.
In this tutorial, we will see how we can use the React library in a simple Ionic application.

2

Hi

thanks for sharing.

Can you show how to do the component interaction in React?

So render Ionic 4 components and interact with the API?

Would be nice if you can show an example, as I think that will be first one in the world publishing Ionic 4 React showcase!

Regards

Tom

3

Sure I’ll give it a shot.

4

Hi
I’m a newby with Ionic.

I’m trying to use Ionic 4 with React but with no success.
With this tutorial i have found some errors and, at the end, the test doesn’t work.

First of all: the configuration file that the framework search is “webpack.config.js” and not “extra-webpack.config.js” .

Changed the name, ionic serve -c command return a blank page in the browser, and the web console error is:

ERROR Error: “The selector “app-root” did not match any elements”
selectRootElement 23 Angular AppModule:1
ERROR CONTEXT
Error: “The selector “app-root” did not match any elements”
selectRootElement 23 Angular AppModule:1

Any suggestion?

Thanks in advance

oPKo

5

You should post your code somewhere so I can have a look like github.

6

Hi ,
thanks for reply.

You can find the relevant code here.

7

Two things that are different:

  1. You are not using the custom webpack config, your angular.json is the default one so you are not using jsx.
  2. The default main.ts file is still used which means that the Ionic stack will transform this main.ts into a main.js and look for the Angular tags to bootstrap the application which gives the:

Error: “The selector “app-root” did not match any elements”
selectRootElement 23 Angular AppModule:1

I replaced the main.ts by a main.jsx where the React bootstrapping is done, you do it directly in the index.html:

var HelloWorld = React.createClass({
				render: function() {
					return <p>Hello <strong>React</strong>!</p>;
				}
		});
		ReactDOM.render(<HelloWorld />, document.getElementById("hello"));

At the end of the tutorial there is the corresponding architecture.

Mixing Ionic and React at the moment is quite an adventure (I spent some time on it) and that’s one of the reason why I focused on using JSX files to master the whole build process.
When the @ionic/react library will be available everything will be easier, we will be able to create a simple React app and add Ionic into it.

8

Hi

I followed this tutorial Custom webpack and modify angular.json.
Is not it enough?

Ok, I tried both with main.jsx and directly inside the index.html. I didn’t understand that main.jsx replaced main.ts. Thank you!