react demo

1.项目结构

2.创建 app / App.js 文件，这是一个组件

/**
 * 定义组件 class
 * 文件名 必须大写
 */
import React, { Component } from 'react';
/**
 * 继承 extends
 * 继承一个类
 */
// 我们定义一个叫做App的组件,在HTML中可以用<App></App>来使用它
// React要求自定义组件必须是大写字母开头
// React要求自定义组件的类必须继承于React.Component类
class App extends Component {
  // 组件中最重要的方法就是render方法,render是渲染的意思
  render() {
	// 返回一个jsx语法,非常牛逼语法
	return <h1>我是react,很高兴遇见你!说{ 5000 + 5000}次我爱你!</h1>
  }
}
// 向外暴露
export default App;

3.使用 App 组件，所以我们来到 app / main.js 文件：

/**
 * 入口文件
 */
import React from 'react';
// 枚举
import { render } from 'react-dom';
// 引入组件
import App from './App.js';

// render 使用、挂载组件,两个参数
// 第一个参数是 jsx 语法
// 第二个参数表示组件挂在哪里
render(
  <App></App>,
  document.getElementById('app-container')
);

4.主页面 index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <!-- 放置容器 -->
  <div id="app-container"></div>
  <script src="dist/all.js"></script>
</body>
</html>

5.效果图

 

posted @ 2018-01-30 21:33  每天都要进步一点点  阅读(536)  评论(0)    收藏  举报