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.
Top comments (0)