Een complete React Ketelplaat tutorial - van nul tot held

Wanneer we React beginnen te leren, moeten we om onze projecten te maken een boilerplate helemaal opnieuw maken of een aantal gebruiken dat door de community is geleverd. Bijna altijd is het de create-react-app die we gebruiken om een ​​app te maken zonder build-configuratie. Of we maken gewoon onze eigen eenvoudige boilerplate vanuit het niets.

Hieruit komt het voor de geest: waarom maak je geen ketelplaat met alle afhankelijkheden die ik altijd gebruik en laat het klaar staan? De community dacht ook zo, dus nu hebben we verschillende door de community gemaakte boilerplates. Sommige zijn complexer dan andere, maar ze hebben altijd hetzelfde doel: de maximale hoeveelheid tijd besparen.

Dit artikel leert je hoe je vanuit het niets je eigen boilerplate kunt bouwen met de belangrijkste afhankelijkheden die tegenwoordig in de React-community worden gebruikt. We gaan een aantal van de moderne functies gebruiken die tegenwoordig het meest voorkomen en van daaruit kun je het naar wens aanpassen.

De boilerplate die door dit artikel is gemaakt, is hier beschikbaar!

Ermee beginnen

Allereerst gaan we een map maken om onze boilerplate te starten. Je kunt het noemen wat je wilt, ik ga de mijne react-bolt noemen.

Open uw terminal en maak deze als volgt:

mkdir react-bolt

Ga nu naar uw gemaakte map en typ de volgende opdracht:

npm init -y

NPM maakt een pakket.json-bestand voor u en alle afhankelijkheden die u hebt geïnstalleerd en uw opdrachten zijn aanwezig.

We gaan nu de basismapstructuur maken voor onze boilerplate. Het zal nu zo zijn:

reactie-bolt
    | --config
    | --src
    | --tests

webpack

Webpack is tegenwoordig de meest bekende module-bundler voor JavaScript-applicaties. Kortom, het bundelt al uw code en genereert een of meer bundels. Je kunt er hier meer over leren.

In deze boilerplate gaan we het gebruiken, dus installeer al deze afhankelijkheden:

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

Nu gaan we in onze configuratiemap een andere map maken met de naam webpack, en vervolgens binnen die webpack-map 5 bestanden maken.

Maak een bestand met de naam paths.js. Binnen dat bestand wordt de doelmap voor al uw uitvoerbestanden.

Zet er al deze code in:

Maak nu een ander bestand met de naam rules.js en plaats de volgende code daar:

Daarna gaan we nog 3 bestanden maken:

webpack.common.babel.js

webpack.dev.babel.js

webpack.prod.babel.js

Kortom, in ons bestand webpack.common.babel.js hebben we onze invoer- en uitvoerconfiguratie ingesteld en alle vereiste plug-ins opgenomen. In het bestand webpack.dev.babel.js hebben we de modus ingesteld op ontwikkeling. En in ons bestand webpack.prod.babel.js hebben we de modus ingesteld op productie.

Daarna gaan we in onze hoofdmap de laatste webpack-file genaamd webpack.config.js maken en de volgende code invoeren:

Onze webpack-configuratie is klaar, dus nu gaan we aan andere delen van de boilerplate werken met Babel, ESLint, Prettier, enz.

Babel

Ik denk dat bijna iedereen die met React werkt waarschijnlijk over Babel heeft gehoord en hoe deze eenvoudige transpiler ons leven helpt. Als u niet weet wat het is, Babel is het in feite een transpiler die uw JavaScript-code omzet in gewone oude ES5 JavaScript die in elke browser kan worden uitgevoerd.

We gaan een aantal Babel-plug-ins gebruiken, dus installeer in onze hoofdmap:

npm install - save-dev @ babel / core @ babe / cli @ babel / node @ babel / plugin-voorstel-klasse-eigenschappen @ babel / plugin-voorstel-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 babel-core@7.0.0-bridge.0

Hierna gaan we een bestand maken in onze hoofdmap met de naam .babelrc en in dat bestand plaatsen we de volgende code:

Ons project is nu samengesteld door Babel en we kunnen zonder problemen de JavaScript-syntaxis van de volgende generatie gebruiken.

ESLint

Het meest gebruikte hulpmiddel voor pluisprojecten tegenwoordig is ESLint. Het is erg handig om bepaalde soorten bugs te vinden, zoals die met betrekking tot variabel bereik, toewijzing aan niet-aangegeven variabelen, enzovoort.

Installeer eerst de volgende afhankelijkheden:

npm install --save-dev eslint eslint-config-airbnb eslint-config-mooier eslint-loader eslint-plugin-babel eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-mooier eslint-plugin-reageren

Maak vervolgens in onze hoofdmap een bestand met de naam .eslintrc en plaats daar de volgende code:

prettier

Prettier is eigenlijk een codeformatter. Het ontleedt uw code en drukt deze opnieuw af met zijn eigen regels die rekening houden met de maximale lijnlengte, en wikkelt code indien nodig in.

U hoeft het alleen maar te installeren:

npm-installatie - beter opslaan

En maak in onze hoofdmap een bestand met de naam .prettierrc en plaats daar de volgende code:

Reageer

React is een open-source JavaScript-applicatiebibliotheek om gebruikersinterfaces te bouwen. Het is ontwikkeld door Facebook en heeft een enorme community. Als je dit artikel leest, neem ik aan dat je al weet over React, maar als je er meer over wilt weten, kun je hier meer over lezen.

We gaan de volgende afhankelijkheden installeren:

npm installeren - opslaan reageren react-dom cross-env

En in onze src-map gaan we een eenvoudig HTML-bestand index.html maken en de volgende code invoeren:

Daarna gaan we een eenvoudig React-project maken. Maak in onze src-map een bestand index.js als volgt:

In onze src-map hebben we de volgende structuur:

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

Maak een bestand met de naam App.js in de componentenmap en voer de volgende code in:

Redux

Redux maakt het gemakkelijk om de status van uw applicatie te beheren. Een andere manier om dit te bekijken is dat het u helpt de gegevens die u weergeeft te beheren en hoe u reageert op acties van gebruikers. Tegenwoordig geven veel mensen de voorkeur aan andere opties zoals MobX of alleen de setState zelf, maar ik blijf bij Redux voor deze boilerplate.

Eerst gaan we enkele afhankelijkheden installeren:

npm install - red redux react-redux redux-thunk

Vervolgens gaan we onze Redux-winkel maken en daar een staat plaatsen. Maak in onze winkelmap een index.js-bestand en plaats die volgende code daar:

Maak nu in onze map met verkleiners een index.js en plaats de volgende code:

Als laatste gaan we naar onze index.js in onze src-map en verpakken we de code met de en geven we onze winkel door als rekwisieten om deze beschikbaar te maken voor onze applicatie.

Het gaat zo zijn:

Helemaal klaar. Onze Redux-winkel is geconfigureerd en klaar voor gebruik.

Reageer router

React Router is de standaardrouteringsbibliotheek voor React. Kortom, het houdt uw gebruikersinterface synchroon met de URL. We gaan het gebruiken in onze boilerplate, dus installeer het:

npm installeren - bewaar react-router-dom

Ga daarna naar onze index.js in onze src-map en verpak alle code daar met de .

Onze index.js in onze src-map gaat zo eindigen:

Gestileerde componenten

Styled Components maakt CSS gemakkelijk voor iedereen, omdat het u helpt uw ​​React-project te organiseren. Het doel is om meer kleine en herbruikbare componenten te schrijven. We gaan het gebruiken, en als je er meer over wilt weten, lees dan hier.

Installeer het eerst:

npm install - bewaar stijl-componenten

Vervolgens gaan we in ons App.js-bestand in onze componentenmap een eenvoudige titel maken met behulp van Styled Components. Onze titel wordt als volgt:

En binnen ons bestand moeten we gestileerde componenten importeren, dus ons bestand zal als volgt eindigen:

Jest & React Testbibliotheek

Jest is een open-source JavaScript-testbibliotheek van Facebook. Het maakt het gemakkelijk om uw applicatie te testen en geeft ons veel informatie over wat de juiste output geeft en wat niet. React Testing Library is een zeer lichtgewicht oplossing voor het testen van React-componenten. Kortom, deze bibliotheek is een vervanging voor enzym.

Elke toepassing heeft een soort tests nodig. Ik ga in dit artikel geen tests schrijven, maar ik zal je laten zien hoe je deze tools kunt configureren om te beginnen met het testen van je applicaties.

Eerst gaan we beide installeren:

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

Ga daarna naar onze package.json en plaats als volgt:

Ga vervolgens naar onze configuratiemap en creëerde daarin een andere map met de naam tests en maak in die map 2 bestanden.

Maak eerst een bestand met de naam jest.config.js en voer de volgende code in:

Maak vervolgens een bestand met de naam rtl.setup.js en voer de volgende code in:

Helemaal klaar. Onze boilerplate is klaar voor gebruik en je kunt hem nu gebruiken.

Ga nu naar ons bestand package.json en voer de volgende code in:

Als u nu de opdracht npm start uitvoert en naar localhost: 8080 gaat, zouden onze applicaties goed moeten werken!

Als je mijn definitieve code wilt zien, is de boilerplate die door dit artikel is gemaakt hier beschikbaar!

Ik heb een aantal ideeën voor enkele functies die ik graag in de boilerplate wil opnemen, dus voel je vrij om bij te dragen!

Volg mij op Twitter!
Volg mij op GitHub!

Ik ben op zoek naar een mogelijkheid op afstand, dus als ik er iets over zou willen horen, neem dan alsjeblieft contact met me op!