Workin' Styles Real Quick! Semantic for ReactJS

Web Dev bootcamps are a very draining experience. The deluge of information is unrelenting and difficult to manage. Anything that might be done to ease headaches could be considered a blessing!

In labs, there are many quirky projects that provide pre-built chunks of apps with nice looking CSS that let us focus on the work at hand. When it comes to scratch built projects however, we don't have that luxury. And sometimes you just want something nice to look at while you're slamming your head against the wall trying to unlock the functionality of your amateur logic.

In the past I have tried some other frameworks in the past but they've all left me a bit confused and unsure of their full potential. Recently I dove into Semantic UI for a React project, and I cannot believe how simple it was! So if you are like me and need shallow, pretty looking nascent web apps to keep you coding for your boot camp, check this out.

$ npm install semantic-ui-react semantic-ui-css

Throw that command into your bash. And then, in your entry file (which is often index.js) include this line at the top with your imports:

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

That's the setup. I know it's crazy!

Semantic is a front-end framework that allows you to style very quickly. Like Bootstrap, it has some pre-defined stylings and layouts that allow you to put together a site lickity split. Bootstrap is a bit more involved and is a bit more restrictive, so for a beginner, introduction Semantic styling components with Hooks in React has been a dream.

In any component you will be rendering UI elements that you will use Semantic for, you'll need an import line at the top like anything else.

import { Button, Divider, Form, Grid, Segment } from 'semantic-ui-react'

So what this line is doing is grabbing those five specific components from the Semantic frame work. Then you implement them in your just by calling them in your rendering.

<Segment placeholder>
    <Grid columns={2} relaxed='very' stackable>
      <Grid.Column>
        <Form>
          <Form.Input/>
          <Form.Input/>
          <Button content='Login' primary />
        </Form>
      </Grid.Column>
      <Grid.Column verticalAlign='middle'>
        <Button  />
      </Grid.Column>
    </Grid>
    <Divider vertical>Or</Divider>
  </Segment>/>

You can pass down props and logic through these just like any other component. This plug and play functionality is possible because Semantic has official integration with React. You can go to their official documentation and see a very lengthy collection of prebuilt objects you can pick and choose from. And if they don't have something you want, you can build it out in your own css file and reference it without the framework yelling at you.

This is a very basic entry into a framework that does have a decent amount of depth, but it is very easy to start playing around with. Hopefully, this can help you produce some slick styling in your developing apps.