Hacking.with.React.pdf

Hacking.with.React.pdfThis book is dedicated to my wife, who has been endlessly patient with me while i write and re-writethis book. No matter how hard I work, she works just as hard and has always been there for meCONTENTSContentsWelcomeBegin at the Beginning: Chapter OneThe Importance of using Webpack with React1392Introduction to JSXImporting React Components using ES614What are React Props?16enerating Random values for Our Page18How to Write if/else Conditional Statements in JSX20Using jsx to Render Several Elements at Once23Handling Events with JSX: onClick25State vs Props in reactChanging a react Component's State with setstateState and the Single Source of Truth32Rendering an Array of Data with mapl and JSX33Cleaning up and Preparing for a real project37Fetching Ajax Data from GitHub using SuperAgent40Converting GitHub's JSON into Meaningful JSx42Time for a Task: Reading from Three Feeds45How to Upgrade Our App to Read Thnree feeds46Refactoring our ajax Code: Dont Repeat yourself53www.hackingwithreact.comtwostrawsCONTENTSRefactoring our State Code: Passing Parameters in on Click56Introducing react router59How to add a New route to react router62Creating a Link Between Pages in React Router64Making Custom URLS with React Router Params66Adding a Root route Using React Router and Indexroute69Cleaning up Our Routes and preparing for the Next Step72Time for a test: Clickable usernames74Making usernames clickable: My Solution76Time for some basic user interface polish80Adding react router Breadcrumbs with Link and IndexLink82The first 80% is Done: Now what?85How to Configure Jest to Test React and eS687Creating our First React Test with Jest90Using Jest to Test Our React Components93Using Jest to Simulate User Interaction on a React Component96Time for Ajax: Using Jest with Asynchronous Tests99Mocking Ajax with Jest: Making an Asynchronous Test Become Synchronous102Cleaning up our Tests: Last Tweaks10生Linting react using ESlint and babel108Linting react using airbnb's ESLint rules110How to Add React Component Prop Validation in Minutes113Bringing it all Together Project Complete,,116www.hackingwithreact.comatwostrawsWelcomeWelcomeWelcome to Hacking with React, a hands-on introduction to making a web app using React, ES6Jest and moreWhat will I learn? We'll cover lots of React, naturally. But we'll also be using ES6, Babel, Webpack,React Router, Jest, SuperAgent, Chance, ESLint and moreDo you cover Flux or Redux? No, I'm afraid not. React has a steep learning curve all of its owneven before you add in JSX, React Router, Jest and others; as much as I like Redux, adding it into themix would have made things much too complicated for beginners. Perhaps if this book gets enoughinterest I shall be able to add Redux material as part of a second projectDo I need to know ES6/ECMAScript 2015? No. This book assumes you're at least somewhatfamiliar with JavaScript, but I try to explain ES6 features along the way. This is not an ES6 tutorial,but at the same time i' m aware that many people havent used it before so i do my bestWait.do web browsers even support ES6 yet? No, but we'll be using Babel to transpile es6 toregular old JavaScript that works in any browserWill I actually make anything, or is it all just theory This book takes you through one completeproject that loads data using the GitHub aPI. i chose the gitHub aPi because it has public access tointeresting data. In order to help make the learning curve shallow, the first quarter of the book usesvery simple examples that evolve into the full project later onHow come this book is so short? I've seen React books twice this length! It's true: this is a shortbook, but it's short because I focus on teaching you React. i dont discuss the history of react orother components, and i don 't go off on any tangents comparing various options. This book teachesyou React in the shortest possible time, and I think you' ll be impressed by how quickly you learnDoes the book cover testing? Yes, although I leave it to near the end Heresy, I knowI spotted an error/typo- what should i do? Email me at paul@hackingwithreact com and letme know. Please send me the chapter name that contains the error otherwise it can be hard to trackdownlCan i get the source code for the finished project? Yup, it's all on GitHubWho are you? Why should i care what you say? My name is Paul Hudson, and my apps are usedby the likes of MacLife magazine, Edge magazine, Fender, Virgin, Jamie Oliver, Odeeon esco. anmore. I'm an author in my spare time, having written PHP in a Nutshell, Ubuntu Unleashed andFedora Unleashed. Previously I was the editor of Linux Format magazine, but my writing has alsoappeared in Mac Format magazine, Net magazine and Tech Radarwww.hackingwithreact.comatwostrawsWelcomeYou might like to know that I have two other Hacking with.books available online: Hacking withSwift teaching iOS coding and Hacking with PHP teaching server-side web development. Yes, theyare both available online for freeYou will often find me on Stack Overflow answering questions about iOS, PHP, and reactI love your stuff are you available for hire? Get in touch at paul@hackingwithreact com andlets talk- I love coding, and I love writing, so being able to put them both together is pure magicfor meIhaveaquestionaboutsomethinginthebookHowcanIcontactyouUsepaul@hackingwithreact.comif you want to email me. Alternatively, you should follow me on Twitter: @twostrawswww.hackingwithreact.comatwostrawsBegin at the Beginning: Chapter OneBegin at the Beginning: Chapter OneThis book is broken up into lots of short chapters. I've tried to make every chapter take about fiveminutes to complete, although a handful might take 10 minutes because they cover more complicatedtopics. These short chapters are designed to make it easier for you to start and slop as you need toto re-read chapters if there was something you didn 't fully understand, and allow you to see yourprogress more clearly as you move from chapter to chapterImportant: when you see code with a filename attached, like the below it means you should writethat code in that file Like thisdist/somefile. jsPut this code into some file. jsin the dist directory.Code without a title is either a command to run on the command line, or is code presented just foryour reference -in which case I often prefix it with The following code wont work becauseThere are some places where you'll see code with a filename in the context of reading code in thatyour code should look if you've been following alon, " ed For example, Imight say heres howfile rather than writing, but these places are clearly markAnyway, thats more than enough explanation. If you re ready, let's get started open the Terminalapp and run these commands to create your project directorycd Desktopmkdir hwrcd hwrnpm init -yIf you' ve never used the Terminal command before, you should be able to find it using Spotlight onOS X If you're using Windows, you should use the Command Prompt. If you're using Linux, anyterminal emulator is fineThe first command switches to your desktop, which makes finding your work easier. The secondcommand creates a new directory called hwr-short for Hacking with React- but you can call itwhatever you want within reason. Note: calling it"react will cause problems, so please try to beoriginalwww.hackingwithreact.comatwostrawsBegin at the Beginning: Chapter One4The third command navigates into the newly created hwr directory, which is where we'll be workingfor the remainder of this tutorial. This is your project directory, and you should run all futurecommands from here. The final command creates a new project using npm, at which point you'reready to gohwr-zsh-99×27》》》 cd desktop/ Desktop》)) mkdir hwrDesktop》》》 cd hwr/D/hwr》》) npm initWrote to /Users/hudzilla/Desktop/hwr/package jsondescriptirips":itest: echo\"Error: no test specified\"&& exitkeywords":[]License":ISOSetting up a skeleton project takes just four commands in the terminal. It's worth taking the time to getcomfortable in the terminal window, because we'll be using it more in the futureBefore we do any coding we have a bit of boring configuration to get through. This is unavoidable,I'm afraid, but at the same time it's hugely valuable: you'll be spending the next few hours workingthrough this tutorial, so spending five minutes making sure your project is configured correctly willmake your life much easierIn your terminal window, still in your project directory, run these commands:npm install --save-dev webpack webpack-dev-server react-hot-loadernpm install --save-dev babel-core babe l-loadernpm install--save-dev babel-preset-es2015 babel-preset-reactnpm install --save react react-dom history react-routerNote: if you see "command not found for npm, it means you dont have Node. js installed You needto go to nodejs org and install Node. js then try againThose npm commands take a little while to run because they pull in quite a few pieces of softwareIf you' ve never used npm before, the first three commands mean install this software for use whileIm developing and the fourth means install this software for use while I'm developing, but I'llalso need it when my app is in production toowww.hackingwithreact.comatwostraws