React初识（二）

React中的组件

/src/index.js是整个程序的运行入口
index.js

import React from 'react';
import ReactDOM from 'react-dom';
//下面的App就是一个小的组件
import App from './App';
//PWA(progressive web application)它的理念是希望我们通过写网页的形式写手机的App应用
//引入serviceWorker实际上就是帮助我们借助网页去写手机App应用的功能。比如我们把网页上线到一台支持https协议的服务器上，那我们的网页就会具备这样的一个特性：当用户第一次访问我们的网页时需要连网才能看见我们的网页，但是一旦用户访问完网页突然断网了，如果项目引入了serviceWorker即使断网了，第二次访问的时候也依然可以访问到之前的那个页面，因为serviceWorker会把之前网页的内容存储在浏览器里面
// import * as serviceWorker from './serviceWorker';

//ReactDOM是一个第三方的模块，它有一个render方法，这个方法帮我们把一个组件挂载到某一个dom节点上
ReactDOM.render(<App />, document.getElementById('root'));

ReactDOM是一个第三方模块，它有个方法是render()，这个方法可以帮我们把一个组件挂载到某一个dom节点，在这里我们把App组件挂载到id为root的节点上。
当我们用ReactDOM去展示我们网页的内容时，App组件是包裹在一个< … />里面的，这种语法是jsx语法，如果在react项目中使用了jsx语法那就一定要在对应的文件里引入import React from 'react';

App.js

import React, { Component } from 'react';

//解构赋值的知识点
// import { Component } from 'react';
//等价于
// import React from 'react';
// const Component = React.Component;

class App extends Component {
  render() {
    return (
      <div className="App">
        hello world！
      </div>
    );
  }
}
//把这个组件导出出去
export default App;

当一个类继承了React.component类的时候，它就是一个react组件了。它里面的render(）函数返回什么这个组件就展示什么内容。

JSX语法

一个组件具体渲染的内容是由render()方法返回的结果决定的。在JSX语法中，如果我们要使用自己创建的组件，开头必须要用大写的字母。