Using a react component from npm with reactjs.net

Question

How can I add a react component from npm to my Startup.cs?

For their demo that I followed, I currently have:

app.UseReact(config =>
{
    config.AddScript("~/js/helloworld.jsx");
});

and this works fine.

If I have a component that I've installed via npm, that resides in the node_modules folder, how can I reference and use this to serverside render with Reactjs.NET?

Answer 1

I was able to do this based on the reactnet-webpack template. In my case I was trying to include react-jsonschema-form, but I guess it should work the same for all other React components.

1. Install component npm install -s @rjsf/core
2. Import in your .jsx file where you'd like to use the component: import Form from "@rjsf/core";
3. Add component inside an existing render function:

const schema = {
    title: "Todo",
    type: "object",
    required: ["title"],
    properties: {
        title: { type: "string", title: "Title", default: "A new task" },
        done: { type: "boolean", title: "Done?", default: false }
    }
};
const log = (type) => console.log.bind(console, type);

render() {
    return (                
        <Form schema={schema}
              onChange={log("changed")}
              onSubmit={log("submitted")}
              onError={log("errors")} />
        );
    }
}

4. Rebuild JS parts using Webpack: npm run build

5. Start app in Visual Studio