Flashcard Tutorial (14 Part Series)
How to start your own version of the project from scratch using create-react-app.
Download page Install Node if you don't have it already.
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.
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
Install React Testing Library
npm i semantic-ui-react npm install --save-dev @testing-library/react npm install --save-dev @testing-library/jest-dom
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.
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.
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="//firstname.lastname@example.org/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="//email@example.com/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.