前端入坑(一)--------react(在屏幕上获取一些东西 )

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 2. Hold your breath and delete the entire contents of the index.js file you see before you. 3. Type in this code: 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. Imports At 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' Component Right 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 return "<div>Hello World</div>";. React isn't turning these things directly into strings, either. 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? Rendering The 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". document.querySelector("#root") works similar to jQuery's $("root"), finding and returning that element from the document. 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. Change the text "Hello World!" to say "Hello <your name>!" Bold your name by wrapping it in a <strong> tag. It works just like HTML. Inside the <div>, and under your name, add some other HTML elements. Headings, ordered and unordered lists, etc. Get a feel for how it works. How does it handle whitespace? What happens if you forget to close a tag? I mentioned that you can put real JS code inside the JSX. Try that out: inside the div, insert a JS expression surrounded with single braces, like {5 + 10} Want to style it with CSS? Instead of using the "class" property like you would in HTML, use "className". Then create a file src/index.css with the styles, and add the line "import './index.css'" to the top of index.js. Yep, you can import CSS into JS. That's Webpack working its magic behind the scenes. 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, Dave

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