React 애플리케이션의 첫 번째 섹션 만들기: 설정

13625 단어 reactjavascriptwebdevbeginners
이 글은 이 시리즈Create React App From Scratch의 미리보기 부분입니다. 당신은 https://www.codespot.org에서 다른 부분을 찾을 수 있습니다.

시리즈 소개


React는 현재 가장 인기 있는 전단 기술 중 하나이기 때문에, 저는 일련의 과정을 시작하여, 처음부터 React js 응용 프로그램을 만드는 방법을 보여 드리기로 결정했습니다.현재 대부분의 프런트엔드 응용 프로그램은 대부분 백엔드 서비스에서 얻은 실시간 데이터를 보여 줍니다. 암호화 화폐 페이지를 만드는 응용 프로그램은 매우 유용할 것이라고 생각합니다. 이 응용 프로그램은 특정한 백엔드 서비스에서 얻은 암호화 화폐의 가격과 도표의 역사를 보여 줍니다.

Note: To follow this ReactJS course series you should have some basic knowledge in JavaScript programming language, even better if you know ES6.


React 설정


ReactJS 프로그램을 설정하기 전에 먼저 노드가 필요합니다.js가 우리 컴퓨터에 설치되어 있습니다.노드가 있는지 확인합니다.js가 설치되어 있으면 Windows에서 터미널 또는 PowerShell을 열고 다음을 입력해야 합니다.
node -v
노드 버전이 나타나면 설치 부분을 건너뛸 수 있습니다. 그렇지 않으면 nodejs.org 노드의 최신 버전을 찾을 수 있습니다.js.
React js 설정은 간단합니다. 우선 프로그램을crypto 프로그램으로 명명할 것입니다.다음에 터미널을 열 것입니다. 터미널에는 프로그램을 저장하고자 하는 폴더를 가리키는 경로가 있습니다.React 프로젝트를 만들려면 다음 명령을 사용해야 합니다.
npx create-react-app crypto-app
만약 당신이 원한다면, 당신의 응용 프로그램에 마음대로 다른 이름을 지어줄 수 있지만, 나의 경우, 나는 이 응용 프로그램에 crypto 응용 프로그램이라고 이름을 붙일 것이다.
몇 초 후, 설치 프로그램은 우리의 새 React 프로그램에 대한 몇 가지 메시지로 끝납니다.이제 응용 프로그램 디렉토리에서 다음 명령을 사용할 수 있습니다.
npm start       #starts the development server
npm run build   #bundles the app into static files for production
npm test        #starts the test runner
우리의 개발 서버를 시작하려면 먼저 명령cd crypto-app을 사용하여 프로젝트 폴더에 들어가야 한다. 프로젝트 폴더에 있을 때 우리는 최종적으로 명령npm start을 사용하여 개발 서버를 시작할 수 있다. 우리의 브라우저는localhost:3000에서 프로그램을 열어 줄 것이다. 거기에서Reactwelcome 화면을 보아야 한다.

반응 파일 구조


우리의React 프로젝트를 열려면 텍스트 편집기나 IDE를 사용해야 합니다. 만약 편집기를 설치하지 않았다면, 당신은 나의 Top 5 Best Text Editors 게시물을 볼 수 있습니다.텍스트 편집기에서 항목을 열 때, 몇 개의 설정 파일과 폴더를 볼 수 있습니다.
- node_modules        - contains all node dependencies
- public              - public files that are served
- src                 - source code of our ReactJS app
.gitignore            - record which files should git ignore
package-lock.json     - contains an exact, versioned dependency tree
package.json          - contains various metadata relevant to the project 
README.md             - readme markdown file
우선, 우리는 공용 폴더를 볼 것이다.여기에 중요한 서류가 하나 있는데 그것이 바로 index.html이다.이것은 일반적인 Html 페이지입니다. 이것은 한 페이지의 Html입니다. 다시 말하면, 우리는 이 프로젝트에 더 많은 Html 파일을 추가하지 않을 것입니다.
<!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" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

Note: I have deleted the comments so the file will look a bit cleaner, as it is not that complex as it looks like.


입력, 라이브러리 (예: CSS), 메타 태그를 추가할 필요가 있다면, 이 파일에서 이렇게 할 수 있습니다.이 파일에 대해 기억해야 할 가장 중요한 부분은 <div id="root"></div> React 프로그램을 설치하는 곳입니다.
또 다른 관심 분야는 src 폴더입니다.src 폴더를 열 때, 우리는 여기에서 몇 개의 파일을 볼 수 있는데, 이 파일들이 바로 우리의 React 프로그램이다.여기서 가장 중요한 서류는 index.js입니다.어떻게 보이는지 봅시다.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
여기ReactDOM.render(<App />, document.getElementById('root')); 방법은 우리의 React 응용 프로그램을 보여 줍니다.첫 번째 매개 변수로, 우리는 파일 맨 위에 <App /> 구성 요소를 가져왔습니다. (이따가 React 구성 요소를 깊이 연구할 것입니다. 지금은 그것을 요소로 볼 수 있습니다.)두 번째 파라미터는 DOM의 루트 요소, 즉 Html 파일의 루트 요소에 접근할 수 있는 곳입니다. 우리는 이전에 공용 폴더에서 그것을 보았습니다.
이제 App.js 파일을 엽니다. 이것은 현재 유일한 ReactJS 구성 요소입니다.
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
여기에서 우리는 JSX 코드를 보았습니다. (우리는 잠시 후에 그것이 무엇인지 볼 수 있습니다.) 이제 포장div의 모든 내용을 삭제하고 맨 위에 있는 로고 가져오기도 삭제할 것입니다. 우리는 h1 표시를 추가하여 테스트 목적에만 사용할 것입니다. 그 안에 텍스트가 포함됩니다. Hello, World!그리고 우리는 그것을 구할 것이다.
import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Hello, World!</h1>
    </div>
  );
}

export default App;
응용 프로그램.jsnpm start 명령이 실행 중이기 때문에, 이것은 자동으로 재컴파일을 터치하고, 페이지 (localhost:3000)를 자동으로 다시 불러옵니다. 이제 Hello, World, 옛 내용이 아닌 Hello를 볼 수 있습니다.더 이상 필요하지 않은 logo.svg 파일도 삭제할 수 있습니다.마지막으로 사용 가능한 두 개의 CSS 파일을 살펴보겠습니다. App.css 에서 첫 번째 .App 클래스를 제외한 모든 내용을 삭제할 것입니다.
.App {
  text-align: center;
}
응용 프로그램.css
나머지 파일은progressive 웹 app와 관련된serviceWorker.js, 그리고 단원 테스트와 관련된 파일입니다.

부분 개요


이 부분에서 우리는 어떻게 처음부터 React 응용 프로그램을 만드는지 보았고, 새로 만든 React 응용 프로그램의 프로젝트 구조도 보았다. 마지막으로 우리는 일부 구성 요소를 조정했다.
이 과정의 코드는 GitHub: Create React App From Scratch의 branch:01 Setup에서 사용할 수 있습니다.
다음 부분: Create React App From Scratch Part 2: Into Components.
git 제출 메시지에 issue 링크 삽입
React Router - History 객체를 구성 요소에 전달하는 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage