전체 React 템플릿 자습서 — 영에서 영웅으로

우리가 반응을 배우기 시작할 때 프로젝트를 만들기 위해 처음부터 샘플을 만들거나 지역사회에서 제공하는 샘플을 사용해야 한다.거의 모든 경우, 우리는create react 프로그램을 사용하여 설정이 없는 프로그램을 만듭니다.아니면 우리는 처음부터 자신의 간단한 견본을 만들기 시작할 뿐이다.
이로써 나는 왜 내가 자주 사용하는 모든 의존항을 포함하는 샘플 파일을 만들어서 준비하지 않는지 생각했다.지역사회도 그렇게 생각하기 때문에 현재 우리는 몇 개의 지역사회가 만든 견본이 있다.어떤 것은 다른 것보다 더 복잡하지만, 항상 같은 목표를 가지고 있다. 즉, 시간을 최대한 절약하는 것이다.
본고는 React 커뮤니티에서 사용하는 주요 의존항을 사용하여 처음부터 자신의 샘플 파일을 구축하는 방법을 가르쳐 줍니다.우리는 현대에서 가장 흔히 볼 수 있는 기능을 사용할 것이다. 거기에서 당신이 원하는 방식을 맞춤형으로 만들 수 있다.
The boilerplate created by this article will be available here!

개시하다

먼저 템플릿 파일을 시작할 폴더를 만듭니다.네가 부르고 싶은 이름은 무엇이든지 다 괜찮아, 나는 내 이름을 불러야 해.
터미널을 열고 이렇게 만듭니다:

mkdir react-bolt

이제 만든 폴더로 이동하여 다음 명령을 입력합니다.

npm init -y

npm에서 package.json 파일을 만들 것입니다. 설치된 모든 의존 항목과 명령이 거기에 있습니다.
이제 템플릿의 기본 폴더 구조를 작성합니다.지금은 이렇다.

react-bolt    
    |--config    
    |--src    
    |--tests

웹 패키지

Webpack은 현재 가장 유명한 JavaScript 애플리케이션 모듈 바인딩기입니다.기본적으로 모든 코드를 묶고 하나 이상의 묶음을 생성합니다.자세한 내용은 here에 나와 있습니다.
이 템플릿에서는 이 템플릿을 사용하기 때문에 모든 종속성을 설치합니다.

npm install --save-dev webpack webpack-cli webpack-dev-server webpack-merge html-webpack-plugin clean-webpack-plugin img-loader url-loader file-loader 

현재 config 폴더에 webpack이라는 다른 폴더를 만들고 webpack 폴더에 5개의 파일을 만듭니다.paths.js이라는 파일을 만듭니다.이 파일에서는 모든 출력 파일의 대상 디렉토리가 됩니다.
안에 모든 코드를 넣습니다.

import path from 'path';

module.exports = {    
    root: path.resolve(__dirname, '../', '../'),    
    outputPath: path.resolve(__dirname, '../', '../', 'build'),    
    entryPath: path.resolve(__dirname, '../', '../', 'src/index.js'),    
    templatePath: path.resolve(__dirname, '../', '../', 'src/index.html'),    
    imagesFolder: 'images',    
    fontsFolder: 'fonts',    
    cssFolder: 'css',    
    jsFolder: 'js'    
};  

이제 rules.js이라는 다른 파일을 만들고 다음 코드를 배치합니다.

module.exports = [    
    {
        test: /\.js$/,    
        exclude: /node_modules/,    
        use: {    
        loader: 'babel-loader'    
    }    
},    
    {    
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,    
        exclude: /node_modules/,    
        loader: 'file-loader'    
    },    
    {    
        test: /\.(woff|woff2)$/,    
        exclude: /node_modules/,    
        loader: 'url-loader?prefix=font/&limit=5000'    
    },    
    {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,    
        exclude: /node_modules/,    
        loader: 'url-loader?limit=10000&mimetype=application/octet-stream'    
    },    
    {    
        test: /\.(jpe?g|png|gif|svg)$/i,    
        use: ['url-loader?limit=10000', 'img-loader'] 
    }    
];

그런 다음 세 개의 파일을 더 만듭니다.
웹 패키지.보통이었어바벨.js

import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';

import paths from './paths';
import rules from './rules';

module.exports = {
    entry: paths.entryPath,
    module: {
        rules
    },
    resolve: {
        modules: ['src', 'node_modules'],
        extensions: ['*', '.js', '.scss', '.css']
    },
    plugins: [
        new webpack.ProgressPlugin(),
        new HtmlWebpackPlugin({
            template: paths.templatePath,
            minify: {
                collapseInlineTagWhitespace: true,
                collapseWhitespace: true,
                preserveLineBreaks: true,
                minifyURLs: true,
                removeComments: true,
                removeAttributeQuotes: true
            }
        })
    ]
};

웹 패키지.데프 바벨.js

import webpack from 'webpack';

import paths from './paths';
import rules from './rules';

module.exports = {
    mode: 'development',
    output: {
        filename: '[name].js',
        path: paths.outputPath,
        chunkFilename: '[name].js'
    },
    module: {
        rules
    },
    performance: {
        hints: 'warning',
        maxAssetSize: 450000,
        maxEntrypointSize: 8500000,
        assetFilter: assetFilename => {
            return (
                assetFilename.endsWith('.css') || assetFilename.endsWith('.js')
            );
        }
    },
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    },
    devServer: {
        contentBase: paths.outputPath,
        compress: true,
        hot: true,
        historyApiFallback: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};

웹 패키지.바벨 탐정.js

import CleanWebpackPlugin from 'clean-webpack-plugin';

import paths from './paths';
import rules from './rules';

module.exports = {
    mode: 'production',
    output: {
        filename: `${paths.jsFolder}/[name].[hash].js`,
        path: paths.outputPath,
        chunkFilename: '[name].[chunkhash].js'
    },
    module: {
        rules
    },
    plugins: [
        new CleanWebpackPlugin([paths.outputPath.split('/').pop()], {
            root: paths.root
        })
    ],
    devtool: 'source-map'
};

기본적으로 webpack.common.babel.js 파일에는 입구와 출력 설정이 설치되어 있으며 필요한 모든 플러그인이 포함되어 있습니다.webpack.dev.babel.js 파일에서는 모델을 개발로 설정합니다.webpack.prod.babel.js 파일에서 모드를 프로덕션 모드로 설정합니다.
그런 다음 루트 폴더에서 webpack.config.js이라는 마지막 웹 패키지 파일을 만들고 다음 코드를 입력합니다.

require('@babel/register');
const webpackMerge = require('webpack-merge');

const common = require('./config/webpack/webpack.common.babel');

const envs = {
    development: 'dev',
    production: 'prod'
};

/* eslint-disable global-require,import/no-dynamic-require */
const env = envs[process.env.NODE_ENV || 'development'];
const envConfig = require(`./config/webpack/webpack.${env}.babel`);
module.exports = webpackMerge(common, envConfig);

Google 웹 패키지 설정이 준비되어 있기 때문에, 현재 Babel, ESLint, Prettier 등을 사용하여 샘플 파일의 다른 부분을 처리할 것입니다.

바벨

나는 거의 모든 React와 합작한 사람들이 Babel, 그리고 이 간단한 transpiler가 우리의 생활을 어떻게 돕는지 들은 적이 있다고 생각한다.만약 당신이 그것이 무엇인지 모른다면, Babel은 기본적으로transpiler입니다. 자바스크립트 코드를 모든 브라우저에서 실행할 수 있는 일반적인 오래된 ES5 자바스크립트로 변환할 수 있습니다.
일련의 Babel 플러그인을 사용하여 루트 폴더에 설치합니다.

npm install --save-dev @babel/core @babe/cli @babel/node @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread @babel/plugin-syntax-dynamic-import @babel/plugin-syntax-import-meta @babel/plugin-transform-async-to-generator @babel/plugin-transform-runtime @babel/preset-env @babel/preset-react @babel/register @babel/runtime babel-eslint babel-jest babel-loader [email protected]

그런 다음 루트 폴더에 .babelrc이라는 파일을 만들고 다음 코드를 입력합니다.

{    
  presets:        
    [        
        [            
            "@babel/preset-env",                
            {                
                useBuiltIns:  "entry"
            }
        ],
        "@babel/preset-react"
    ],
    plugins:        
    [        
        "@babel/plugin-proposal-object-rest-spread",            
        "@babel/plugin-transform-runtime",            
        "@babel/plugin-transform-async-to-generator",            
        "@babel/plugin-proposal-class-properties"
    ]
}

이제 Babel에서 프로젝트를 컴파일하여 차세대 JavaScript 구문을 문제 없이 사용할 수 있습니다.

에스린트

현재 linting 프로젝트에 사용되는 가장 일반적인 도구는 ESLint입니다.변수 범위, 성명되지 않은 변수 값 등과 관련된 버그를 찾는 것은 정말 도움이 됩니다.
먼저 다음 종속성을 설치합니다.

npm install --save-dev eslint eslint-config-airbnb eslint-config-prettier eslint-loader eslint-plugin-babel eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react

그런 다음 루트 폴더에 .eslintrc이라는 파일을 만들고 다음 코드를 넣습니다.

{
    "parser": "babel-eslint",
    "extends": ["airbnb", "prettier", "prettier/react"],
    "plugins": ["prettier"],
    "parserOptions": {
        "ecmaVersion": 6,
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "env": {
        "browser": true,
        "node": true,
        "mocha": true,
        "es6": true,
        "jest": true
    },
    "rules": {
        "indent": ["error", 4],
        "space-before-function-paren": "off",
        "react/prefer-stateless-function": "warn",
        "react/jsx-one-expression-per-line": "off",
        "import/no-extraneous-dependencies": [
            "error",
            { "devDependencies": true }
        ],
        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
        "linebreak-style": "off",
        "global-require": "off",
        "semi": "warn",
        "arrow-body-style": "off",
        "no-multiple-empty-lines": ["warn", { "max": 1 }],
        "no-unused-expressions": [
            "error",
            {
                "allowTaggedTemplates": true
            }
        ],
        "no-underscore-dangle": [
            2,
            { "allow": ["__REDUX_DEVTOOLS_EXTENSION__"] }
        ]
    }
}

더욱 아름답다

Prettier는 기본적으로 코드 포맷 프로그램입니다.이것은 코드를 해석하고, 자신의 규칙을 사용하여 코드를 다시 인쇄합니다. 이 규칙들은 최대 줄 길이를 고려하고, 필요할 때 코드를 포장합니다.
설치만 하면 됩니다.

npm install --save-dev prettier

루트 폴더에 .prettierrc이라는 파일을 만들고 다음 코드를 넣습니다.

{
    "printWidth": 80,
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true,
    "bracketSpacing": true
}

리액션

React는 사용자 인터페이스를 구축하는 소스 JavaScript 응용 프로그램 라이브러리입니다.페이스북이 개발한 것으로, 그 뒤에는 거대한 커뮤니티가 있다.만약 당신이 이 글을 읽고 있다면, 나는 당신이 이미 React에 대해 알고 있다고 가정하지만, 더 많은 정보를 알고 싶으면 here을 읽을 수 있습니다.
다음과 같은 종속성을 설치합니다.

npm install --save react react-dom cross-env

src 폴더에서 간단한 HTML 파일 index.html을 만들고 다음 코드를 입력합니다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>React Bolt</title>
    </head>

    <body>
        <div id="root"></div>
    </body>
</html>

그런 다음 간단한 React 프로젝트를 만듭니다.src 폴더에 다음과 같이 index.js 파일을 만듭니다.

import React from 'react';
import ReactDOM from 'react-dom';

import App from './components/App';

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

src 폴더에는 다음과 같은 구조가 있습니다.

*src
    |--actions
    |--components
    |--reducers
    |--reducers
    |--store*

App.js 폴더에 components이라는 파일을 만들고 다음 코드를 입력합니다.

import React from 'react';

const App = () => <h1>React Bolt</h1>;

export default App;

뇌두

Redux는 관리 애플리케이션의 상태를 손쉽게 만듭니다.다른 측면에서 볼 때, 이것은 사용자가 표시하는 데이터를 관리하고 사용자의 조작에 어떻게 응답하는지를 도울 수 있다.현재 많은 사람들이 다른 옵션을 더 좋아한다. 예를 들어 MobX나 set State 자체를 좋아하지만 나는 Redux를 이 모델로 계속 사용할 것이다.
우선, 몇 가지 의존 항목을 설치할 것입니다.

npm install --save redux react-redux redux-thunk

그리고 Redux 상점을 만들고 상태를 설정할 것입니다.스토어 폴더에 index.js 파일을 만들고 다음 코드를 배치합니다.

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';

import rootReducer from '../reducers';

const middleware = applyMiddleware(thunk, logger);

const reduxDevTools =
    window.__REDUX_DEVTOOLS_EXTENSION__ &&
    window.__REDUX_DEVTOOLS_EXTENSION__();

const store = createStore(
    rootReducer,
    compose(
        middleware,
        reduxDevTools
    )
);

export default store;

이제 reducers 폴더에 index.js을 만들고 다음 코드를 입력합니다.

import { combineReducers } from 'redux';

const rootReducer = combineReducers({
    state: () => ({})
});

export default rootReducer;

마지막으로 index.js 폴더에 있는 src으로 넘어가 <Provider /> 패키지 코드를 도구로 응용 프로그램에 전달할 것입니다.
다음과 같습니다.

import React, { Fragment } from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';

import store from './store';
import App from './components/App';

ReactDOM.render(  
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

다 끝났어.우리 레드ux 상점은 이미 배치되어 있어서 사용할 수 있습니다.

반응 라우터

React Router는 React의 표준 라우팅 라이브러리입니다.기본적으로 URL과 사용자 인터페이스를 동기화합니다.템플릿에서 사용하기 때문에 설치합니다.

npm install --save react-router-dom  

이후 index.js 폴더의 src으로 이동하여 <BrowserRouter>으로 모든 코드를 포장한다.index.js은 src 폴더에서 다음과 같이 끝납니다.

import React, { Fragment } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';

import store from './store';
import App from './components/App';

ReactDOM.render(
    <BrowserRouter>       
        <Provider store={store}>
            <App />
        </Provider>
    </BrowserRouter>,
    document.getElementById('root')
); 

스타일 지정 어셈블리

스타일 지정 어셈블리를 사용하면 프로젝트를 구성하는 데 도움이 될 수 있으므로 CSS는 모든 사람에게 쉽습니다.그것의 목표는 다시 사용할 수 있는 작은 구성 요소를 더 많이 작성하는 것이다.우리는 그것을 사용할 것입니다. 더 많은 것을 알고 싶으면 here을 읽으십시오.
먼저 설치합니다.

npm install --save styled-components  

그리고 App.js 폴더의 components 파일에서 스타일링 구성 요소를 사용하여 간단한 제목을 만들 것입니다.우리의 제목은 다음과 같다.

const Title = styled.h1`
    color: black;
    font-size: 2.5rem;
    font-weight: 700;
`;

파일에서 styled-components을 가져와야 하므로 파일은 다음과 같이 끝납니다.

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

const Title = styled.h1`
    color: black;
    font-size: 2.5rem;
    font-weight: 700;
`;

const App = () => <Title>React Bolt</Title>;

export default App;

Jest &React 테스트 라이브러리

Jest는 Facebook의 오픈 소스 JavaScript 테스트 라이브러리입니다.이것은 테스트 프로그램을 쉽게 만들었고, 우리에게 어떤 출력이 정확하고, 어떤 출력이 정확하지 않은지에 대한 많은 정보를 제공했다.React Testing Library는 React 구성 요소를 테스트하는 데 사용되는 매우 가벼운 솔루션입니다.기본적으로 이 문고는 효소의 대체품이다.
모든 응용 프로그램은 어떤 테스트를 필요로 한다.이 문서에서 테스트를 작성하지는 않겠지만, 이 도구를 설정해서 프로그램을 테스트하는 방법을 보여 드리겠습니다.
먼저 다음을 동시에 설치합니다.

npm install --save-dev jest jest-dom react-testing-library  

그런 다음 package.json으로 이동하여 다음을 확인하십시오.

 "jest": {
    "setupFiles": [
        "<rootDir>/config/tests/jest.config"
    ],
    "transform": {
        "^.+\\.js$": "babel-jest"
    }
 }

그런 다음 config 폴더로 이동하여 tests이라는 다른 폴더를 만들고 두 개의 파일을 만듭니다.
먼저 jest.config.js이라는 파일을 만들고 다음 코드를 입력합니다.

module.exports = {
    automock: false,
    browser: false,
    bail: false,
    collectCoverageFrom: [
        'src/**/*.{js,jsx}',
        '!**/node_modules/**',
        '!**/vendor/**'
    ],
    coverageDirectory: '<rootDir>/coverage',
    globals: {
        __DEV__: true
    },
    moduleFileExtensions: ['js', 'json', 'jsx', 'node'],
    transform: {
        '^.+\\.js?$': 'babel-jest'
    },
    verbose: true,
    setupTestFrameworkScriptFile: './rtl.setup.js'
};  

그런 다음 rtl.setup.js이라는 파일을 만들고 다음 코드를 입력합니다.

// See https://github.com/kentcdodds/react-testing-library#global-config
import 'jest-dom/extend-expect';
import 'react-testing-library/cleanup-after-each';

다 끝났어.우리의 견본은 이미 준비가 다 되었으니 너는 지금 사용할 수 있다.
이제 파일 package.json으로 이동하여 다음 코드를 입력합니다.

"scripts": {
    "start": "cross-env NODE_ENV=development webpack-dev-server --open",
    "build": "cross-env NODE_ENV=production webpack",
    "lint": "eslint ./src/**/**.js",
    "lint:fix": "eslint ./src/**/**.js --fix",
    "test": "jest",
    "test:watch": "npm run test --watch",
    "test:cover": "npm run test --coverage"
}

현재 npm start를 실행하고 localhost:8080으로 이동하면 프로그램이 잘 작동하는 것을 볼 수 있습니다.
If you want to see my final code, the boilerplate created by this article is available here!
나는 일부 특성에 대해 약간의 생각을 가지고 있다. 나는 그것들을 견본에 포함시키고 싶다. 그러므로 마음대로 공헌해라.
🐦
⭐ Follow me on GitHub!