组件化开发&JSX语法&第一个实例

1.组件化开发-最基本的helloworld

 项目结构

 index.js

import React from "react";
import ReactDOM from "react-dom";
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'))

说明:import App from './App'相当于import App from './App.js'

App.js(组件)自定义组件,大写字母开头

import React, {Component} from "react";

class App extends Component{
    render() {
        return (
            <div>
                hello
            </div>
        );
    }
}

export default App


export default App 作用就是暴露组件,让外界引用,可以看到index.js中引用

2.JSX语法

遇到<>就当成html标签解析

遇到{}就当成js解析

 

 

posted @ 2020-06-29 09:44  GumpYan  阅读(222)  评论(0编辑  收藏  举报