Category: Week 9

Importing image files in Create React App

We had a problem serving image files in our application built with Create React App this week because we were trying to access them from our public folder in our JavaScript files that lived in our src > components folder.

The first error we got was: You attempted to import ../../public/images/001-saloon.png which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. The first way to fix this was to move the images into the src folder.

return (
  <img src="./images/cat.jpg" alt="" />
)

Then we needed to import the file path as outlined in the Create React App docs:

import catImgSrc from "./images/cat.jpg"

return (
  <img src={catImgSrc} alt="" />
)

Testing in React

Today we were practicing running tests on our React apps using Jest. To mimic the browser APIs that interact with the DOM Jest comes with jsdom set-up, which we use React Testing Library (RTL) to render our React components to.

We can import methods from RTL to render, access and fire events to the jsdom.

import React from "react";
import { render, screen, fireEvent } from "@testing-library/react";
import ToggleButton from "/filename";

test("The button changes text when clicked", () => {
  render(<ToggleButton>click me</ToggleButton>);
  // renders the React component
  const buttonNode = screen.getByText("click me");
  // finds an element with the specified text content
  fireEvent.click(buttonNode);
  // triggers the click event
  screen.getByText("just clicked");
  // checks if the same element now has the updated text content
});

Expressions vs statements

If you know how to use a programming language to build things, it can be easy to run away with your code without understanding the fundamentals behind why the syntax you used is working (hence why there is a whole book series called You Don’t Know JS). Until you hit an error of course!

Today we were practicing conditional rendering in React and it led us on a back-to-basics discussion about the difference between expressions and statements. I asked myself if I would be able to explain the difference to someone else and I wasn’t completely sure, so I decided to give myself an explicit reminder today.

In JavaScript expressions are any unit of code that can be evaluated to a value, so can appear anywhere where values are expected.

1 + 1; // arithmetic expression
"hello" + "world"; // string expression
1 < 2; // logical expression
"hello world"; // primary expression - a string literal

Statements do not resolve to values, they are instructions to perform actions.

const sum; // declaration statement

function greeting(message) {
  console.log(message);
} // function declaration statement

if (time < 18) {
  greeting("good day");
} else {
  greeting("good evening");
} // conditional statement - executes based on the value of the expression time < 18

In JavaScript you can write an expression where a statement is expected, but not the other way around.

console.log(const a); // trying to pass a statement as a function argument results in an error

React: Creating elements with nested JSX

This week we are learning React, and today we were covering the syntax for rendering HTML elements using JSX syntax.

If you want to render multiple elements in React, your JSX must return a single parent element that wraps the nested elements.

<!DOCTYPE html>
...
<main id="root"></main>
...
</html>

<script type="text/babel">
const root = document.getElementById("root");
const App = () => (
  <div>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
  </div>
);

{/* Invalid JSX
const App = () => (
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
);
*/}
   
ReactDOM.render(<App />, root);
</script>