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

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

组件化开发&JSX语法&第一个实例_第1张图片

 项目结构

组件化开发&JSX语法&第一个实例_第2张图片

 index.js

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

ReactDOM.render(, 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 (
            
hello
); } } export default App


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

2.JSX语法

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

遇到{}就当成js解析

组件化开发&JSX语法&第一个实例_第3张图片

 组件化开发&JSX语法&第一个实例_第4张图片

 

你可能感兴趣的:(组件化开发&JSX语法&第一个实例)