Hey there, As we covered in the Welcome email, I'm gonna show you how to get started with React all by itself (without Redux/Webpack/etc). If you have any questions along the way, please hit reply and ask! These emails are automated but your replies actually come to my real inbox, and I'll do my best to help. Let's get "Hello World" on the screen and then we'll talk about what the code is doing. 1. Start up a blank project on CodeSandbox: go here import React from 'react'; import ReactDOM from 'react-dom'; function Hi() { return <div>Hello World!</div>; } ReactDOM.render(<Hi/>, document.querySelector('#root')); Now, before we move on. Did you copy-paste the code above? Or did you type it in? Really though: it's important to actually type this stuff in. Typing it drills the concepts and the syntax into your brain. If you just copy-paste (or read and nod along, or watch videos and nod along), the knowledge won't stick, and you'll be stuck staring at a blank screen like "how does that `import` thing work again?? how do I start a React component??"Typing in the examples and doing the exercises is the "one weird trick" to learning React. It trains your fingers. Those fingers are gonna understand React one day. Help 'em out ;) Alright, let's talk about how this code works. ImportsAt the top, there are 2 import statements. These pull in the 'react' and 'react-dom' libraries. import React from 'react'; import ReactDOM from 'react-dom'; With modern ES6 JavaScript (e.g. most React code you'll see), libraries aren't globally available; they need to be imported. This is a change if you're used to <script> tags, and at first it might seem like a pain. But importing things explicitly has a really nice side effect: as you read through the code, you can always tell where a variable/class/object comes from. See the ReactDOM.render at the bottom? Instead of reading that and going "what the heck is ReactDOM, where does that come from?" you can look up top and see that it's imported from the 'react-dom' library. Nifty. The 'Hi' ComponentRight under the imports is a function called `Hi`. This is really truly just a plain JS function. In fact, everything in this file up to and including the word "return" is plain JS syntax, nothing React-specific. function Hi() { return <div>Hello World!</div>; } What makes this function a component is the fact that it returns JSX -- the `<div>Hello world</div>` part. React calls the function, gets the JSX, and renders the equivalent HTML to the DOM. Notice how the JSX is not a string. It's not Before React runs, there's an extra step the code goes through that converts the JSX into function calls. This all happens under the hood (Babel is the tool that does the heavy lifting). The fact that it's not a string might seem like an unimportant detail, but it's actually pretty cool: you can insert bits of JS code inside the JSX tags, and React will run that code and insert the values it produces. We'll see that in a minute. But how does React know where in the DOM to put this div? RenderingThe last line is what makes it all work. It calls the `Hi` function, gets the returned JSX, and inserts the corresponding HTML elements into the document under the element with id "root". ReactDOM.render(<Hi/>, document.querySelector('#root')); Your Turn!Now that you have a project in place, you can play around :) Make sure to actually try these exercises. Even if they seem really simple. Even if you are 99% sure you know how to do it, prove it to yourself by typing it out and seeing the working result. Liam Neeson is watching.
At this stage, if you already know some HTML and some CSS, you know enough about React to replicate basically any static website! Cram all the HTML into a single component, import a CSS file, style it up, and hey -- you're making web pages like it's 1995. Not too shabby for your first day! Play around with it and see what you can come up with. Send me a screenshot if you make something cool :) Tomorrow we'll talk about how to display dynamic data with React components. Cheers, |
To make sure you keep getting these emails, please add dave@daveceddia.com to your address book or whitelist us. Want out of the loop? Unsubscribe. My postal address: P.O. Box 248, Nutting Lake, MA |