一、React的创建

• 全局安装React脚手架库： npm install -g create-react-app
• 创建React项目： create-react-app 项目名
• 进入React项目： cd 项目名
• 启动项目： npm start

二、项目目录

• node_modules 项目依赖包

• public 静态资源文件

  • favicon.ico 页签图标
  • index.html 主页面
  • manifest.json 应用加壳配置文件
  • robots.text 爬虫文件

• src 源码

  • App.css App组件样式
  • App.js App组件
  • App.test.js App测试
  • index.css 全局样式
  • index.js 入口文件
  • reportWebVitals.js 页面性能分析
  • setupTests.js 组件单元测试

三、项目编写

App.js

import React, {Component} from 'react'
import Hello from './components/Hello/Hello.js'
import Welcome from './components/Welcome/Welcome.js'
class App extends Component {
    render() {
	return (
        <div>
            <Hello />
            <Welcome />
        </div>
        )
    }
}
export default App

Hello.js

import React, {Component} from 'react';
import hello from './Hello.module.css';
export default class Hello extends Component {
	render() {
		return <h2 className = {hello.title}> Hello, React </h2>
	}
}

Welcome.js

import React, {Component} from 'react'
import welcome from './Welcome.module.css';
export default class Welcome extends Component {
	render() {
		return <h2 className = {welcome.title}> Welcome </h2>
	}
}