How do I implement my react component on my site? - javascript

New to react and was following a tutorial creating this component. (https://github.com/owenchak/react-weather). I'm using gulp to test everything locally. How do I use my component in an actual website I'm trying to create? I instructed gulp to create a style.css (containing all the sass files), main.js containing the interpretable jsx and index.html that contains all these files.

I have done this before. If you take the bundled js (and) and css and attach it to your html and you've created an element where react will be rendered (e,g <div id="app"></div>) it will work.

Related

How to compile vue components from cshtml files without messing up renderbody?

Got an EpiServer project where I want to insert .vue components.
I have tried to follow this project, where they can render .vue components from their cshtml files dynamically: [https://github.com/episerver/musicfestival-vue-template][1]
Currently approaching the problem by adding the built app and chunk-vendor js files into the project folder of the C# project and inject the scripts and id’s. Unfortunately, the Vue project takes over the whole app container.
The ideal scenario is to simply add vue components (from the Vue 3 Cli project), into the project like: <hello-world></hello-world>, without it interfering with the renderbody.
So, how do I compile .vue components from cshtml files, while renderbody works as usual?

Adding javascript component into angular app

I'm having a javascript components that is distributed as .js file and .css file. In .js file the component is added to window
window.Component = { ... }
the component should be added to page with the following code Component.init('#componentHolderId', config);
I need to use my component in an Angular app (using Angular 11 if that matters).
Here are my questions.
Where is the best place in angular app to put .js file? Maybe it's somehow possible to add it to lazy-loaded module (as component needs to be used in a lazy-loaded module)?
Is there a way to add css to project other that adding it to styles array in angular.json? My concern here is that this way will slow-up application start-up.
You can add your .js file in the Scripts array of angular.json. so that it will be loaded.
Or you can add the .js inside the script tag inside body tag of index.html. (Sometimes it won't work because the some dom elaments are not present when loading index.html).
If you are using SCSS or any other CSS preprocessors, you can import your CSS files in your styles file.

StencilJS using component in HTML file

I want to use a component created using StencilJS in a regular basic HTML file. I followed these steps:
I have created a stencil component to create the basic my-component example:
npm init stencil
I want to use this component in an HTML file, so I ran
npm run build
I then created an html project with the following structure:
And then I moved the files from the dist folder into the script folder. And I added script tag in the head of my html file that references the component.js file like this:
<script src="script/{component_name}/{component_name}.js"></script>
And I used the component in the html like this:
<my-component first="Stencil" last="'Don't call me a framework' JS"></my-component>
But my component isn't being rendered. I get an error involving a esm.js file. Can someone help me with this process of compiling my stencil component to be using in a basic HTML project?
Stencil bundles your dist into modules and lazy-loads only the required code based on the components you are actually using in your HTML. So you should serve the whole dist folder along with your website.
The recommended way is to have the following two script tags in your html file:
<script type="module" src="/dist/[namespace]/[namespace].esm.js"></script>
<script nomodule src="/dist/[namespace]/[namespace].js"></script>
(where [namespace] is whatever is set in your stencil.config.ts)
This will instruct browsers who support ES Modules to use the esm bundle, and other browsers will use the ES5 (cjs) bundle.
If my-component is the only component that you're using from your library, then only that code will be lazy-loaded by your page. Stencil knows about component interdependencies and how to lazy-load them accordingly.
There is a new experimental output target (called custom-elements-bundle) that allows you to bundle everything into one js file, which will simplify distribution in some cases. It's only available with the new refactored compiler (which is available using the --next flag, after installing #stencil/core#next) (Stencil 2 has been out for a while now).

Meteor.js with React - Why does the html page not render when I use .jsx, it only renders with .js

I am following the official tutorial from this link:
https://www.meteor.com/tutorials/react/components
I created my own project with a command in the terminal:
meteor create --react new-react-app
The command generated the file structure like in the tutorial only instead of getting imports/ui/App.js and /imports/ui/Task.js I got App.jsx and Task.jsx.
The problem is that the html file does not render the list when I start the server. Only if I change those files in a regular .js it works. Why?
Shouldn't we use .jsx, afterall I have chosen the project with React.js?

How to extract CSS to a `critical.css` stylesheet via an `import` statement with Webpack?

Background
Our web application follows a component-based design pattern, with each component containing a template, Sass partial, and JavaScript module, like so:-
components/action_button/_action_button.html.erb
/_action_button.scss
/action_button.js
The JavaScript module imports the component's Sass partial and the template is rendered via Rails. Webpack is configured with a number of loaders and plugins to compile the styles and extract (via mini-css-extract-plugin) the resulting CSS into a standalone stylesheet for each entrypoint e.g.:-
home.js => home.js, home.css
search.js => search.js, search.css
Components are imported into entrypoints based on usage (i.e. if action_button is present on 'home', then it's rendered somewhere within the view and import '~/components/action_button/action_button.js'; is declared within home.js.
The Problem
In order to improve the page loading experience we're manually #importing a select few component Sass partials into a critical.scss entrypoint, the outputted CSS is then inlined into the <head> of the document and the full stylesheets are loaded asynchronously.
Ideally, we'd like to do this dynamically and one method I've thought of is denoting the criticality of a component via the import statement. Perhaps using a custom loader?:-
import 'critical-loader!~/components/action_button/action_button.js';
The issue is that I've little idea of how that Webpack loader would work. I essentially want it to leave all existing rules in-place, but redirect the extracted CSS from Sass partials imported from within it to critical.css.
Does anyone know of an existing solution or have any idea of where to begin with a problem like this?

Categories

Resources