혼란스러운 코드에 대해서는

당신은 다른 사람의 환매 협의를 보았지만 무엇을 해야 할지 몰랐습니까?비록 당신이 초급 고급 코드 학습자라고 할지라도, 적어도 무엇이 무엇인지 조금 분별할 수 있어야 한다.만약 그렇지 않다면, 이것은 반드시 기능이나 지식이 부족한 징후가 아니라, 더욱 중요한 것은 개발자가 코드를 정확하게 설계하지 못하고, 생명명 함수와 변수를 충분히 묘사하지 못하거나, 적어도 묘사적인 주석을 남기지 못했다는 것이다.
이를 위해, 코드를 어떻게 구성해야 하는지 알 수 있도록 지침과 기본 스타일을 열거하고 싶습니다.

들여쓰기 및 행 간격

적당한 축소와 간격은 개발자, 특히 신입 개발자가 직면하는 가장 큰 문제 중 하나일 수 있다.만약 당신이 초보자이거나 코드를 개선하기를 원한다면, 나는 당신이 계속 읽어 주시기를 간청합니다.
코드를 정확하게 포맷하지 않으면 디버깅과 전체 개발에 재난을 초래할 수 있다.만약 네가 자신의 코드를 쉽게 읽을 수 없다면, 너는 큰 문제가 있을 것이다.코드를 볼 수 있는 다른 개발자나 고용주들에게는 특히 그렇다.만약 당신의 프로젝트가 완전히 개인적이라면, 당신만이 그것을 방문할 수 있다면, 쓸모없는 코드는 받아들일 수 있지만, 어떤 환경에서도 사용하는 것은 좋지 않다.
첫 번째 코드를 작성하기 전에, 심지어는 우리가 'Hello World' 를 컨트롤러에 인쇄하기 전에, 이 문제는 해결되어야 한다.좋은 습관은 지금부터 시작이다.
모든 언어는 자신의 스타일 가이드가 있습니다. 이것은 자바스크립트에 중심을 둘 것입니다. 많은 언어에서 비슷한 스타일을 응용할 수 있습니다.
가상 React 구성 요소를 구축해 보겠습니다.
전 세계 수입을 선행하고 선두적인 지위를 유지하다.모듈 가져오기는 맨 위에 있고 항목 가져오기는 아래에 있습니다.프로젝트 가져오기와 모듈 가져오기의 수가 많으면 빈칸으로 구분하는 것이 도움이 됩니다.

import React from 'react';
import styled from 'styled-components';

import Profile from '../views/Profile';
import { useAppSelector } from '../../redux/app/hooks;

다음은 전역 상수입니다. (변경/수정이 필요 없는 변수)

import React from 'react';
import styled from 'styled-components';

import Profile from '../views/Profile';
import { useAppSelector } from '../../redux/app/hooks;

const ID = 10ad4J;
const MAXVALUE = 10;

그 다음은 다른 상수다.

import React from 'react';
import styled from 'styled-components';

import Profile from '../views/Profile';
import { useAppSelector } from '../../redux/app/hooks;

const ID = 10ad4J;
const MAXVALUE = 10;

const Container = styled.div`
   background-color: #ffffff;
`;

다음은 JS의 함수, 어셈블리 및/또는 CSS입니다.

import React, { useState } from 'react';
import styled from 'styled-components';

import Profile from '../views/Profile';
import { useAppSelector } from '../../redux/app/hooks;

const ID = 10ad4J;
const MAXVALUE = 100;

const Container = styled.div`
   background-color: #ffffff;
`;

const AComponent = () => {
   const isUserLoggedIn = useAppSelector(state => state.user.loggedIn);

   return (
      <Container>
         <Profile auth={isUserLoggedIn ? ID : false} />
      </Container>
   );
};

마지막으로 우리는 우리의 출구를

// Spaces inside brackets, outside of JSX.
import React, { useState } from 'react';
import styled from 'styled-components';

import Profile from '../views/Profile';
import { useAppSelector } from '../../redux/app/hooks;

const ID = 10ad4J;
const MAXVALUE = 10;

const Container = styled.div`
   background-color: #ffffff;
`;

// Single props don't get parens.
const AComponent = props => {
   const [user, setUser] = useState({});

   return (
      <Container>
      {// No spaces in brackets inside JSX}
         <NavBar loggedIn={user}/>
      </Container>
   );
};

export default AComponent;

그것은 더 많은 규칙이 있지만, 일반적인 생각을 얻고 싶으면 쉽게 확장할 수 있다.

모듈식(또는 코드 분할)

모듈마다 한 가지 일을 해야 하며, 단지 한 가지 일만 할 수 있다. 마치 함수와 같다.이것은 모든 코드 영역에 대한 실천이어야 한다.모든 코드를 한 파일에 두면 작용할 수 있지만, 그 중 하나는 읽을 수 없습니다. 특정한 코드 지점을 업데이트해야 할 때 디버깅과 개발을 분리하기 어려울 것입니다.
코드 분할은 코드를 더 작은 블록과 구성 요소로 분할하여 모듈에 묶은 다음 필요한 곳에서 구성 요소를 가져오는 과정이다.이 모듈들은 그 다음에 패키지를 형성한다.이상적인 상황에서, 이 과정은 파일을 더욱 쉽게 읽을 수 있고, 코드가 어지럽지 않게 할 것이다.하지만 그것도 코드를 읽듯이 읽어야 한다.
만약 조작이 정확하지 않으면 절차가 중단될 수 있으며, 사용자는 항목을 읽을 때 반드시 파일 사이를 왔다갔다해야 발생하는 일을 완전히 이해할 수 있다.
반대로, 우선 응용 프로그램이 필요한 모든 데이터를 호출하여 응답을 우리가 효과적으로 사용할 수 있는 형식으로 비추고, 프로그램 작업에 필요한 데이터만 제공해야 한다.그리고 파일은 외부 파일에 저장된 조수 함수를 사용해서 더 나은 무독 마법을 실행하고 처리된 데이터를 대상에게 되돌려줍니다. 우리는 다른 파일에서 대상을 처리할 수 있습니다.이상적인 상황에서 파일은 출력이 하나밖에 없어야 한다. 비록 필요에 따라 여러 방면에서 입력을 얻을 수 있지만.
OOP 디자인에 대한 지식은 일반적으로 이 생각을 실현하는 데 도움이 되고 함수식 프로그래밍에도 사용될 수 있다.

올바른 프로젝트 디렉터리 구조

코드를 읽을 수 있는 것은 성공의 절반에 불과하다.특정 파일의 위치가 다른 파일의 4분의 1인 것을 찾을 수 있고, 그 파일의 용도가 다른 것인지 확인할 수 있다.디렉터리는 포함된 내용에 따라 이름을 지어야 하고, 파일은 처리된 데이터에 따라 이름을 지어야 하며, 주로 파일의 기능에 따라 이름을 지어야 한다.
사용자가 따르는 디렉터리 구조는 최종적으로 사용하는 창고에 달려 있습니다.이것은 대부분의 React 애플리케이션(적어도 내 개인 프로젝트)의 기본 구조입니다.

Root
|_.ideconfigfolder
|_node_modules
|_public
  manifest.json
  index.json
  robots.txt
  ...other files including images and what not
|_src
  |_assets
  |_components
  |_utils
  |_redux
  |_styles
  App.jsx
index.jsx
...global project configs and ignores.

나는 원자 설계 원리를 배웠다.내 구조는 다음과 같습니다.

만약 네가 이 문장에서 무엇을 얻었다면, 읽을 수 있는 풍격을 개발하고, 개선하고, 견지해 나가라.만약 당신이 읽을 수 있는 것이 무엇인지, 다른 사람에게 읽을 수 있는 것이 무엇인지 확실하지 않다면, 당신의 코드 샘플(좋은 샘플의 크기, 이렇게 하면 그들은 당신의 스타일에 좋은 느낌을 줄 수 있다)을 공유하고 피드백을 받을 수 있습니다.