Module 4 - Advanced Styling Techniques

How to Build It

Create React App

Here's the official website for CRA. Some of the key points listed by the developers are:

• Only one dependency
• Get started in seconds
• Easy to maintain

Assuming you have NodeJS and npm properly installed and updated, the installation is as easy as:

npx create-react-app my-app
cd my-app
npm start

Where my-app is the name of the root project directory. The code above will create the project tree and launch the development server running a sample app at port 3000. From this point, you can open the project directory in your local editor and make real-time updates to App.js. The project tree will look similar to this:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
    └── setupTests.js

Pro Tip: for the project to build, these files must exist with exact filenames: public/index.html is the page template; src/index.js is the JavaScript entry point.

Notice how the tool also creates files and scripts for testing. You will learn how to do testing in React at a later Core Competency.

To update the tool and its development dependencies when a new version is released, you should use the following:

npm install react-scripts@latest

Finally, when you're ready to deploy to production, run the following command to create a minified bundle that can be uploaded to your remote web server:

npm run build

Take some time to inspect the contents of index.html and index.js. Notice how they "connect" the root DOM element to the App component and how essential modules are exported and imported.

Alternative Tools

As of today (July 2023), on the official React website, you will find the following:

To build an entire app with React, we recommend a full-stack React framework like Next.js or Remix.

A framework is a collection of tools designed for streamlined development. While create-react-app can also be considered a framework, NextJS and Remix offer extra capabilities that might interest some projects.

Keep in mind that as scaffolding tools get more versatile and powerful, the more you will have to study, practice and risk running into issues. The beauty of CRA lies in its simplicity and ease of use!

NextJS

NextJS has been designed to be a full-stack web development framework tightly aligned with React. You will have access to tools like Dynamic HTML Streaming, React Server Components, Data Fetching, CSS Styling, and Route Handlers. But you won't need to use many of these capabilities until you start working with complex applications and full-stack development.

Installing NextJS and firing up the local development server is also straightforward:

npx create-next-app@latest
npm run dev

Once again, take some time to inspect the project tree and recognize all the key files and how they are linked. Refer to Next.js website for documentation and tutorials.

Remix

The Remix framework is all about creating great looking User Interfaces. Remix has its own syntax and exposes tools to create routes (pages, URIs) easily and styling through templates. Similarly, you would initialize a project and spin up the local server with the following:

npx create-remix@latest --template remix-run/template my-app
npm run dev

Check out all the templates and example tutorials at the Remix website.

npm install reactstrap

npm install bootstrap

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

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"
/>

How to Build It

Let's revisit the Random Picture. Before anything else, go into the project directory and install Reactstrap per the instructions above. Then edit the App.js file to test some styled-components:

import React, {useState, useEffect} from 'react';
import axios from 'axios';
import { Alert } from 'reactstrap';

export default function App() {
  const [pic, setPic] = useState("");
  const [info, setInfo] = useState("");
  useEffect( () => {
    axios
      .get("http://localhost:9009/api/pics/random")
      .then(res => {
        setPic(res.data.file);
        setInfo(res.data.detail);
      })
      .catch(err => console.log(err));
  }, []);

  return (
    <div className="App">
      <h1>This is a nice random picture!</h1>
      <img src={pic} height="300px" alt="a random picture" />
      <Alert>{info}</Alert>
    </div>
  );
}

And just like that, you get a good-looking message box in your UI!

Now, instead of clicking on the browser's refresh button to get a new picture, you can add a styled button and assign a callback:

import React, {useState, useEffect} from 'react';
import axios from 'axios';
import { Alert, Button } from 'reactstrap';

export default function App() {
  const [pic, setPic] = useState("");
  const [info, setInfo] = useState("");
  const refreshPage = () => {
    window.location.reload()
  };
  useEffect( () => {
    axios
      .get("http://localhost:9009/api/pics/random")
      .then(res => {
        setPic(res.data.file);
        setInfo(res.data.detail);
      })
      .catch(err => console.log(err));
  }, []);

  return (
    <div className="App">
      <h1>This is a nice random picture!</h1>
      <img src={pic} height="300px" alt="a random picture" />
      <Alert>{info}</Alert>
      <Button color="success" size="lg" onClick={refreshPage}>RANDOM PICTURE</Button>
    </div>
  );
}

You may have noticed that you can customize some styles by changing the props. Very nice!

For a complete list of elements and available styles/props, please take a look at the official documentation. For instance, this is the Button page. Notice how onClick is one of the available props and uses the same syntax as the regular React <button>.

Take some time to experiment with these interesting elements:

• Card: a flexible and extensible content container for pictures, text, links, etc.
• Carousel: a slideshow component for cycling through images.
• Spinner: the famous spinning wheel you can use to tell the user that the app is waiting for remote data!

npm install styled-components

How to Build It

Once again, go to your Random Image app, and edit the App component back to:

import React, {useState, useEffect} from 'react';
import axios from 'axios';

export default function App() {
  const [pic, setPic] = useState("");
  const [info, setInfo] = useState("");
  const refreshPage = () => {
    window.location.reload();
  };
  useEffect( () => {
    axios
      .get("http://localhost:9009/api/pics/random")
      .then(res => {
        setPic(res.data.file);
        setInfo(res.data.detail);
      })
      .catch(err => console.log(err));
  }, []);

  return (
    <div>
      <h1>This is a nice random picture!</h1>
      <img src={pic} height="300px" alt="a random picture" />
      <h3>{info}</h3>
      <button color="success" size="lg" onClick={refreshPage}>RANDOM PICTURE</button>
    </div>
  );
}

You are back to using regular JSX and the default <button>. Please ensure the app works in the browser, and check the console for any warnings or errors.

Now import styled-components and create a custom Button:

import React, {useState, useEffect} from 'react';
import axios from 'axios';
import styled from 'styled-components';
const Button = styled.button``;

export default function App() {
  const [pic, setPic] = useState("");
  const [info, setInfo] = useState("");
  const refreshPage = () => {
    window.location.reload();
  };
  useEffect( () => {
    axios
      .get("http://localhost:9009/api/pics/random")
      .then(res => {
        setPic(res.data.file);
        setInfo(res.data.detail);
      })
      .catch(err => console.log(err));
  }, []);

  return (
    <div>
      <h1>This is a nice random picture!</h1>
      <img src={pic} height="300px" alt="a random picture" />
      <h3>{info}</h3>
      <Button onClick={refreshPage}>RANDOM PICTURE</Button>
    </div>
  );
}

Let's study the code above. First, we added two lines outside of the function:

import styled from 'styled-components';
const Button = styled.button``;

Which are, the actual import and the creation of the Button styled component. Styled components should always be declared outside of the component function.

What about this syntax: const Button = styled.button``;

When you create a Styled Component, you call a method from the default export (styled) and pass a string literal as an argument. You can learn all about string literals here, but in summary, by using back-ticks, you can pass multiple strings to a function, including the result of expressions. In the example above, we create the default component with no arguments.

Next, you have replaced the JSX with the styled component:

<Button onClick={refreshPage}>RANDOM PICTURE</Button>

Now change the styled component declaration to:

const Button = styled.button`
  background: cyan;
  border-radius: 3px;
  border: 2px solid #BF4F74;
  color: #BF4F74;
  margin: 0 1em;
  padding: 0.25em 1em;
`;

Can you see what's happening here!? You can add regular CSS code inside your literal string, which works! The possibilities are now endless.

Try something else: create a new styled component by adding the following:

const WrapperDiv = styled.div`
    width: 80%;
    height: 80%;
    background-color: light-grey;
    padding: 2em;
`;

And substitute the root JSX <div> with <WrapperDiv>:

return (
  <WrapperDiv>
    <h1>This is a nice random picture!</h1>
    <img src={pic} height="300px" alt="a random picture" />
    <h3>{info}</h3>
    <Button onClick={refreshPage}>RANDOM PICTURE</Button>
  </WrapperDiv>
);

And that's how it works! You can basically create new "tags" using this syntax and use them as you would do with regular HTML tags and the class="" attribute. Please refer to the official documentation for all the power available with Styled Components.

While this is cool, it seems too much work for just using CSS code inside JS... Until you realize that there is so much more, you can do by taking advantage of a key feature of React components: props.

Some pictures look better over a dark background. Let's make a few changes:

• Add state to keep track of "Dark Mode";
• Create a simple button to change the state;
• Pass the darkOn value as a prop to WrapperDiv;
• Calculate/interpolate the background color by using an expression to evaluate the prop value inside the string literal.

Study this final code and imagine the possibilities of using props with Styled Components:

import React, {useState, useEffect} from 'react';
import axios from 'axios';
import styled from 'styled-components';

const Button = styled.button`
  background: cyan;
  border-radius: 3px;
  border: 2px solid #BF4F74;
  color: #BF4F74;
  margin: 0 1em;
  padding: 0.25em 1em;
`;

const WrapperDiv = styled.div`
    width: 80%;
    height: 80%;
    background-color: ${props => props.darkMode ? "dimgrey" : "gainsboro"};
    padding: 2em;
`;

export default function App() {
  const [pic, setPic] = useState("");
  const [info, setInfo] = useState("");
  const [darkOn, setDark] = useState(false);
  const refreshPage = () => {
    window.location.reload();
  };
  useEffect( () => {
    axios
      .get("http://localhost:9009/api/pics/random")
      .then(res => {
        setPic(res.data.file);
        setInfo(res.data.detail);
      })
      .catch(err => console.log(err));
  }, []);

  return (
    <WrapperDiv darkMode={darkOn}>
      <h1>This is a nice random picture!</h1>
      <img src={pic} height="300px" alt="a random picture" />
      <h3>{info}</h3>
      <Button onClick={refreshPage}>RANDOM PICTURE</Button>
      <button onClick={()=>setDark(!darkOn)}>Change Background Color</button>
    </WrapperDiv>
  );
}

Notice how you can choose whatever name for the props. You are using darkMode here, so make sure to use the same name inside the evaluation expression.

String literals allow expressions to be evaluated with the ${} syntax. With Styled Components and props, the expression is always a callback function that receives the props.

With this and much more that you can learn from the styled-components docs, you can move styling into the JS component file, create dynamic reusable components, and even design your style library!

Styling with Styled Components Part A

Styling with Styled Components Part B