Ein komplettes React Boilerplate Tutorial - Von Null zu Held

Wenn wir anfangen, React zu lernen, müssen wir für unsere Projekte ein Boilerplate von Grund auf neu erstellen oder einige von der Community bereitgestellte verwenden. Fast immer ist es die Create-React-App , mit der wir eine App ohne Build-Konfiguration erstellen. Oder wir machen einfach unsere eigene einfache Heizplatte von Grund auf neu.

Daraus ergibt sich: Warum nicht ein Boilerplate mit allen Abhängigkeiten erstellen, die ich immer benutze, und es bereit lassen? Die Community hat das auch so gedacht, und jetzt haben wir mehrere von der Community erstellte Boilerplates. Einige sind komplexer als andere, aber sie haben immer das gleiche Ziel, die maximale Zeit zu sparen.

In diesem Artikel erfahren Sie, wie Sie mit den wichtigsten Abhängigkeiten, die heute in der React-Community verwendet werden, Ihre eigene Boilerplate von Grund auf neu erstellen können. Wir werden einige der modernen Funktionen verwenden, die heutzutage am häufigsten verwendet werden, und von dort aus können Sie sie nach Ihren Wünschen anpassen.

Das in diesem Artikel erstellte Boilerplate finden Sie hier!

Beginnen

Zunächst erstellen wir einen Ordner, um unsere Boilerplate zu starten. Du kannst es benennen, was immer du willst, ich werde meinen Reaktionsbolzen nennen .

Öffnen Sie Ihr Terminal und erstellen Sie es folgendermaßen:

mkdir react-bolt

Gehen Sie nun zu Ihrem erstellten Ordner und geben Sie den folgenden Befehl ein:

npm init -y

NPM erstellt eine package.jsonDatei für Sie und alle von Ihnen installierten Abhängigkeiten und Ihre Befehle sind vorhanden.

Jetzt erstellen wir die grundlegende Ordnerstruktur für unser Boilerplate. Im Moment wird es so sein:

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

Webpack

Webpack ist heutzutage der bekannteste Modul-Bundler für JavaScript-Anwendungen. Grundsätzlich bündelt es Ihren gesamten Code und generiert ein oder mehrere Bündel. Mehr dazu erfahren Sie hier.

In diesem Boilerplate werden wir es verwenden, also installieren Sie alle diese Abhängigkeiten:

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

Jetzt configerstellen wir in unserem Ordner einen weiteren Ordner mit dem Namen webpackund webpackerstellen in diesem Ordner 5 Dateien.

Erstellen Sie eine Datei mit dem Namen paths.js. In dieser Datei befindet sich das Zielverzeichnis für alle Ihre Ausgabedateien.

Fügen Sie den gesamten Code ein:

Erstellen Sie nun eine weitere Datei mit dem Namen rules.jsund geben Sie dort den folgenden Code ein:

Danach werden wir 3 weitere Dateien erstellen:

webpack.common.babel.js

webpack.dev.babel.js

webpack.prod.babel.js

Grundsätzlich haben webpack.common.babel.jswir in unserer Datei unsere Eingabe- und Ausgabekonfiguration eingerichtet und auch alle erforderlichen Plugins aufgenommen. In der webpack.dev.babel.jsDatei haben wir den Modus auf Entwicklung eingestellt. Und in unserer webpack.prod.babel.jsDatei haben wir den Modus auf Produktion eingestellt.

Danach erstellen wir in unserem Stammordner die letzte aufgerufene Webpack-Datei webpack.config.jsund geben den folgenden Code ein:

Unsere Webpack-Konfiguration ist fertig, und jetzt werden wir mit Babel, ESLint, Prettier usw. an anderen Teilen der Boilerplate arbeiten.

Babel

Ich denke, dass fast jeder, der mit React arbeitet, wahrscheinlich von Babel gehört hat und wie dieser einfache Transpiler unserem Leben hilft. Wenn Sie nicht wissen, was es ist, ist Babel im Grunde ein Transpiler, der Ihren JavaScript-Code in einfaches altes ES5-JavaScript konvertiert, das in jedem Browser ausgeführt werden kann.

Wir werden eine Reihe von Babel-Plugins verwenden. Installieren Sie also in unserem Stammordner:

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]

Danach erstellen wir eine Datei in unserem Stammordner mit dem Namen .babelrcund fügen in diese Datei den folgenden Code ein:

Jetzt wird unser Projekt von Babel kompiliert und wir können die JavaScript-Syntax der nächsten Generation problemlos verwenden.

ESLint

Das heutzutage am häufigsten verwendete Werkzeug für Flusenprojekte ist ESLint. Es ist sehr hilfreich, bestimmte Fehlerklassen zu finden, z. B. solche, die sich auf den Variablenbereich, die Zuweisung zu nicht deklarierten Variablen usw. beziehen.

Installieren Sie zunächst die folgenden Abhängigkeiten:

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 

Erstellen Sie dann in unserem Stammordner eine Datei mit dem Namen .eslintrc und geben Sie dort den folgenden Code ein:

Schöner

Hübscher ist im Grunde ein Code-Formatierer. Es analysiert Ihren Code und druckt ihn mit eigenen Regeln neu, die die maximale Zeilenlänge berücksichtigen. Bei Bedarf wird Code umbrochen.

Sie müssen es nur installieren:

npm install --save-dev prettier

Erstellen Sie in unserem Stammordner eine Datei mit dem Namen .prettierrc und geben Sie dort den folgenden Code ein:

Reagieren

React ist eine Open-Source-JavaScript-Anwendungsbibliothek zum Erstellen von Benutzeroberflächen. Es wurde von Facebook entwickelt und hat eine riesige Community dahinter. Wenn Sie diesen Artikel lesen, gehe ich davon aus, dass Sie bereits über React Bescheid wissen. Wenn Sie jedoch mehr darüber erfahren möchten, können Sie hier nachlesen.

Wir werden die folgenden Abhängigkeiten installieren:

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

In unserem srcOrdner erstellen wir eine einfache HTML-Datei index.htmlund geben den folgenden Code ein:

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