I have a React project created with npx create-react-app where I implemented a handful React Components. I don't really see this project as an "React application", as it's just a personal library of Components I consume in another project, an HTML web application rendered using server-side technologies. My goal is to gradually replace parts of this application with React components. I don't really envision it becoming a single React application, my plan is just to replace the parts I think make sense to be developed with React.
I have no issue implementing these components - I'm using Storybook to organize the independent modules. But I'm struggling with the build process.
If I run npm run build I create a single application, based on the original React application code bootstrapped by create-react-app, which I essentially abandoned in favor of the Storybook setup. If I add the files generated by npm run build my project, I can't get React to render my components properly.
I managed to get a manual build process to work:
In my HTML project I add https://unpkg.com/react#16/umd/react.production.min.js and https://unpkg.com/react-dom#16/umd/react-dom.production.min.js
For each of my React components source files, I run npx babel --presets react-app/prod src/MyComponent.js -o build/mycomponent.js
Then I combine all the npx babel outputs in a single components.js file, adjusting some repeated functions that appear on the top of all files, and suppressing the import and export statements.
I load the component.js file in my HTML project, and I can create my components using plain JS:
ReactDOM.render(
React.createElement(MyComponent, {param: value}, null),
document.getElementById('myComponent')
);
Is there a better process to build my components to a single JS file I could consume in my HTML application?
As you expected, the project should be a reusable module/ UI library (say the name is my-ui) for other projects. I did the similar thing before and just introduce my approach here. First, export the components as normal. Second, create an index.js. Third, import and export those components you exported. Fourth, if you are familiar with webpack, use index.js as the entry in webpack.config.js to bundle the entire project as one file. You can publish this package, or just use it locally.
Then in other projects, import my-ui, you can use any component exported from that module.
Related
I'm trying to use Lit.dev to create reusable web components across my organization, and I'm trying to import one of those components into a new React project using create-react-app
I started by creating a local Storybook project to make sure my components rendered correctly, which they do (see screenshot)
I pushed library of test components to my GitHub account, then I installed to a boilerplate create-react-app project using npm i https://github.com/my-user/my-design-system/, which added my library of components to /node_modules, which I can import into a React app using
import `my-design-system/MyCustomComponent`
For simple components, this is straightforward, and I can successfully render my Lit-created web component in my React project, but for components that use things such as #decorators or importing Sass styles, I get errors. For example:
Module Error (from ./node_modules/sass-loader/dist/cjs.js):
Cannot find module 'sass'
etc...
I feel like I could solve this problem by configuring my React project to use the appropriate loaders and TypeScript configs, etc., but I feel like this is defeating the purpose of creating an external web component library to be framework agnostic. I feel like I am most likely missing a step that converts or builds my Lit project into a JavaScript bundle that other projects can use without much fuss (right now, in my React project, I'm just importing my web component straight from the source file in node_modules/my-design-system/MyCustomComponent
I'm completely new to creating my own packages, so I feel like I lack the vocabulary to accurately describe what I'm trying to accomplish. Can anyone point me in the right direction?
I created a React component and uploaded it to a private git repo. It's a fairly simple component that renders a data table that can be sorted etc. I used nwb to for the setup / build process (https://github.com/insin/nwb).
It's not published on npm, so when I want to use it on a project I install via something like npm install --save git+ssh://git#github.com/Me/myRepo.git. This all works fine in normal React projects.
Unfortunately on a NextJS site I'm working on, NextJS won't compile, and is giving the error CSS Modules cannot be imported from within node_modules and linking me to https://nextjs.org/docs/messages/css-modules-npm
That page suggests that I might be accidentally using the package's source files - but I'm not. When I look in my /node_modules/myComponent/ folder, there's a /lib/ folder that has the compiled source. However, the styles are still in separate files and are included into the compiled source just like you might normally do (var _defaultModule = _interopRequireDefault(require("./styles/default.module.scss"));).
I did some searching online and it seems like the "quick and easy" solution is to use https://github.com/martpie/next-transpile-modules.
I'd prefer to solve this by fixing my repo though, so that when I install it on a project (whether NextJS or whatever) I get whatever it is that NextJS wants.
So my various questions are:
Is there a way to set up my repo so NextJS is happy with it?
Is nwb not the preferred way to make a React component? Should I have used some other process? I'm not having this problem with any other component, so it seems like this is something I did wrong with my repo.
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 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.
I am very new to react. I grabbed the petclinic project from github (https://github.com/spring-petclinic/spring-petclinic-reactjs) to run it and understand how react works. I want to add plugins to this project (plugins are other react projects as I understand), The plugin I want to add is a datatable (https://github.com/rishabhbits038/react-tabelify) which is another react project. My question is how to integrate one react project inside the other. in jquery it is direct, just including the .js file in the project but in react it does not seem that obvious.
From inside the petclinic project, run
npm install react-tabelify
and import the component you want use as:
import Tabelify from 'react-tabelify';
should work, as the second library is registered with npm