react的安装与使用

一、脚手架工具create-react-app安装

使用以下命令进行安装：

npm install -g create-react-app

二、create-react-app的使用

1. 在需要创建项目的位置打开命令行
2. 输入create-react-app + 项目名称的命令，比如：

create-react-app todolist

3. 当项目创建完成后，可以进入项目，并启动：

cd todolist
npm start

三、脚手架工具生成的目录结构

• 重要文件：

1. index.html
2. index.js
3. App.js

• 文件内容：

1. App.js

import React, { Component } from 'react';
/**
    import {Component} from 'react'
    相当于：
    import {Component} from React // 因为react导出React对象
    由于解构赋值的原因，所以Component等于React.Component
*/
//所有的组件都要继承Component
class App extends Component {
  // 发送页面内容
  render() {
    return (
      

        Hello World
      
    );
  }
}
// 导出App模块
export default App;

2. index.js

import React from 'react'; // 导入React的作用是使用jsx语法
import ReactDOM from 'react-dom';
import App from './App'; // 接受
// 像js中使用标签的语法，叫做jsx语法
ReactDOM.render(, document.getElementById('root'));

3. index.html