How to apply CSS style to custom React component - javascript

I created a demo react app with 'npx create-react-app my-app'. When I try to apply style to React component nothing happens, but when I apply it to a normal HTML tag like <div or <p> it works. I do not why.
I also tried adding :local in the css file like: :local(.taken-frame)
// index.js =================
import './style.css';
ReactDOM.render(
<TakenFrame className="taken-frame"/>,
document.getElementById('root')
);
// style.css ===============
.taken-frame{
color: blue;
}

Css styles are applied to JSX elements in react but not to the component
Wrong way of applying css styles but className is still a valid prop to the component. You can access this using this.props.className and pass to the div as className like I mentioned in right way example
<TakenFrame className="taken-frame" />
Right way of applying css styles
class TakenFrame extends React.Component {
render(){
return(
<div className="taken-frame">
</div>
//OR
<div className={this.props.className}>
</div>
)
}
}

I use the following style:
import styles from 'yourstyles.css'
...
class TakenFrame extends React.Component {
render(){
return(
<div className={styles.classNameDeclaredInCssFile}>
</div>
)
}
}
yourstyles.css file should look something like:
.classNameDeclaredInCssFile{
//... your styles here
}
In your case you are simply passing a property called "className" to your component but not using it. In your component if you did something like:
class TakenFrame extends React.Component {
render(){
return(
<div className={this.props.className}>
</div>
)
}
}
It would work I expect but I prefer to keep my styles assigned to each component, I find it adds confusion for me as a developer when I am passing styles around the component hierarchy a lot. I hope this helps.

You could use styled components as-well. Please refer https://glamorous.rocks/basics

Related

Using Custom HTML Properties in Meteor with React

Using React with Meteor, how can I render a HTML tag with custom properties?
For example,
<div class="page-header-image" data-parallax="true" filter-color="orange" style="background-image: url('./assets/img/header.jpg');">
has custom property filter-color="orange" which we want to render using the render function of a Reat.Component:
import React from 'react';
export default class Home extends React.Component {
render() {
return (
<div className="page-header-image" filter-color="orange" style={ {backgroundImage: "url('./assets/img/header.jpg')"} }></div>
);
}
}
Also, is there a neat way to include these properties especially when you have many tags with custom HTML properties?

Aurelia component binding

I'm new to this framework and I was wondering whether or not there's a component binding that allows you to specify the component to be used on a regular HTML element and not a custom one.
Let's say we have a Message component. Would it be possible to use it as:
<div component="message"></div>
instead of
<message></message>
Knockout.js supports this for their components: The "component" binding.
Yep! You can use the as-element custom attribute to do this.
Here's an example: https://gist.run?id=5fc98df81dff7eec2868ea918f6342fb
app.html
<template>
<require from="./message"></require>
<message say="Say"></message>
<div as-element="message" say.bind="what"></div>
</template>
app.js
export class App {
what = 'What!'
}
message.html
<template>
<h1>${say}</h1>
</template>
message.js
import {bindable} from 'aurelia-framework';
export class MessageCustomElement {
#bindable say = '';
}
rendered

How to "dangerously" set plain text of JSX in React.js?

As we know from the documentation of React, we can dangerously set custom HTML in the JSX component like this:
<div dangerouslySetInnerHTML={{__html: '<b>Hello</b>, <i>World</i>'}} />
The question is that are we able to set plain text JSX in other JSX component like this:
import { Button } from 'react-bootstrap'
...
<div dangerouslySetJSX={{__jsx: '<Button>Hello</Button>'}} />
or some else way.

React | Multiple render

I just want to know if there is any way I can "draw" in my index.html multiple <div id = "x" /> <div id = "y" /> with REACT, i mean.. i have all my site on index.html with all my template, so i only need to use REACT on an specifics sections...
i tried this i didnt work
HTML
<div id="test" />
<div id="app" />
<script src="public/bundle.js" charset="utf-8"></script>
JSX
import React from 'react';
import {render} from 'react-dom';
class App extends React.Component {
render () {
return (<h1>App</h1>);
}
}
class Test extends React.Component {
render () {
return (<h1>Test</h1>);
}
}
render(<App/>, document.getElementById('app'));
render(<Test/>, document.getElementById('test'));
then when i load the page only prints the <h1>Test</h1>... why?
I created a JSFiddle to try a few things out here: http://jsfiddle.net/pof580fd/1/
I found out that by explicitly closing each of the <div> tags I could get it to work, i.e.:
<div id="test"></div>
<div id="app"></div>
I did a little research and it appears that as div is not one of the HTML5 "void elements" (Listed here: https://www.w3.org/TR/html5/syntax.html#void-elements) it is not self-closing and you must use </div>. See this SO question for more details: Are (non-void) self-closing tags valid in HTML5?
Possibly some browsers are lenient about this (I'm using Chrome 52 right now) - but React is not, it appears. The error message I see in the console is:
Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.
(Make sure you're using the "dev" version of React to see these)
You can create a new component and call from that.
import App from "./App";
import Test from "./Test";
class Program extends React.Component {
render() {
<div>
<div id="app"><App /></div>
<div id="test"><Test /></div>
</div>
}
}
and then call
render(<Program />), document.getElementById('...'));
We created a framework to do this with great success.
Have a look at React Habitat.
With it you can just register components eg:
container.register('SomeReactComponent', SomeReactComponent);
Then they auto resolve in the dom via:
<div data-component="SomeReactComponent"></div>

Reactjs render component before other components

How can I specify that a component should be rendered absolutely before any other component?
I want to specify that <Footer /> and all the child components of footer should be rendered before any other components.
The reason I want this is because I have code that depends on the html that footer is rendering which means that the reference to <Footer /> is undefined in the other components if <Footer /> doesn't render first.
Here's an example:
export default class Layout extends React.Component {
...
render(){
return (
<Body />
<Footer /> //Render first
);
}
}
The only way I see for you do do that is:
Have the information about the render status for the footer in a state. (Let's assume your name it isFooterRendered and it is a boolean)
You set isFooterRendered to be false in the initial state.
You only render the children components when isFooterRendered is true
In componentDidMount you will have a reference to Footer, set isFooterRendered to be true.
(Some people claim that it's bad to setState on componentDidMount but in your case looks like a legit use case, aside from that React Docs expose a similar example)

Categories