react教程入门教程

标题创建并运行react工程

1. 安装node及npm（或cnpm）
   终端用node -v 和 npm -v 来查看版本号
   安装 Node >= 8.10 和 npm >= 5.6
   安装参考：https://blog.csdn.net/wjnf012/article/details/80422313

2. 创建项目并且运行项目
   npx create-react-app my-app
   cd my-app
   npm start
   到达这一步，项目就已经运行起来了

标题工程目录说明及补充常规目录

标题组件挂载

创建组件

组件代码

import React, { Component, component } from 'react'

class Home extends Component{
    //构造函数
    constructor(){
        super();//继承Component 指代父类的this
        //定义数据
        this.start={
            name:'hkm',
            age:'25',
            title:'我是title',
            style:{
                color:'red',
                fontSize:'12px'
            }
        }
    }

    //自定义方法
    run(){
        let name=this.start.name
        alert(name+"是个弹出框")
    }

    getThis(){

    }

    //模板
    render() {
        //多行代码需要增加（），并且需要根节点包含起来
        return (
            <div>
                Home 组件 - 点击事件，数据展示，style样式绑定，class及for写法
                {/* 第一种传this方法，bind */}
                <div onClick={this.run.bind(this)}>点击事件（bind）</div>
              
                <p className="red" title={this.start.title}>数据展示name----{this.start.name}---{this.start.age}</p>
                <p  style={this.start.style} >style样式</p>
                <label htmlFor="name">姓名：</label>
                <input id="name"/>
                <p>---------------------------------------------------------------------------------------------------------------</p>
            </div>
        ) 
    }
}

//暴露组件
export default Home

挂载组件

APP.js代码

//import logo from './assets/images/logo.svg';
//import './assets/css/App.css';
import React, { component } from 'react'
// 引入组件
import Home from "./component/Home"

function App() {
  // JSX 语法
  return (
    <div className="App">
   
     <Home />
    </div>
  );
}

export default App;