版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Hreticent/article/details/84255994
主要内容
1.React目录结构分析
2.创建组件
3.JSX语法
4.绑定数据 绑定对象
5.React绑定属性( 绑定class 绑定style 图片)
删除没有用的文件并添加assets目录
如下图:今天主要讲解Home.js
index.js
// React是React的核心库
// ReactDOM是提供DOM相关的功能
import React from 'react';
import ReactDOM from 'react-dom';
// import './index.css';
// 引入App.js 这个组件 注意组件名字的首字母必须大写
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
App.js
import React, { Component } from 'react';
// import logo from './assets/images/logo.svg';
import './assets/css/index.css'
// 引入Home组件
import Home from './components/Home'
class App extends Component {
render() {
return (
<div className="App">
<h2>你好,我是react 的根组件App.js。</h2>
<h3>这是demo1</h3>
<Home />
</div>
);
}
}
export default App;
Home.js
import React, {Component} from 'react';
class Home extends Component{
// 构造函数
constructor(){
super();
// react 定义数据
this.state={
name:"令狐冲",
age:"25",
girlfriend:{
name:"任盈盈",
age:"24",
home:"mojiao"
}
}
}
// 方法之间不用写逗号
render(){
// React创建组件、 ReactJSX语法、
// React绑定数据 React绑定对象
return(
<div>
<h4>react里面的所有节点都要被根节点包含</h4>
<p>姓名:{this.state.name}</p>
<p>年龄:{this.state.age}</p>
<p>对象名字:{this.state.girlfriend.name}</p>
<p>对象年龄:{this.state.girlfriend.age}</p>
</div>
)
}
}
export default Home;
页面效果: