Använda Skapa React App

React har snabbt blivit en populär ram för att skapa både klientsidor och serverns visningar. Det fanns ett högre inträdeshinder med verktyg tillsammans med en viss frustration med JavaScript-trötthet från samhället. Skapa-reagera-appen skapades för att hantera dessa frustrationer.

Komma igång

Du vill först se till att du har Node installerat på ditt system. Du måste åtminstone ha Node version 4 installerad, men de rekommenderar att du har version 6 för snabbare nedladdning och bättre diskanvändning. Du kan använda nvm för att enkelt växla mellan nod-versioner också. 

När du har installerat noden vill du öppna ditt favoritkommandoradsverktyg och installera skapa-reagera-appen globalt så att du kan exekvera det var som helst på ditt system. 

npm installera-g skapa-reagera-app

Så här skapar du din första app

Du vill först öppna kommandoraden och navigera eller skapa en katalog där du ska göra din utveckling. Nästa kommer vi att skapa appen genom att springa skapa-reagera-app tuts-plus-reagera-app. Detta kommer att exekvera cli-verktyget för att skapa vår tuts-plus-reagera-app. 

När CLI-verktyget är klart kommer du till en sammanfattningsskärm som låter dig veta var appen har skapats och visar dig en lista med kommandon som du kan använda.

Därefter vill du navigera till vår nya app genom att exekvera cd-tuts-plus-reagera-app.

Starta App

Du kan köra appen lokalt genom att exekvera npm start. När appen startas kommer du automatiskt att navigera till http: // localhost: 3000 / i din webbläsare och se din nya React-applikation. 

Appen använder webpack för att köra en lokal dev-server. Det finns en klockfunktion, så när du gör ändringar till din React-kod och spara, kommer du se att ändringarna automatiskt visas i webbläsaren. 

Om du gör några fel med din kod kommer du att se dessa fel eller varningar visas i webbläsaren.

Kodstilar och testning

ESLint ingår för att säkerställa att din kod följer vanliga kodformat. Det här hjälper dig att se till att din kod är konsekvent, vilket är särskilt användbart när det finns flera bidragsgivare till ett projekt. Jag föreslår att du använder det om du är ny för att reagera så bra att du lär dig bra React och JavaScript kodning stilar. 

Om du är bekant med skrivprov för din kod ingår Jest för att köra test. Jest är ett testramverk som skapas och underhålls av Facebook, skaparna av React. För att utföra dina test, kör npm-test i ditt kommandoradsverktyg. Detta kör testen och starta en klockare för att utföra dina test när din produktionskod ändras. Det finns en existerande testfil som du kan lägga till i src / App.test.js.

Använda din app

När du är redo att göra alla dina ändringar är det dags att få din app att distribueras. Allt du behöver göra är att utföra npm kör byggnad i din apps-katalog. Detta kommer att använda Babel för att transpilera din React-kod till kod som webbläsaren förstår. Det kommer också att minska din kod så att du får bästa möjliga prestanda i webbläsaren.

Användarguide

Om du bestämmer dig för att fortsätta använda skapa-reagera-appen, föreslår jag att du spenderar tid genom att läsa igenom användarhandboken. Den har mycket användbar information om andra visningsrelaterade ämnen som att lägga till CSS stylesheets, importera andra komponenter, importera bilder och teckensnitt och andra. Den har också information om webbutvecklingspraxis som att använda HTTPS, ansluta till en nodback-end, skapa progressiva webbapplikationer och mer. 

Det finns också en del omfattande dokumentation om testning och implementering av din ansökan.

Glad Hacking

Jag hoppas att du nu kan se hur lätt det är att skapa en React-applikation med hjälp av projektet Skapa-reagera-app. Jag hoppas att detta hjälper till att sänka inträdesbarriären och börjar med React. Jag vet att du kommer att njuta av det!