react学习

react学习

一、创建react项目

1、创建项目文件夹，在vscode中打开项目文件夹，在此项目文件夹下打开终端，通过命令生成react项目，命令为npx creat-react-app react_demo

2、在生成的项目文件中有src文件夹，这是整个项目的源代码开发目录，在src目录下的index.js文件中编辑

// 从 react 的包当中引入了 React。只要你要写 React.js 组件就必须引入React, 因为react里有一种语法叫JSX，稍后会讲到JSX，要写JSX，就必须引入React
import React from 'react'
// ReactDOM 可以帮助我们把 React 组件渲染到页面上去，没有其它的作用了。它是从 react-dom 中引入的，而不是从 react 引入
import ReactDom from 'react-dom'
// ReactDOM里有一个render方法，功能就是把组件渲染并且构造 DOM 树，然后插入到页面上某个特定的元素上
ReactDom.render(
    <h1>初识react</h1>,
     //渲染到root这个div中
    document.getElementById('root')
)

3、启动项目，命令为：yarn start，此时在页面就能看到h1标签中的数据被渲染到页面

4、在做项目时，html的结构不可能只有一个h1 标签，因此，我们可以定义一个变量，存储html结构，在将变量引进render中去渲染到页面中，如下

import React from 'react'
import ReactDOM from 'react-dom'

const app = '<h1>欢迎进入React的世界</h1>'

ReactDOM.render(
  app,
  document.getElementById('root')
)

5、以上方法已经将react是怎样将数据渲染到页面中解释的比较清楚，但是还有我们发现，定义变量的话无法向结构中传递参数，因此我们改进上述方法，将定义的变量改成一个方法，让方法return一个元素给我们去渲染到页面中，以下代码也是写在index.js文件中

• 函数式组件，也叫无状态组件

import React from 'react'
import ReactDom from 'react-dom'

const App = ( props ) => {  //组件名必须大写
  return (
        //注释的内容要加{}
      <h1> 
      {/* 这里是要注释的内容 */}  
      hello React 你好 -- { props.name } </h1>)
}
ReactDom.render(
  <App name = "zhangsan"/>,
  document.getElementById('root')
)

• class类组件

//新建一个App.js文件，在里面书写以下内容
import React, { Component } from 'react' 
// 创建类【 组件 】
class App extends Component{
  render () {  // render将 jsx 转成 VDOM 对象结构
    //console.log( this )
    return (
        //使用{this.props.name}接收App组件上的name属性
      <div>
        <h1>这是React类组件的创建 { this.props.name } </h1>     
      </div>
    )
  }
}
export default App  // 导出类
再在index.js文件中使用上述内容
import React from 'react'
import ReactDom from 'react-dom'
import App from './App.js'
ReactDom.render(
	<App name = 'zhangsan' />  //给App组件添加一个name属性
    //组件的使用就相当于在实例化类
    document.getElementById('root')
)

二、组件的组合与嵌套

1、组件的嵌套

新建一个Child.js文件，在里面写一个组件
import React, { Component } from 'react'

class Child extends Component{
    render () {
        return (
            <div>
                <h3> 这里是类组件1</h3>
            </div>
        )
    }
}
export default Child
//在App.js文件中引入Child.js
import Child from './components/Child'
<Child/>  //将组件以标签的形式写在父组件的模板中

2、组件的组合

//在index.js中引入Child
import Child from './components/Child'
ReactDom.render(
	<App name = 'zhangsan'>
    <Child></Child> //将组件以标签的形式放在父组件的内容中
    </App>
)
在App.js中使用{ this.props.children }

总结：

• index.js是入口文件，所有第3 方包以及需要展示的组件都要写在index.js中，使用render函数渲染到页面
• App.js是一个组件，可以说是最大的组件，他可以使用函数式组件或class类组件的形式定义，然后将<App></APP>这种标签的形式放到index.js 文件的render函数中渲染
• 其他定义的子组件之后都可以以标签的形式放入App这个父组件的模板或者内容中去
• App的内容是App.js这个文件，用{this.props.children}展示；App模板是index.js 中的<App></APP>标签

三、组件的样式

1、行内样式

//新建一个StyleComponent.js文件，写入如下内容
import React, { Component } from 'react'
class StyleComponent extends Component{
    render(){
        return(
            <div>
                <p style={ {width:'100px',height:'100px',background:'red',color:'white'}} >行内样式</p>
            </div>
        )
    }
}
export default StyleComponent
//在App.js中引入StyleComponent,以标签的形式写在父组件中进行渲染
import StyleComponent from './components/StyleComponent';
class App extends Component{
    render(){
        return(
            <div>
                <StyleComponent></StyleComponent>
            </div>
        )
    }
}

//以上形式还可以写成如下
styles = {width:'100px',height:'100px',background:'red',color:'white'}
<p style = {this.styles }></p>

2、外部样式

//新建一个StyleComponent.css文件,写入样式
.size{
    width:100px;
    height:100px
}
.bg{
    background:red;
    color:white
}
//在StyleComponent.js文件中引入css文件
import './StyleComponent.css'
 <p className = "size bg">外部引用样式</p>

3、第三方包

//先安装第三方包：yarn add classname
//在StyleComponent.js文件中引入第三方包
import classname from 'classname'
<p
    className = {
        classname({
            size:true,
            bg:true
        })
    }
        >第三方包样式</p>

4、组件样式

//先安装第三方包：yarn add styled-components
//在StyleComponent.js文件中引入第三方包
import styled from 'styled-components'
//定义样式组件，注意组件名要大写
//这里的样式如果是添加在div上就写div，是p就写p
const Container = styled.div` 
    width:200px;
    height:200px;
    background:blue;
    color:white
`
//在StyleComponent.js文件中以标签的形式使用
<Container></Container>