我想在App.js和Apa.jsx中插入main.css样式，改变字体和背景颜色，并且加上img目录下的图片，请问怎么修改？

Question

App.js

import React from 'react';

//  React中并不一定要用JSX
//  JSX只是React.createElement(component, props, ...children)的语法糖，完全可以用原生JS替代




class App extends React.Component {
    constructor() {
        super();
    }
    render() {
        return React.createElement('div', null, `第一个Hello ${this.props.name}`);
    }
}


export default App;

Apa.jsx

import React from 'react';

// const title = response.potentiallyMaliciousInput;
// 要接收到的可能含有危险内容的字符串放入大括号中，这是比较安全的做法

const element = (
    <div>
        <h1>01345687</h1>
        <h2>Good to see you here.</h2>
    </div>
);

class ImgShow extends React.Component {
    render() {
        return (
            element
        );
    }
}
export default ImgShow;

项目地址是：

项目的地址

新改

import React from 'react';
import '../css/style.css';

function formatName(user) {
    return user.firstName + ' ' + user.lastName;
}

const user = {
    firstName: '我123，',
    lastName: '起价的夫人'
};

const user_new = {
    firstName: '新的我，',
    lastName: '测试的文字'
};

function getGreeting(user) {
    if (user) {
        return <div className="hello" style={{backgroundColor:'lime'}}>new——陌生的访客, {formatName(user)}!</div>;
    }
    return <div>Hello, 问一下</div>;
}

//const element = <img src={user.avatarUrl}></img>;
const element = (
    <h1>
        Hello, {formatName(user)}!
        {getGreeting(user_new)}
    </h1>
);



class Apa extends React.Component {


    render() {
        return (
            element
        );
    }
}
export default Apa;

Answer 1

在 import React from 'react';
后面 import 'main.css'
webpack 配置好 css-loader

Answer 2

学习下阮一峰老师的教程：CSS Modles