reactjs 기본 개념을 사용하여 1시간 이내에 Reactjs의 포트폴리오🐱‍💻🕺 사용🔥

시작하자 👋Perquisites

비주얼 스튜디오 코드 설치됨

nodejs 설치됨

그리고 기본적인 인터넷 연결🔌

firebase CLI(앱을 호스트하려는 경우 명령줄 인터페이스 show it to the world )

👉 Github Repo Fork/⭐/Clone it

1 단계
mkdir myportfolio를 사용할 수 있지만 그럴 필요는 없습니다. Windows 터미널/CMD로 이동하여 입력하기만 하면 됩니다.npx create-react-app myportfolio그 후 반응 앱을 실행할 준비가 된 다음 다음을 입력하십시오.npm start Windows
iOS에서 yarn start그러면 아래 interface🔽가 표시됩니다.

그 후에는 이와 같은 구조가 필요합니다🔽 구성 요소와 이 기사의 모든 구성 요소에 대해 걱정하지 마십시오.



앱에서 가장 중요한 파일은 앱에서 모든 것을 렌더링하는 데 도움이 되는 App.js입니다. 그런 다음 해당 폴더에서 모든 것을 제거하고 코드 아래에 이것을 입력하고 서버를 다시 시작하여 작동하는지 확인하십시오.

import React from 'react';
import './App.css';//already included file in our app



function App() {
  return (
    <div className="App">
   <h1>Your going to Rock The Beatles!</h1>
    </div>
  );
}

export default App;

그런 다음 브라우저에서 localhost:3000 port를 볼 수 있습니다. Rock The Beatles에 가는 중입니다!

2 단계:

이 섹션에서는 구성 요소로 이동하므로 cup🥛/☕로 노트북을 준비하고 App.css를 모두 제거해야 합니다. 이 앱을 빌드하기 위해 부트스트랩 라이브러리를 사용할 것이므로 아래 명령을 중지하여 실행해야 합니다. CTRL C로 명령줄에 있는 서버
npm install react-bootstrap bootstrap
그런 다음 react-bootstrap 웹사이트 import thing 문에서 CSS 항목을 가져와야 합니다. 아래에 나와 있습니다.
import 'bootstrap/dist/css/bootstrap.min.css;
아래의 구성 요소

모든 구성 요소를 생성하려면 src/components에 하나의 폴더를 생성해야 합니다. 해당 구성 요소 폴더에서 우리는 앱의 홈페이지를 위한 하나의 파일을 빌드할 것입니다. 아래를 참조하십시오.



알아야 할 사항은 https://react-bootstrap.github.io/components/jumbotron/의 Jumbotron 카드와 링크가 포함된 html 태그가 있는 몇 가지 기본 버튼을 사용하는 것입니다. 비교하기 쉬운 기능적 구성 요소를 여기에서 사용할 것입니다. 클래스 기반 구성 요소이지만 동일하지만 구조가 복잡하고 위의 코드 줄에서 해당 버튼을 가져와야 합니다. 해당 반응 패키지에서 Jumbotron을 가져와서 앱을 내보내야 합니다. 어딘가에서 가져와야 하고 코드에 대해 걱정할 필요가 없기 때문입니다 i 마지막에 내 저장소를 포함할 예정이지만 이 모든 것을 작성하는 것은 고통이지만 나는 ❤it 및 또한 다른 생산적인 작업이 없습니다!.

*App.js의 첫 번째 구성 요소 *

첫 번째 섹션에 따라 우리는 첫 번째 구성 요소를 만들었습니다. 앱의 브라우저에서 변경 사항을 보려면 App.js 파일에서 해당 구성 요소를 가져와야 한다는 것을 알고 있습니다. App.js 파일에 아래 항목을 추가하겠습니다.

import 'bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import './App.css';
import Jumborton from './components/Jumborton';



function App() {
  return (
    <div className="App">
    <Jumborton/> //Self closing component in react for rendering that 
    </div>
    //Jumborton.js App file in Our App.js that's it if you want more then i can help comment below
  );
}

export default App;

이와 같이 아래에 나열된 다른 구성 요소를 만들 것입니다.

바닥글.js

소셜.js

프로젝트.js
그리고 이 모든 구성 요소에 우리 자신의 것을 추가한 후 위의 파일에서 해당 구성 요소를 내보내고 App.js 파일에서 가져온 다음 모든 구성 요소를 자동으로 닫은 다음 완료해야 합니다.
여기에서 Social.js 파일을 참조하세요. **

**바닥글.js

그리고 index.html의 공용 폴더에 우리는 fontawesome cdnbootstrap 저장소 공용 폴더 index.html에 제공된 모든 것을 포함해야 합니다. 다른 사이트를 방문하여 직접 링크를 제공할 수 있습니다. 링크 태그 보기 포함할 내용🔽

마지막으로 해야 할 일은 mediaQueries를 포함하고 App.css 파일에 일부 CSS를 작성하는 것입니다.

.App {
  text-align: center;
}

html {
    font-family: 'Roboto', sans-serif;
}


.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.github{
padding: 10px;
position: relative;
bottom: 0;
font-size: 1.5em;
display: grid;



}
.github:hover{
    color:grey;
}



@media (min-width: 576px) {
    html {
        font-size: 14px;
    }
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

@media (min-width: 992px) {
    html {
        font-size: 18px;
    }
}

@media (min-width: 1200px) {
    html {
        font-size: 20px;
    }
}


@media only screen and (max-width: 320px) {
  /* styles for narrow screens */
}







.btn{
  font-size: 10px;
}
.projects{

 margin-left: auto;
margin-right: auto;
align-items: center;
justify-content: center;
display: grid;

}

그리고 당신은 그것을했고 나도 그렇게 큰 일을 쓰는 것은 고통 스럽지만 나는 World를 위해했습니다 감사합니다 firebase에 배포하는 방법을보십시오 🔽 *

먼저 firebase 콘솔 설치에서 앱을 만들고 firebase에 로그인한 다음 각 프로젝트 폴더에서 다음 명령을 실행합니다.
firebase init 해당 앱도 선택합니다.npm run buildfirebase deploy
주의 단일 페이지 응용 프로그램의 경우 빌드 폴더 및 예를 선택하고 모든 파일을 다시 작성하려면 아니요를 선택한 다음 완료
그런 다음 앱 배포를 완료했습니다.
👉 Live Preview OF this Project🔥
👉 Github Repo Fork/⭐/Clone it