JoniRinta-Kahila / portfolioproject

Intro to React

React portfolio

Open part 2 (SASS) =>

Back to clean Web version, click here

Technical requirements

• Personal GitHub account
• Responsive React web frontend
• Typescript template
• Functional React components
• SASS (syntactically awesome style sheets)
• CI/CD pipeline for GitHub pages

Workflow :

Initialize project

1. Create new GitHub Repository. Click to create new repository
   • Name the repo to e.g. portfolio.
   • Set repo to Public.
   • Do not use a hyphen (-) in the repository name. (hyphen in the url breaks the gh-pages)
   • Use only lowercase letters in the repository name.
2. Clone your new repository to local
   • Open cmd or terminal in the file path of your choice
   • Run command git clone [link to your git-repo]
3. Open the project folder in terminal
4. Create a new React project with npx command.
   • npx create-react-app@latest . --template typescript
     • Warning! If there comes a warning about vulnerabilities, DON'T try to fix them using any - Audit fix - commands, since those errors will not affect to your final React app, but fixing breaks the current React version.
   • Once the React is initialized, test it by running command npm run start
   • If everything works as expected, the browser will open and you will see the react logo in it.
5. Initialize the CI/CD pipeline
   • See docs/cicd
6. Commit your filechanges, then push.
   • git status show list of your project status
   • git add . add any new or modified files to the index.
   • git commit -m "commit message" make changes locally. Add a comment describing the changes
   • git push push your saved changes to the server

Start creation with TypeScript

1. The first step is to open the project in Visual Studio Code and delete unnecessary files from the project. Delete the following files
   • src/App.css
   • src/index.css
   • src/logo.svg
2. Open index.tsx file and remove imports from deleted files.
3. Open App.tsx file
4. Replace all contents in App.tsx with

// App.tsx
import React from 'react'
import MyFirstComponent from './components/myFirstComponent';

const App: React.FC = () => {
  return (
    <div>
      <MyFirstComponent />
    </div>
  )
}

export default App

5. Now the error Cannot find module './components/myFirstComponent' or its corresponding type declarations. appear

   • To fix it, create a folder at the ./src and name it to components
   • Create new file myFirstComponent.tsx in ./src/components

6. In the ./src/components/myFirstComponent.tsx paste next code in it and save.

import React from 'react'

type MyFirstComponentProps = {

}

const MyFirstComponent: React.FC<MyFirstComponentProps> = () => {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>This is my first component 😎</p>
    </div>
  )
}

export default MyFirstComponent

7. Run command npm run start again to see the changes.

8. Visual Studio Code Snippets

   • Snippets help you write code faster.
   • See docs/snippets

9. Remember to commit & push your code changes to github!

   • git status show list of your project status
   • git add . add any new or modified files to the index.
   • git commit -a -m "commit message" make changes locally. Add a comment describing the changes
   • git push push your saved changes to the server

Documentations

• TypeScript docs
• React docs

Open part 2 (SASS) =>