Share
Wat je gaat creërenReact is snel een populair raamwerk geworden voor het maken van zowel client-side als server-side views. Er was een hogere toetredingsdrempel met tooling samen met enige frustratie met JavaScript-vermoeidheid van de community. De create-react-app is gemaakt om die frustraties aan te pakken.
U zult eerst willen controleren of Node op uw systeem is geïnstalleerd. U moet op zijn minst Node versie 4 hebben geïnstalleerd, maar zij raden aan versie 6 te hebben voor snellere downloads en een beter schijfgebruik. U kunt ook met nvm eenvoudig schakelen tussen knooppuntversies.
Nadat u Node hebt geïnstalleerd, wilt u uw favoriete opdrachtregelprogramma openen en de create-react-app wereldwijd installeren, zodat u deze overal op uw systeem kunt uitvoeren.
npm install -g create-react-app
U wilt eerst de commandoregel openen en navigeren of een map maken waar u uw ontwikkeling gaat doen. Vervolgens maken we de app door te draaien create-react-app tuts-plus-react-app. Hiermee wordt de cli-tool uitgevoerd om onze tuts-plus-react-app te maken.
Nadat de CLI-tool is voltooid, gaat u naar een samenvattingsscherm dat u laat weten waar de app is gemaakt en waarin u een lijst met opdrachten wordt weergegeven die u kunt gebruiken.
Vervolgens wilt u naar onze nieuwe app navigeren door deze uit te voeren cd tuts-plus-react-app.
U kunt de app lokaal uitvoeren door deze uit te voeren npm start. Zodra de app start, wordt u automatisch genavigeerd naar http: // localhost: 3000 / in uw browser en ziet u uw nieuwe React-toepassing.
De app gebruikt webpack om een lokale dev-server uit te voeren. Er is een kijkfunctie, dus wanneer u uw React-code bewerkt en opslaat, ziet u de wijzigingen automatisch in de browser verschijnen.
Als u fouten maakt met uw code, ziet u die fouten of waarschuwingen in de browser verschijnen.
ESLint is inbegrepen om ervoor te zorgen dat uw code algemene codestijlen volgt. Hiermee kunt u ervoor zorgen dat uw code consistent is, wat vooral handig is wanneer er meerdere bijdragers zijn aan een project. Ik zou willen voorstellen om het te gebruiken als je nog niet zo lang geleden hebt geantwoord op React en JavaScript-coderingsstijlen.
Als u bekend bent met schrijftests voor uw code, wordt Jest meegeleverd om tests uit te voeren. Jest is een testraamwerk dat wordt aangemaakt en onderhouden door Facebook, de makers van React. Om uw tests uit te voeren, voert u uit npm-test in je opdrachtregelprogramma. Hiermee worden de tests uitgevoerd en vervolgens een watcher gestart om uw tests uit te voeren wanneer uw productiecode verandert. Er is een bestaand testbestand dat u kunt toevoegen in src / App.test.js.
Wanneer u klaar bent met het maken van al uw bewerkingen, is het tijd om uw app te implementeren. Het enige wat je hoeft te doen is uitvoeren npm run build in de map met apps. Dit gebruikt Babel om uw React-code om te zetten in code die de browser begrijpt. Het verkleint ook je code om er zeker van te zijn dat je de beste prestaties in de browser hebt.
Als u besluit om de create-react-app te blijven gebruiken, raad ik u aan tijd door te brengen met lezen in de gebruikershandleiding. Het heeft veel nuttige informatie over andere aan het gezicht gerelateerde onderwerpen, zoals het toevoegen van CSS-stylesheets, het importeren van andere componenten, het importeren van afbeeldingen en lettertypen en andere. Het bevat ook informatie over webontwikkelingspraktijken, zoals het gebruik van HTTPS, verbinding maken met een knooppuntback-end, progressieve webtoepassingen maken en meer.
Er is ook een aantal uitgebreide documentatie over het testen en implementeren van uw toepassing.
Ik hoop dat je nu kunt zien hoe eenvoudig het is om een React-applicatie te maken met behulp van het create-react-app-project. Ik hoop dat dit de toetredingsbarrière verlaagt en begint met React. Ik weet dat je ervan gaat genieten!
Accentsconagua