These are the problems that I have faced yet:
Integration: I tried integrating Stencil and React as stated on the official Stencil website. It turned out that I have to build my Stencil component before adding it to my App and I need to copy it to the node_modules or else it throws some error in the Polyfills file.
I can't pass a function or an object as prop from my React App to Stencil component
It doesn't have any example on setting up react with stencil
Can anybody please help me?
Personally i use my own github instance where i upload the whole web-components project with dist and loader folder to github. Afterwards you can use this command to load the project into your npm-modules of your React app. It works a bit like a npm install from your github repo.
git+https://my-github-instance/web-components/my-components.git
Here are some details if you have problems get it running.
How to install an npm package from GitHub directly?
Than you can just npm update / npm install to get the freshest version of your web-components in your React app.
The Documentation of Stencil is pretty detailed how you can use the web-components in React:
https://stenciljs.com/docs/react
Good Luck
Out of the box React has issues integrating with Custom Elements (such as Stencil components) - you can see more details at https://custom-elements-everywhere.com/ as well as a few workarounds.
To aid in this integration, Stencil components can be extended with a bindings layer for React which convert the custom elements into consumable React components. See here for details: https://github.com/ionic-team/stencil-ds-plugins#react
Related
I have a NX monorepo with Stencil setup. I have my stencil web components, and I generate a React library using Stencil. I can use the library in a React app normally in the same repo.
I want now to be able to build the React library to be able to publish it to NPM to be able to import it in other projects.
I tried using Rollup with #nrwl/web:rollup to build it, but it only generates a bundle without a package.json file, is there a way to use that for publishing ? I also tried using #nrwl/web:webpack, but I can't find the right configuration. What is the right NX executor to use for that ? Webpack and gulp maybe ? How to configure it ?
For the Angualr lib, it was very simple, I just used #nrwl/angular:package. I was expecting something similar in React. Please help if you have encountered this issue, or have an idea.
I know that in React you can add components to any existing page from this excellent documentation (https://reactjs.org/docs/add-react-to-a-website.html). However, in that example the component is built from scratch. I am building several of my own components from scratch too but I would like to use a few different components from npm as well. For example, there is one called react-ace (https://www.npmjs.com/package/react-ace).
If a component is published on npm (and available on unpkg.com) is it possible to add it to an existing page like in the React docs example above? I have tried adding a script tag with this as the source: https://unpkg.com/react-ace#9.4.1/dist/react-ace.js/main.js but that does not make the AceEditor available. Or, do components have to be processed somehow in order to use them?
Note: I am also exploring using create-react-app to build and share the app and I may end up doing that but I want to know if any npm React component can be used in an existing page and if so how?
I am trying to create an npm package. That package contains components related to react-native (View, Text, Stylesheet, etc ).
I would like to reuse the same package for my React JS (web) application.
I am stuck in the state where I am not getting any clue from the internet which gives me details about what are the changes I need to make in my react-native package so that I can use it in a web project as well.
I have tried using react-native-web npm. but it didn't work. Whenever I consume the package, am getting the error shown below
Did anyone try this way? Is there any good tutorial or approach to follow?
You can't use components written in react-native for web.
React libraries use HTML and CSS, so obviously they will not now how to display native components like View and Text.
I understand we can create and test React Native Components in isolation in Storybook. But how do we export/publish the components to integrate in our app?
In React -
I used react-docgen that will allow me to create and document components as a standalone project
Then I will build and publish my doc app as a package to npm registry and npm install as dependency in my app to import those components
How do we do same in Storybook with React Native? Should I -
copy files/code of tested components in my actual app?
export everything just in stories folder and build and publish as package and install as dependency in my app?
Install storybook in my actual app? But I guess that's not an option as storybook is supposed to be run as standalone app in itself
May be I am missing something obvious as no tutorial/article/doc talk about how to consume the created Components in final apps? Can someone please shed some light? Thank you.
Ok, someone finally said this in a tutorial-
Once you find the component and the state that you want, you can see the source code you need to place in your application to get the exact same functionality
So, after all it will act simply like a UI library documentation from where you need to copy code from example and cannot add stories as dependency to your project.
Two questions.
I currently have a react web app, using higher order components, and redux to manage state. I am using react version 15.6.1.
I am now looking to create a react-native project. Since I am planning to integrate the react-native and the react codebase into the same repo, I am trying to figure out the best way to do this, specifically regarding the version of react.
The latest version of react-native (0.53rc0) has a peer dependency on react 16.2.0.
The react app breaks when I tried to upgrade to react v16 and I don't have time to do those fixes at this stage, so I am stuck with react 15.6.1 for a while longer. Does this mean I have to use an older version of react-native (looks like 0.42 supports react v15), or is there some other way in which I can use the latest version of react for react-native only, while keeping it in the same repo.
To clarify - the reason I want to keep it in the same repo, is because I already have higher order components, so in theory I just have to write the react-native components which will to my understanding then be called by the higher order component when running in the mobile app.
If anyone has or knows of examples of repos on github where this has been done (combined react and react-native project), that would be great so that I can get an idea of what such a project would look like once done.