Semantic-ui-react: Please document how to import js into a 'create-react-app' project

[realtebo]

I'm starting usign create-react-app to create a new project.

I understand I need both

npm install semantic-ui-react --save

and

npm install semantic-ui-css --save

For the csss I can

import '../semantic/dist/semantic.min.css';

But how to import the javascript?
Also: are them dependecies or dev-dependencies ?

[andrewhl]

I'm using this in CRA, and it's quite simple. You're almost there. You just need to import the components you want to use from the semantic-ui-react module, using the ES6 import syntax.

import React, { Component } from 'react';
import { Button, Icon, Grid } from 'semantic-ui-react';

class ExampleComponent extends Component {

    render() {
        return (
            <Grid>
                <Grid.Column width={15}>
                    <p>
                        Lorem ipsum...
                    </p>
                </Grid.Column>
                <Grid.Column width={1}>
                    <Button basic circular icon="photo" floated="right" />
                    <Button basic circular icon="video" floated="right" style={{marginTop: 5}}/>
                </Grid.Column>
            </Grid>
        )
    }

}

export default ExampleComponent;

Optionally you can use the CommonJS require syntax if you're not using ES6:

var Button = require('semantic-ui-react').Button;

You'll want these to be saved as dependencies, not dev-dependencies. From the npm documentation:

With the --production flag (or when the NODE_ENV environment variable is set to production), npm will not install modules listed in devDependencies.

[AaronHarris]

@andrewhl Just realized the Usage page may not be obvious to newcomers. Your comment should be included in the docs under the JavaScript section.

[andrewhl]

@AaronHarris @realtebo I will submit a PR.

[levithomason]

Every example for every component includes fully functional import statements. I chose to include import statements in the browser hoping to clarify exactly this issue. I wanted the examples to be fully functional so that newcomers could copy the full example to their project and it would work exactly as is.

I can see how these could be missed during first time setup as you'd have to click the code icon on one of the examples to see them. Can anyone comment on whether or not they saw these code examples and how they might be more helpful?

http://react.semantic-ui.com/elements/button

[brianespinosa]

@levithomason I think the pattern for code examples being completely literal is great. The UI pattern to see a code example upon clicking the icon to see it expanded is also something people should be familiar with from other UI kit docs. Basically I think the current examples are great, especially for those very new to React.

I don't think there's a way to make it simpler for those new to React or ES6 syntax for using imports other than maybe a paragraph and a screenshot in the setup docs that points out the two buttons showing the React component usage and the rendered HTML.

[realtebo]

Yes, I agree.
Every single examples is simply greatly documented.

As newbie, I thinked, seeing a row for importing css, that there will be a row about import a module.

The compromise could be to simply add a row explaining that

"we will not import a module, but single pieces when needed (see the docs, for example [then add a link to Button] )."

[jasan-s]

IS is possible to import individual components from this lib using create react app without ejecting?

[levithomason]

@jasan-s yes, see https://github.com/Semantic-Org/Semantic-UI-React/issues/1522#issuecomment-289872383. We support using any bundler or no bundler.

tl;dr
Probably this path would work:

import Button from 'semantic-ui-react/dist/commonjs/elements/Button'

[layershifter]

Your import isn't correct, there is missing from keyword.

[Ramblurr]

I can't get the css import to work in a new create-react-app project. Has something changed?

./src/App.js
Module not found: You attempted to import ../semantic/dist/semantic.min.css which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

edit: Something has changed! The import path for the css file is now:

import 'semantic-ui-css/semantic.min.css';

Found it by RTFM here: https://react.semantic-ui.com/usage#semantic-ui-css-package

Sorry for the noise.

[terenceponce]

I ran into this issue today. It looks like everyone resolved this issue by just using the semantic-ui-css npm library for the import.

What about for people who want to use the whole package?

I installed the full package because I want the theming capabilities:

yarn add semantic-ui --dev

Using this generates a lot of files and directories which happens after resolving a bug regarding Semantic UI's install script and yarn. Among these generated stuff is a configuration that tells gulp to compile SUI into the dist/ folder.

The index.js file in my create-react-app looks like this:

import '../dist/semantic.min.css';

This won't work because the compiled file is outside src/. Is there another solution for this aside from moving the output directory into src/? It kind of feels silly since dist/ is supposed to be on the same level as src/, not inside of it.

[brianespinosa]

@terenceponce I run my current project with a full install of SUI core because I also use the theming capabilities. When you install the core SUI project, you can pick where the output files go. Don't run the default install. Instead go through the custom install. You can also select the components you need too and get a smaller CSS package if you are not using everything.

Just change the dist folder to be in your src folder somewhere and you're good.

[terenceponce]

@brianespinosa How do you run the custom installation through Yarn? As for the location, it looks like there really is no way around putting the dist folder inside src.

[brianespinosa]

@terenceponce when you FIRST install semantic-ui and you select the custom install from the options you are presented, it will create a semantic.json file based on your selections. This file will control where everything gets output when you run your gulp build. It is located in your project root. You can also create your own if you want. There's an example of this file in the core documentation here: https://semantic-ui.com/introduction/build-tools.html

These attributes control where your build files go: "output": { // packaged source (both compressed/uncompressed) "packaged" : "dist/", // uncompressed source "uncompressed" : "dist/components/", // compressed source "compressed" : "dist/components/", // output directory for theme assets "themes" : "dist/themes/" },

Setting packaged to .../src/ I assume should get you into your src folder, provided it's a sibling of dist.

There's also a root attribute called autoInstall that you can set as true (it's boolean) that will run through the installation automatically once you have everything installing and outputting where you want it. That way anyone else working on your project will never see the install process screens on a fresh install and they can't accidentally install SUI into the wrong location.

None of the above has anything to do with how SUIR works by the way. If you require additional help with customizing the build location of your SUI core package, you'll receive better help in the core repository... but hopefully this gets you what you need.