Ένα πλήρες σεμινάριο React Boilerplate - Από το μηδέν στον ήρωα

Όταν αρχίζουμε να μαθαίνουμε το React, για να κάνουμε τα έργα μας, πρέπει να φτιάξουμε ένα boilerplate από το μηδέν ή να χρησιμοποιήσουμε κάποια που παρέχονται από την κοινότητα. Σχεδόν όλες τις φορές είναι η εφαρμογή create-react-app που χρησιμοποιούμε για να δημιουργήσουμε μια εφαρμογή χωρίς διαμόρφωση build. Ή απλώς φτιάχνουμε το δικό μας απλό βραστήρα από το μηδέν.

Από αυτό, έρχεται στο μυαλό: γιατί να μην φτιάξω ένα boilerplate με όλες τις εξαρτήσεις που χρησιμοποιώ πάντα και να το αφήνω έτοιμο; Η κοινότητα σκέφτηκε επίσης έτσι, οπότε τώρα έχουμε πολλά boilerplates που δημιουργήθηκαν από την κοινότητα. Μερικά είναι πιο περίπλοκα από άλλα, αλλά έχουν πάντα τον ίδιο στόχο να εξοικονομήσουν το μέγιστο χρονικό διάστημα.

Αυτό το άρθρο θα σας διδάξει πώς μπορείτε να δημιουργήσετε το δικό σας boilerplate από το μηδέν με τις κύριες εξαρτήσεις που χρησιμοποιούνται στην κοινότητα του React σήμερα. Θα χρησιμοποιήσουμε μερικές από τις πιο κοινές δυνατότητες των σύγχρονων ημερών και από εκεί μπορείτε να το προσαρμόσετε με όποιον τρόπο θέλετε.

Το boilerplate που δημιουργήθηκε από αυτό το άρθρο θα είναι διαθέσιμο εδώ!

Ξεκινώντας

Πρώτα απ 'όλα, θα δημιουργήσουμε ένα φάκελο για να ξεκινήσουμε το boilerplate μας. Μπορείτε να το ονομάσετε ό, τι θέλετε, θα ονομάσω το δικό μου react-bolt .

Ανοίξτε το τερματικό σας και δημιουργήστε το ως εξής:

mkdir react-bolt

Τώρα, μεταβείτε στο φάκελο που δημιουργήσατε και πληκτρολογήστε την ακόλουθη εντολή:

npm init -y

Το NPM θα δημιουργήσει ένα package.jsonαρχείο για εσάς και όλες οι εξαρτήσεις που έχετε εγκαταστήσει και οι εντολές σας θα είναι εκεί.

Τώρα, θα δημιουργήσουμε τη βασική δομή φακέλων για το boilerplate μας. Θα είναι έτσι για τώρα:

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

Webpack

Το Webpack είναι το πιο διάσημο module-bundler για εφαρμογές JavaScript στις μέρες μας. Βασικά, ομαδοποιεί όλο τον κώδικα και δημιουργεί ένα ή περισσότερα πακέτα. Μπορείτε να μάθετε περισσότερα για αυτό εδώ.

Σε αυτό το boilerplate θα το χρησιμοποιήσουμε, οπότε εγκαταστήστε όλες αυτές τις εξαρτήσεις:

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 μας είναι έτοιμη, οπότε τώρα θα δουλέψουμε σε άλλα μέρη του boilerplate με Babel, ESLint, Prettier κ.λπ.

Βαβυλωνία

Νομίζω ότι σχεδόν όλοι όσοι συνεργάζονται με το React έχουν πιθανώς ακούσει για το Babel και πώς αυτός ο απλός πομποδέκτης βοηθά τη ζωή μας. Εάν δεν ξέρετε τι είναι, το Babel είναι βασικά ένα transpiler που μετατρέπει τον κώδικα 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 και μπορούμε να χρησιμοποιήσουμε τη σύνταξη 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 /> and pas 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 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!