
Коли ми починаємо вивчати React, для створення наших проектів нам потрібно зробити шаблон з нуля або скористатися деякими, наданими спільнотою. Майже весь час ми використовуємо додаток create-response-app , щоб створити додаток без конфігурації збірки. Або ми просто робимо свій власний простий шаблон з нуля.
З цього приходить на думку: чому б не зробити шаблонний шаблон з усіма залежностями, якими я завжди користуюся, і залишити його готовим? Громада також думала так, тому зараз у нас є декілька створених громадою котлів. Деякі з них складніші за інші, але вони завжди мають одну і ту ж мету - заощадити максимальну кількість часу.
Ця стаття навчить вас, як ви можете створити свій власний шаблон з нуля з основними залежностями, що використовуються сьогодні у спільноті React. Ми будемо використовувати деякі найпоширеніші функції сучасності, і звідти ви можете налаштувати їх як завгодно.
Шаблон, створений цією статтею, буде доступний тут!
Починаємо
Перш за все, ми збираємося створити папку, щоб запустити наш шаблон. Ви можете назвати це як завгодно, я назву свою реакцію .
Відкрийте свій термінал і створіть його таким чином:
mkdir react-bolt
Тепер перейдіть до створеної папки та введіть таку команду:
npm init -y
NPM створить package.json
для вас файл, і всі залежності, які ви встановили, і ваші команди будуть там.
Тепер ми збираємося створити базову структуру папок для нашого шаблону. Поки що це буде так:
react-bolt |--config |--src |--tests
Веб-пакет
На сьогоднішній день Webpack - найвідоміший модуль-пакет для програм JavaScript. По суті, він об’єднує весь ваш код і генерує один або кілька пакетів. Ви можете дізнатись більше про це тут.
У цьому типовому прикладі ми будемо використовувати його, тому встановіть усі ці залежності:
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
. Усередині цього файлу буде цільовий каталог для всіх вихідних файлів.
Всередині цього розмістіть весь цей код:
Тепер створіть інший файл із назвою rules.js
і помістіть туди такий код:
Після цього ми створимо ще 3 файли:
webpack.common.babel.js
webpack.dev.babel.js
webpack.prod.babel.js
По суті, у нашому webpack.common.babel.js
файлі ми налаштували конфігурацію введення та виводу, а також включили всі необхідні плагіни. У webpack.dev.babel.js
файлі ми встановили режим розробки. І в нашому webpack.prod.babel.js
файлі ми встановили режим виробництва.
Після цього, у нашій кореневій папці, ми збираємося створити останній файл веб-пакета, що викликається, webpack.config.js
і помістимо такий код:
Наша конфігурація веб-пакета готова, тому зараз ми будемо працювати над іншими частинами шаблону за допомогою Babel, ESLint, Prettier тощо.
Бабель
Я думаю, що майже всі, хто працює з React, напевно чули про Babel і про те, як цей простий перекладач допомагає нашому життю. Якщо ви не знаєте, що це таке, Babel - це, в основному, перекладач, який перетворює ваш код JavaScript у звичайний старий JavaScript 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
і всередині цього файлу ми розмістимо такий код:
Зараз наш проект скомпільований Babel, і ми можемо без проблем використовувати синтаксис наступного покоління JavaScript.
ESLint
На сьогоднішній день найпоширенішим інструментом для об’єднання проектів є 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
та помістіть туди такий код:
Гарніша
Prettier - це в основному програмоутворювач коду. Він аналізує ваш код і повторно друкує його за власними правилами, що враховують максимальну довжину рядка, при необхідності обертаючи код.
Вам просто потрібно встановити його:
npm install --save-dev prettier
А в нашій кореневій папці створіть файл із назвою .prettierrc
та помістіть туди такий код:
Зреагуйте
React - це бібліотека програм JavaScript з відкритим кодом для побудови користувальницьких інтерфейсів. Він був розроблений Facebook і за ним стоїть величезна спільнота. Якщо ви читаєте цю статтю, я припускаю, що ви вже знаєте про React, але якщо ви хочете дізнатись більше про це, ви можете прочитати тут.
Ми збираємось встановити такі залежності:
npm install --save react react-dom cross-env
І всередині нашої src
папки ми створимо простий HTML-файл index.html
і помістимо такий код:
After that, we’re going to create a simple React project. Inside our src
folder, create a index.js
file like this:
Inside our src
folder we’re going to have the following structure:
src |--actions |--components |--reducers |--reducers |--store
Create a file called App.js
inside the components
folder, and put in the following code:
Redux
Redux makes it easy to manage the state of your application. Another way of looking at this is that it helps you manage the data you display and how you respond to user actions. These days a lot of people prefer other options like MobX or just the setState itself, but I’m gonna stick with Redux for this boilerplate.
First, we’re going to install some dependencies:
npm install --save redux react-redux redux-thunk
Then, we’re going to create our Redux store, and put some state there. In our store
folder, create an index.js
file and put that following code there:
Now, inside our reducers
folder create an index.js
and put the following code:
Last, we’re gonna to our index.js
in our src
folder, and wrap the code with the s our
store as props to make it available to our application.
It’s going to be like this:
All done. Our Redux store is configured and ready to go.
React Router
React Router is the standard routing library for React. Basically, itkeeps your UI in sync with the URL. We’re gonna use it in our boilerplate, so install it:
npm install --save react-router-dom
After that, go to our
index.js
in our src
folder and wrap all the code there with the
r>.
Our
index.js
in our src
folder it’s going to end up like this:
Styled Components
Styled Components
Styled Components makes CSS easy for everyone, as it helps you organize your React project. Its objective is to write more small and reusable components. We’re gonna use it, and if you want to learn more about it, read up here.
First, install it:
npm install --save styled-components
Then, in our
App.js
file inside our components
folder, we’re going to create a simple title using Styled Components. Our title is going to be like this:
And inside our file, we need to import styled components, so our file is going to end up like this:
Jest & React Testing Library
Jest & React Testing Library
Jest is an open-source JavaScript testing library from Facebook. It makes it easy to test your application, and gives us a lot of information about what is giving the right output and what’s not. React Testing Library is a very light-weight solution for testing React components. Basically, this library is a replacement for Enzyme.
Every application needs some kind of tests. I’m not gonna write tests in this article but I’m gonna show you how you can configure these tools to start testing your applications.
First, we’re gonna install both:
npm install --save-dev jest jest-dom react-testing-library
After that, go to our package.json and put the following after all:
Then, go to our
config
folder, and inside it created another folder called tests
and inside that folder, create 2 files.
First, create a file called
jest.config.js
and put in the following code:
Then, create a file called
rtl.setup.js
and put in the following code:
All done. Our boilerplate is ready to go and you can use it now.
Now go to our file
package.json
and put in the following code:
Now, if you run the command
npm start
and go to localhost:8080
, we should see our application working fine!
If you want to see my final code, the boilerplate created by this article is available here!
I have some ideas for some features that I’d love to include in the boilerplate, so please feel free to contribute!
? Follow me on Twitter!
⭐ Follow me on GitHub!
I’m looking for a remote opportunity, so if have any I’d love to hear about it, so please contact me!

Original text