Setup Flashcard App The Hard Way

#react #typescript #testing #tutorial

How to start your own version of the project from scratch using create-react-app.

1. Install Node Js

Download page Install Node if you don't have it already.

2.Install NPM

Download page
Install NPM. Once it is installed, open a command prompt and type 'npm-v'. Then hit enter. If NPM is installed, it will show you the version number.

npm-v

3. Use NPX, which comes with NPM, to run create-react-app

Create React App instruction page
Go to the directory where you want to create your project folder. Note: create-react-app creates a new folder inside the folder where you run it. So if you want to create your project in a folder /MyUserName/projects/flashcard, go to /MyUserName/projects and run create-react-app there. If you make the flashcard folder and run create-react app in it, you will end up with /MyUserName/projects/flashcard/flashcard

npx create-react-app flashcard --typescript

4. Use NPM, not NPX, to install the libraries

Install React Testing Library

Install Semantic-UI-React

npm i semantic-ui-react

npm install --save-dev @testing-library/react

npm install --save-dev @testing-library/jest-dom

5. Try to Run it

Once you have installed the libraries, navigate to the folder using your command line. Type npm start and hit enter and the default create-react-app should start running. It will likely open the web browser and show you a spinning React logo.

6. Add Semantic-UI-React styling

The easiest way to add the css styling that makes Semantic-UI-React components look right is to edit the index.html file and add a link to the Semantic-UI-React CDN.

If you want to install it a different way, look at this link.

Semantic UI React the easy way

Open the file %project directory%/flashcard-app/public/index.html
The top lines should look like:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
...more stuff below

Paste the following in below the favicon code

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" />

Now the top of your index.html should look like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
...more code below

You are ready to get started! Go back to the Introduction to see an explanation of what a test is, or go to the second post to make the first component.