React-1-简介、安装和使用

一、安装

1.首先安装node.js

node.js是傻瓜式安装，会自动配置环境变量。

npm install webpack -g全局安装webpack

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

npm install -g create-react-app

3.创建项目

create-react-app xxx

 

二、基本使用

1.删除src目录下的所有文件

2.在src目录下创建两个文件

App.js：

import React, { Component } from 'react'

export default class App extends Component {
    render() {
        return (
            <div>你好</div>
        )
    }
}

index.js：

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(<App></App>, document.getElementById('root'))

 

三、react库、react-dom库和JSX介绍

react只做逻辑层

react-dom只做渲染层，去渲染实际的dom

JSX就是JS和html的混合体，当我们直接return一些标签时，实际上是使用了React.Component类并传入了一些参数。

JSX写法：

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
);

JS写法：

class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
}

ReactDOM.render(React.createElement(HelloMessage, { name: "Taylor" }), document.getElementById('hello-example'));