I'm currently learning React.js, knowing that it is just the view of MVC. I have come from a Angular stack and I'm starting to worry about a few things with React.js.
One of them being if you have a partial html file how can you inject that file into another to build a functioning html file.
For example. How would i go about including a header, body and footer files into one?
I've read about dangourouslyinnerHTML which I don't want to use for XSS reasons. Is there a different way that I'm missing? Or is this something I will have to get gulp to compile?
As discussed in the comments, the React paradigm is a bit different. React is built on the concept of components which contain events, HTML, and CSS in JavaScript.
For example, you could have a Head, Body and Footer component that would all be rendered in your App component. This example uses JSX:
var App = React.createClass({
render() {
return (
<div>
<Head />
<Body />
<Footer />
</div>
);
}
});
The Head, Body and Footer components would look similar, each with their own render function that returns HTML in it.
I recommend reading the Thinking in React section of the React Docs.
Related
I have made SPA create-react-app. In the core there is a pharsal player with translations:
It has many dependencies like wavesurfe.js, material-ui, lodash, etc.
Under the hood there is a simple table with content:
Now I want to make a single js file for just a player. For add it directly to html file with and it'll render player from DOM element
<div id="frazy-player">Content of material </div>
But whole app has router, drawers with heading (playlist), homepage etc. - that I don't need in local version.
How to bield react component with many dependencies to single js file, which will be rendered into given DOM element locally, in simple HTML file?
Working demo with player is here.
I am from Angular Background and as far as I know. Each component has its own beauty and till we import a CSS file inside itthose CSS classes should not be applied even if we add to HTML Elements to the component in case we have not added or imported any CSS files for classes used inside this new/2nd component.
What I did in React was made 2 components - Home1.js and Home2.js. When I am importing a css file named Home.css to Home1 Component and NOT to Home2.js component - How in the world is those CSS classes affect being applied even too Home2 Component. This is sheer absurd.
That's why I am importing someFile.css **specifically** to the component where I want its affect to be there. This provided a kind of encapsulation affect, which I am seeing is failing. Now, someone can explain me how in the world, wherever I am not importing someFile.css, there also the classes are having affect?
Home1.js
import React, { Component } from 'react';
import './home.css';
class Home1 extends Component {
render() {
return (
<div>
<div className="red">1...</div>
<div className="green">2...</div>
<button>click</button>
</div>
)
}
}
export default Home1;
Home2.js
import React, {useState} from 'react';
const Home2 = () => {
return (
<div>
<div className="red">1..</div>
<div className="green">2...</div>
<button>click</button>
</div>
)
}
export default Home2;
Result:
Angular does it through viewEncapsulation, but this notion does not exists in react. You either need to scope your css manually by adding a main class on the top node of your component, or use a library that can do it for you (haven't tried it, you can refer to #Abdelrhman Arnos comment).
In React, like someone already had commented, you need the CSS modules to handle your problem. Actually, it's already included in the css-loader, which is a very basic module you need for webpack to handle the CSS files in the bundling process. I am not sure if you build your React app from the ground up, but I am quite sure you already had this module in your project.
{
loader: 'css-loader',
...
options: {
// Automatically enable css modules for files satisfying `/\.module\.\w+$/i` RegExp.
modules: { auto: true },
},
},
I believe you are an experienced web app programmer, and just complaining about the design of the React, but I would like to provide a little basic knowledge of browser rendering mechanism here for whom just start learning web programming and thinking about the same question.
The basic of the rendering engine in the browser is interpreting the HTML, XML documents. After loading assets by such as <script>, <style>. There are a couple of steps to complete the rendering. The step to apply CSS rules on pixels is Style calculations.
What browser does is very simple, it takes the CSS files, applies the rules, something about the scope of the styles really rely on the practice of library/framework, you can imagine that the best they can do is preprocessing the CSS files and add some unique properties to each CSS rules corresponding to the specific class names it can find in your code.
Where to import the CSS file is just for readability and maintainability. In the old times, when people still program web app with jQuery or pure JS, you just include the CSS file in the .html file, maybe it forces you to care about the naming of the classes and styles earlier, but actually we also have the same problems when you try to separate it for bigger projects.
I have one react app which provides multiple components like <Button> <Label>. I want to render those component inside apsx page.
For example.
<div>
<ReactComponent/>
</div>
I know we can use iframe in aspx page to render react app or #script.render in cshmtl file. But am looking for some another way to render inside aspx page.
am new to dot net. I have created one ASP.Net web Application using MS visual studio.Any help would be really helpful..
Got this github link for this. enter link description here
Now I want to understand how I can add multiple react components, webpack, babel, package.json etc.
You could create a with a class (e.g. "react-component") and then in your JS code do the following:
ReactDOM.render(, document.querySelector('react-component'));
TLDR: Does anyone know of an elegant way to make sure a component injects its own <style>{...everything in ./dist/vue-COMPONENT_NAME.css}</style> element into the page, but only once? SSR friendly too?
I've been on the hunt for a good solution to this for over 2 days now; I'm building a Vue component that is likely to be used by mostly non-built, client side environments, included in the page via script tag:
<script src="https://unpkg.com/vue-COMPONENT_NAME/dist/vue-COMPONENT_NAME.js"></script>
And, normally you would just use a link tag to get the styles in there:
<link rel="stylesheet" href="https://unpkg.com/vue-COMPONENT_NAME/dist/vue-COMPONENT_NAME.css">
..but I would like remove the requirement to add the additional (possibly forgotten) link tag to the page. I would like for this component to be able to automatically inject its required styles into the page, so it is never displayed in an un-styled state.
This is a graphics focused component using a Canvas for display, and some of its internal logic is built on analyzing the clientBoundingRect of the top level DOM node - So having the styles that set its size and proportions at mount is imperative.
I am also planing on using this component myself via Nuxt, so I'm going to have to make sure that whatever solution I come to avoids the dreaded "The client-side rendered virtual DOM tree is not matching server-rendered content." error message.
So far, I have been loving how low-configuration the build with vue-cli has been:
vue build vue-COMPONENT_NAME.vue --prod --lib VueCOMPONENT
...but its output is always the two files:
./dist/vue-COMPONENT_NAME.js
./dist/vue-COMPONENT_NAME.css
Is there an argument or configuration prameter for vue-cli that would cause it to build the styles into ./dist/vue-COMPONENT_NAME.js? Has anyone done anything like this with vue-cli?
The page shows basic markup, comforting message and loading indicator.
<html>
...
<body app>
...page layout and loading stuff...
</body>
</html>
And root component is
#Component({
selector: 'body[app]',
template: `<ng-content></ng-content>`
})
App {}
A plunker that demonstrates the problem is here.
After SPA initialization it is supposed to bootstrap body element and compile components while saving existing basic layout.
However, root component just ignores ng-content.
This leads to two options. The initial layout should be dumped and shown only after bootstrapping. Or it should be duplicated in both root component template and HTML document (likely with server-side templating). None of them looks good enough.
body contains sensitive markup that cannot be just wrapped into child component to overcome this limitation. I intend to use Angular Universal to provide SPA with neat static preview, but not at this stage.
It looks like it is a known problem but I'm unable to find a workable solution.
How can it be fixed?
The link below has been given the status fixed by ivy. Ivy is a milestone for angular v7.0.
Transcludes are not supported on the root element, you can't pass anything to it because index.html isn't part of angular. If you can't embed the html within another component then I wouldn't expect it to work with ng-content either.
From https://github.com/angular/angular/issues/1858#issuecomment-207993202
Components only work as components when referenced in the template of
another component, yet they are expected to be used outside of this
which causes confusion
Using <ng-content> in root component planned to be implemented.
https://github.com/angular/angular/issues/4946