react基础 (一)

React是灵活的并且能被用在很多项目之中。你能用它新建一个项目，但是你也能逐步的把它当成一个不需要重写的代码库。

1. 写在前面(这里通过npm安装react脚手架)：搭建react环境之前需要先安装nodeJs,安装nodeJs的过程会安装npm，nodeJs安装完成之后，需要配置环境变量： 环境变量配置
   

   安装之后 npm -v 出现版本号，证明安装成功，环境变量配置正确;

2. 通过npm安装可能会比较慢，可以换源，换到国内的源： npm config set registry https://registry.npm.taobao.org
   验证是否安装成功，可以用：npm config get registry

---

1. 创建有一个新的react工程：

npm install -g create-react-app
create-react-app my-app

2. Hello World

ReactDOM.render(
    <h1>Hello ,world !</h1>,
    document.getElementById('root')
);
<!--页面上就能看见helloworld-->
<!--react对ES6友好，鼓励用ES6中新增的语法，例如箭头函数，类，模板字符串，let，const-->

3. jsx介绍（既不是字符串，也不是html）

1. jsx中的表达式

{2+2} {user.firstName} {formatName(user)}都是合法的表达式
function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

2. jsx也是表达式（可以分配给参数，当做变量，或者作为一个函数的返回）

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

3. jsx属性说明（注意:jsx中的属性都是采用的驼峰写法，例如tabindex要改成tabIndex，classname要写成 className）

<!--jsx属性可以用双引号引起来，也可以用{}包起来，这就意味着属性可以用变量-->
const element = <div tabIndex="0"></div>;
const element = <img src={user.avatarUrl}></img>;

4. jsx children说明

<!--如果一个标签没有子节点，则该标签需要闭合-->
const element = <img src={user.avatarUrl} />;
<!--如果存在子节点-->
const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

5. jsx代表了对象的集合(babel会把JSX编译成React.createElement()...)

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);
<!--这两种写法实际上是相同的-->
<!--React.createElement()将上述代码创建了一个像这样的对象：-->
<!--const element={-->
<!--    type: 'h1',-->
<!--    props: {-->
<!--    className: 'greeting',-->
<!--    children: 'Hello, world'-->
<!--    }-->
<!--}-->

4. 渲染元素(react只在必要的时候更新，有变更的地方才会更新)

function Tick(){
  const element=(<div>
    <h1> Hello ,word!</h1>
    <h2>It is {new Date().toLocaleTimeString()} </h2>
    </div>);
    ReactDOM.render(element, document.getElementById('root'));
}
setInterval(Tick,1000);

时间渲染

只有时间会有变化,其他的元素并没有被重新渲染

5. 组件和属性(属性在组件内部是只读的)

1. 组件的创建形式

<!--定义了一个最简单的组件-->
<!--props代表了组件的属性-->
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
<!--无状态组件-->

<!--也可以通过ES6class创建一个组件-->
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
<!--有状态组件 在组件中可以存在生命周期-->

2. 使用方法

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);
<!--在屏幕上显示 Hello, Sara-->

6. state和生命周期

前面时钟的例子通过state和生命周期重写一遍

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Clock extends Component{
  constructor(props){
    super(props);
    this.state={date:new Date()};
  }
  componentDidMount(){
    // 在组件已经完成渲染之后调用
    <!--setInterval 函数为什么写成这样？ 解决闭包中this指向问题-->
    this.timerId=setInterval(()=>this.tick(),1000);
  }
  componentWillUnmount(){
  <!--组件卸载之前调用-->
    clearInterval(this.timerId);
  }
  tick(){
    this.setState({
      date:new Date()
    });
  }
  render(){
    return <div>
      <h1>Hello，Word!</h1>
      <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
    </div>
  }
}
ReactDOM.render(
  <Clock/>,
  document.getElementById('root')
);

7. 事件

1. 异同

<!--html中-->
<button onclick="activateLasers()">
  Activate Lasers
</button>
<!--React中-->
<button onClick={activateLasers}>
  Activate Lasers
</button>

另外一个区别就是不能用returnfalse去阻止默认事件，必须用 preventDefault事件是阻止默认事件

<!--html中-->
<a href="#" onclick="console.log('The link was clicked.'); return false">
  Click me
</a>
<!--react中-->
<a href="#" onClick={handleClick}>
  Click me
</a>
function handleClick(e) {
    e.preventDefault(); //阻止默认事件
    console.log('The link was clicked.');
}

8. 数组和keys

list

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);
<!--返回的时候浏览器会有一个警告，list需要有个key-->
function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);
<!--加上key警告就消失了-->

Keys 给一组元素一个唯一的标记

<!--元素中同兄弟之前的key值不能相同-->
function Blog(props) {
  const sidebar = (
    <ul>
      {props.posts.map((post) =>
        <li key={post.id}>
          {post.title}
        </li>
      )}
    </ul>
  );
  const content = props.posts.map((post) =>
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );
  return (
    <div>
      {sidebar}
      <hr />
      {content}
    </div>
  );
}

const posts = [
  {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
  {id: 2, title: 'Installation', content: 'You can install React from npm.'}
];
ReactDOM.render(
  <Blog posts={posts} />,
  document.getElementById('root')
);
<!--同兄弟间的key值不一定就可以，并不一定需要整个都不一样-->

map()也可以作为jsx中的函数表达式

 <ul>
  {numbers.map((number) =>
    <ListItem key={number.toString()}
              value={number} />

  )}
</ul>