01 - React JS: CSS Libraries - Semantic

Introduction

React has a lot of CSS libraries, being Semantic one of these.

Getting started

Install the Semantic dependency

If you only want to use Semantic as a dependency and use the default theme, install semantic-ui-css or semantic-ui-less:

Installing Semantic dependencies

# From the React project root
# Install the Semantic UI dependency
npm install semantic-ui-react
# Install the lightweight CSS dependency
npm install semantic-ui-css
# or...
npm install semantic-ui-less

Importing components

In the main file, import the semantic-ui-css library:

index.js

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

Import the components that you need from the semantic-ui-react library:

Importing components from Semantic library

import { Card, Image } from 'semantic-ui-react';

// Now we can use the components from Semantic
const PersonCard = ({person}) => (
    <Card>
        <Image src={person.image} wrapped ui={false} />
        <Card.Content>
            <Card.Header>{`${person.name} + " " + ${person.surname}`}</Card.Header>
            <Card.Meta>
                <span className='age'>Age: {person.age}</span>
            </Card.Meta>
            <Card.Description>
                Job: {person.job}
            </Card.Description>
        </Card.Content>
        <Card.Content extra>
        <a>
            <Icon name='user' />
            {person.friends} friends
        </a>
        </Card.Content>
    </Card>
);

// Export the PersonCard object
export default PersonCard

After that, the component PersonCard is reusable in any other React component:

Using the new PersonCard component

ReactDOM.render(
    <App>
        <PersonCard
            person = ({
                image: "https://i.imgur.com/MK3eW3As.jpg",
                name: 'Katherine',
                surname: 'Johnson',
                age: 101,
                job: 'mathematician',
                friends: 2
            }) />
    </App>
)