react学习记录

第一：搭建环境

安装node.js

在开始前，请确保你的电脑安装了node，不知道装没装，就命令行工具node -v 一下，有版本号是成功安装的

安装官方脚手架create-react-app

• 这里介绍两种方式，习惯用哪个你自己选
  第一种
  npm install -g create-react-app
create-react-app myapp

  第二种
  npx create-react-app myapp

第二：目录结构介绍

public文件夹详解

初始化项目后，里边有三个小东西

favicon.ico : 网站图标，看，就是这玩意

src文件夹详解

• 这个目录里边放的是源代码，也是核心文件夹

  index.js : 项目的入口文件，根组件挂载根元素

第三：类组件和函数组件的编写

简单的函数组件
你也许会感到意外，这就是函数组件了？没错，就是这样。

function Header(){
  return <h1>我是头部</h1>;
}

function App() {
  return (
    <Header/>
  );
}

这样就行了

简单的类组件

真正有关键字定义类是es6开始的，用class。下面用类组件改写上述App函数组件，实现相同的效果，输出hello world

import React, {Component} from 'react'
class App extends Component{
    render(){
        return (
            <div>
                hello world
            </div>
        )
    }
}
export default App;

 

也许你不太理解上边的import React, {Component} from ‘react’，那个大花括号，是es6的语法，解构赋值，推荐参考下阮一峰大神的es6入门

- 代码中不会再写var，用let或const代替，详情参见let
- 要是不理解，也可以拆分来写
  import React from ‘react’
  const Component = React.Component

import React from 'react';
const Component = React.Component;
class App extends Component {
  
  render() {
    return (
      <div>
        hello world
      </div>
    );
  }
}

export default App;

 

图片资源，样式表引用问题
在react中，图片引入是有讲究的，分为本地图片引入和网络图片引用
网络图片引用和以前一样，img标签src属性写图片链接地址就行
本地图片这样不行，需要以路径形式导入，也要有alt属性

你是否注意到，你在js文件居然引入了css文件！！！
这都是脚手架中webpack帮我们做的
如果你还不清楚webpack，请参考 https://www.webpackjs.com/
 

第四：jsx语法

jsx简介

jsx是Javascript和XML结合的一种语法糖，它可以让我们更快的编写代码，属于html+js混写。这种语法最先在react中使用，后来vue中也可以，但不常见。jsx语法用熟悉了自然是快的，但对初学者而言，并不是很容易理解。

jsx的优势

详情参见 在 React 中使用 JSX 的好处 - clearYang - 博客园

• 这里简单举个例子
  jsx遇到<，就当作HTML解析，遇到{就当JavaScript解析.

比如我们写一段JSX语法

<h1>{1+2}</h1>

• 可以看到，除了h1的语义，js表达式也被识别了

jsx踩坑

• jsx中不允许用class属性，需用className代替
• 组件名必须大写
• 事件必须修正this指针，且绑定事件名时要使用小驼峰的写法onclick必须写成onClick

constructor(props){
  super(props)
  this.fun = this.fun.bind(this)      
}

onClick = {() => ()} //绑定的事件名小驼峰写法
onClick = {this.fun.bind(this)}

如果写行内样式用双花括号{{}} <p style={{color:"red"}}>hello</p>

jsx中不允许label标签使用for属性，需用htmlFor代替
jsx中所有的标签都必须闭合，<br>不行,必须<br/>
jsx中注释比较讲究，{/*JSX 中的注释方式*/},单行也可以

第五：传统实例-todoList

新建TodoList

• 将src下的App.js删除，新建TodoList.js,然后将index.js要导入的文件和挂载的组件一并修改

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';//注意点1
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<TodoList />, document.getElementById('root'));//注意点2
serviceWorker.unregister();

完善TodoList.js

import React,{Fragment} from 'react'
const Component = React.Component
class TodoList extends Component {
 
  render() {
    return (
      <Fragment>
        <div><input type="text" /> <button> 添加 </button></div>
               <ul>
                   <li>学习react</li>
                   <li>学习vue</li>
               </ul> 
     </Fragment>
    );
  }
}

export default TodoList;

• 样式不是重点，最后会美化一下，先凑合着看
• 注意最外层包裹元素的事