src/pages/Detail.js

1 import React from ‘react’；
2 3 clas Detail extends React.Compent {
4         render() {
5              return <p>This is React rendering HTML!</p>
6          }
7 }
8 9 export default Detail; 

 ? import React from ‘react’ loads the React library, which is pretty central to our whole application and thus is required.

? classDetailextendsReact.Component{defines a new React component. React components can be big (like pages) or small (like a custom component to render breadcrumbs) and they are very flexible.

? render() { starts the render() method of our component. This is called by React when the component needs to be drawn to the screen, and need store turn something that can be drawn in the browser.

? export default Detail; The “export” keyword means this component is being exposed to the rest of our app to use, and “default” means it’s the only thing this class will expose.

Importing React Components using ES6
src/index.js

1 import React from ‘react‘;
2 import ReactDOM from ‘react-dom‘;
3 
4 import Detail from ‘./pages/Detal‘;
5 
6 ReactDOM.render(
7         <Detail />,
8          document.getElementById(‘app‘)
9 );

 ? import React from ‘react’ is a line you’ve seen before, and you’ll see again in this tutorial: it just sucks in the main React library so we can start work.

 ? import ReactDOM from ‘react-dom’ is new, and imports the React tools required to render to the DOM – that’s the name used for the document structure used to describe web pages and other similar documents.

? import Detail from ‘./pages/Detail’ is where we import our new React component into our app so that we can start using it.

? ReactDOM.render() is what kicks off (开始)the rendering of our entire（整个） app, and it takes two parameters（参数）: some JSX to render and where to render it to.

? <Detail /> is the first parameter we ask React to render, and it’s the JSX name of our Detail component.

? document.getElementById(‘app’) is the second parameter to the render method, and it tells React we want it to render inside the HTML element named “app” – that’s inside the index.html file we made earlier.

Now, before we continue you probably have some questions. Let me try to answer some:

? Why does Detail.js have a capital letter? This isn’t needed, but it’s stylistically（文档上） preferred.

? How does JSX know what <Detail /> means?We don’t give the component a name inside Detail.js, so instead the name comes from the way we import it: if you use import Bob from ‘./pages/Detail‘; then you could write <Bob /> and it would work just fine. (But please don’t do that if you value your sanity!)

? Can I put lots of components in Detail.js? You can if you want to, but again it’s preferable not to if you value your sanity. Stick to one component per file if you can.

? Do I have to render stuff inside my component? No, but React does need something to render at this point.Whenyou’re a more experienced React developer you’ll learn more about this

To recap, so far you’ve learned:

1. How to install Webpack, Babel and React for development with ES6.

2. How to create a basic React component and import it into an application.

3. How to write simple JSX to render content.

What are React Props?
src/index.js

1 import React from ‘react‘;
2 import ReactDOM from ‘react-dom‘;
3 
4 import Detail from ‘./pages/Detail‘;
5 
6 ReactDOM.render(
7         <Detail message="This is coming from propos!" />
8          document.getElementById(‘app‘)
9 ）;

 src/pages/Detail.js

1 import React from ‘react‘;
2 
3 class Detail extends React.Compent {
4       render() {
5             return <p>{this.props.message}</p>;
6        }
7 }
8 
9 export default Detail;

 How to Write if/else Conditional Statements in JSX

 In React is not use if/else ,but use double or even triple ternary expressions (三元运算符)；

src/pages/Detail.js

1 render() {
2        return <p>
3        {
4             chance.first() == ‘John‘
5             ？ ‘Hello, wei!’
6              : ‘Hello, yuan!‘
7        }
8        </p>
9 

 Using JSX to Render Several Elements at Once

1 render() {
2        return <p>Hello, {chance.first()}. </p>
3               <p>You‘re from {chance.country({ full: true})}.</p>
4 }//is wrong.因为render中只能返回一个顶级标签。如果想返回多个元素可以使用<div>标签

1 render() {
2       return  (<div>
3                      <p>Hello, {chance.first()}. </p>
4                      <p>You‘re from {chance.country({ full: true})}.</p>
5                 </div>);
6 }//is right

Handling Events with JSX: onClick

src/pages/Detail.js

 1 class Detail extends React.Compent {
 2         buttonClicked() {
 3                 console.log(‘Buton was clicked!‘)
 4 }
 5  
 6      render() {
 7          return (<div>
 8                          <p>Hello, {chance.first()}.</p>
 9                          <p>You‘re from {chance.country({ full: true })}.</p>
10                          <button onClick = {this.buttonClicked}>Meet Someone new</button>
11                    </div>);
12          }
13 }
14 
15 export default Detail;

src/papges/Detail.js

 1 <button onClick = {this.buttonClicked.bind(this)}>Meet Someone New</button>  //用blind（）来绑定this

React