I want to display the Root component inside my html file. I'm aware on how to do it with es5 using ReactDOM.render(<Root/>, document.getElementById('app')) but what about for es6?
Here's my html file:
<div id="app"></div>
Here's my js file:
import React, { Component } from 'react';
class Root extends Component {
render() {
return(
<div>
<h1>Testing</h1>
</div>
);
}
}
ReactDOM.render(<Root/>, document.getElementById('app'));
My attempt above the es5 way because I wasn't quite sure how to make this happen in es6, this obviously isn't working.
Note: I'm not using create-react-app for my project. I'm just trying things out outside of create-react-app environment and instead, onto other environments. I installed Babel and all the other stuff manually.
What can I do to make it work?
It looks like you're missing an import statement for the React DOM, because you will need it to render components to the DOM from React, unless you're importing those components from separate files.
import ReactDOM from "react-dom"
Add that after your first import statement.
Related
Building a package with UI components using CSS modules. Each component is totally separated from others and includes CSS styles like this:
import css from './styles.css'
const Component = () => {
return (
<div className={css.container}>Hello there!</div>
)
}
export { SearchBar }
In another package based on Next.js I want import a component like this:
import { Component } from '#me/components'
But Next.js doesn't allow Module CSS import from node_modules.
My question is how can I build the component package with CSS transformed into JS. It shouldn't be merged into one file just like Webpack do. Instead it should build each component separately. Also I don't want to import a huge CSS files with all styles merged into single file. Easiest way would be to use CSS-in-JS, but I want to use PostCSS written in CSS files.
I'm working through a React tutorial which uses old-school require syntax, and trying to update it to the more modern import syntax from ES6.
The tutorial suggests we start our JS file with the lines
var React = require("react");
var ReactDOM = require("react-dom");
require("./index.css");
I've figured out that the first two lines should instead read
import React from "react";
import ReactDOM from "react-dom";
but I'm stuck on the third line. What's the import version of requiring a CSS file?
(Normally I would just link the CSS in my HTML file - I assume the reason they're having us include it in the JS is so it will get minified and bundled? Are there other reasons?)
You can import css just like anything else!
import "/index.css";
I assume the reason they're having us include it in the JS is so it
will get minified and bundled?
You're right! Importing CSS inside your module allows tools like Webpack to properly scour the dependency tree and include your CSS file.
Assigning a module name to your CSS import also allows for some neat features.
For example, if you assign a module name to your import as follow,
import stylesheet from './index.css';
you'll now be able to treat the class selectors inside your stylesheet as properties of the module name, which makes it easy to assign styles to your component's DOM.
For example, you can now do:
import stylesheet from './index.css';
class ExampleComponent extends React.Component {
...
render() {
return (
<div className={stylesheet.myClassSelectorName}></div>
)
}
}
Just Import css in your file using import "FilePath/FileName";
i'm looking for a way to integrate grommet framework to a react app created with the cli.
I want to use react grommet components inside my app but there are some problems with the preprocessor SCSS. Today, I tried to integrate them in a lot of ways, I followed a lot of tutorials but It still doesn't working. Do you know or do you have success to use them together ? Thankss
For Grommet 1.x
If you don't want to add scss to your project, grommet-css is a great alternative. You can install it and import the css into your App.js.
Note that to customize the default theme you have to fork the repo, make changes like including a different default grommet style in index.scss or tweaking grommet scss variables. Then you have to update the name in package.json, run npm build, then run npm publish.
Here is an example using grommet and grommet-css
import React, { Component } from 'react'
import '../../node_modules/grommet-css';
import Heading from 'grommet/components/Heading';
import Box from 'grommet/components/Box';
export default class GrommetExample extends Component {
render() {
return (
<Box>
<Heading>Hello, I'm a Grommet Component styled with <a href='https://www.npmjs.com/package/grommet-css'>grommet-css</a></Heading>
</Box>
)
}
}
I am writing a React app with create-react-app which uses Webpack and the extract-text-plugin to generate bundled js and css files. Now I would like to know the filename of the generated CSS file in my JS file, like so:
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
{fileNameOfMyGeneratedCssFileHere}
</div>
);
}
}
export default App;
Is that even possible, maybe with a custom loader or Webpack plugin?
edit To clarify: create-react-app is not the problem here, I can eject it or create a custom configuration. My problem is how to know the CSS file name(s) from inside a JS script.
Import React vs Import React, { Component }
Which one is better and why?
Or does it make no difference other than writing less code later on?
Does writing { Component } mean it only imports the Component object?
import React, { Component } lets you do class Menu extends Component instead of class Menu extends React.Component. It's less typing and duplication of the React namespace, which is generally a desired modern coding convention.
Additionally, tools like Webpack 2 and Rollup do "tree shaking," meaning any unused exports are not bundled into your final code. With import React/React.Component you are guaranteeing all of React's source code will be bundled. With import { Component }, some tools will only bundle the code needed to use the Component class, excluding the rest of React.
The above paragraph is irrelevant in this specific case, because you always need to have React in the current namespace to write JSX, but only importing the exact modules you need in other cases may lead to smaller bundled code in the end.
Beyond that it's entirely personal preference.
What these are are named imports or namespace imports. What they do is basically copy over the module's contents into the namespace allowing:
import React, { Component } from 'react';
class SomeComponent extends Component { ... }
Normally, we'd extend React.Component, but since the Component module is imported into the namespace, we can just reference it with Component, React. is not needed. All React modules are imported, but the modules inside the curly brackets are imported in such a way that the React namespace prefix is not needed when accessing.
TLDR;
it's entirely personal preference.
Just a note…
import React, { Component } lets you do class Menu extends Component
instead of class Menu extends React.Component. It's less typing…
If you want to do less typing, then don't import Component in addition to React.
import React, { Component } from 'react';
class Menu from Component {
is more typing than:
import React form 'react';
class Menu from React.Component {
even if you consider auto-completion. ;)