Пълен настойнически урок на React - от нула до герой

Когато започваме да учим React, за да направим нашите проекти, трябва да направим шаблон от нулата или да използваме някои, предоставени от общността. Почти през цялото време това е приложението create-реагиране , което използваме за създаване на приложение без конфигурация на компилация. Или просто правим свой собствен прост шаблон от нулата.

От това идва на ум: защо да не направим образец с всички зависимости, които винаги използвам, и да го оставя готов? Общността също е мислила по този начин, така че сега имаме няколко котлона, създадени от общността. Някои са по-сложни от други, но те винаги имат една и съща цел да спестят максимално време.

Тази статия ще ви научи как можете да създадете свой собствен шаблон от нулата с основните зависимости, използвани в общността на React днес. Ще използваме някои от модерните функции, които са най-често срещани в наши дни и оттам можете да ги персонализирате, както искате.

Образецът, създаден от тази статия, ще бъде достъпен тук!

Приготвяме се да започнем

На първо място, ще създадем папка, за да стартираме нашия шаблон. Можете да го назовете каквото искате, аз ще назова моя реакционен болт .

Отворете терминала си и го създайте по следния начин:

mkdir react-bolt

Сега отидете в създадената от вас папка и въведете следната команда:

npm init -y

NPM ще създаде package.jsonфайл за вас и всички зависимости, които сте инсталирали, и вашите команди ще бъдат там.

Сега ще създадем основната структура на папките за нашия шаблон. Засега ще бъде така:

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

Webpack

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 webpack.config.jsи ще поставим следния код:

Нашата конфигурация на webpack е готова, така че сега ще работим върху други части на шаблона с Babel, ESLint, Prettier и т.н.

Бабел

Мисля, че почти всеки, който работи с React, вероятно е чувал за Babel и за това как този прост транспилер помага на живота ни. Ако не знаете какво е това, Babel е основно транпилатор, който преобразува вашия JavaScript код в обикновен стар ES5 JavaScript, който може да работи във всеки браузър.

Ще използваме куп приставки на 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 и ние можем да използваме синтаксиса на следващото поколение без никакви проблеми.

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 /> and pass 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 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 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