Props is originally hip-hop slang, derived from propers, both similarly meaning due respect.

According to The Rap Dictionary ("the oldest and ultimate resource for looking up hip-hop slang"), props is:

An abbreviation of "propers" or proper respects. A show sits on physical and non-physical props. At an award ceremony the winner gives props: "And I would like to thank...". "Cause this hip-hopper gets props just like a mobster" -- Da Youngstas featuring Pete Rock & C.L. Smooth (Who's the Mic Wrecka)

An older Hip-Hop/Slang Dictionary posted to alt.rap in June 1992 by Lee P Miller defines:

props : 1) (n) Proper respects.

The oldest use I found in alt.rap is from July 11, 1991 by Gregory Vincent Battle:

Now wait a second here. I have to give Hammer minor league props, even before "Hammer Don't Drown Em". I personally HATED Hammer when I first heard him. He stole rhymes (worse than Shy D, that fuck), and inimitable rap ideas ("yeahh boyeee"), and Too Big was more of a black Pilsbury Dough Boy than a sidekick. Shit, I'd kick him in the side :) Well, I got free tickets to his first concert tour and I enjoyed it completely. His show was pure energy. I think he might overdo it now with his 60+ dancers/backup rappers/DJ's. But hey, I still don't like him enough to buy one of those wick-wack rekkids.

The OED also says it's a shorted plural form of proper with a first quotation from the Chicago Tribune (July 1990):

I was one of the first female rappers, but I've always gotten my props.

The OED says propers is similar African-American slang for due respect, first quoted in the Chicago Daily Defender (January 1971):

A level of existence which affords each black man his propers—dignity, pride,..and the ability to govern his destiny.

Here is one other example in a more practical way. Suppose you have developed a very basic (for simplicity for this post) reusable <TextInput/> Component & want to reuse it over the whole application. The definition is like this.

function TextInput({htmlId, name, type="text", ...props}){
    return(
        <div>
            <input
                id={htmlId}
                name={name}
                type={type}
                {...props}
            />
        </div>
    )
}  

And here you are implementing the above component like this.

class ExampleOptional extends React.Component{
    render(){
        return(
            <TextInput
                htmlId="name"
                name="firstName"
                text="text"

                /** Props(place="XYZ & state="ABC") below are defined and destructured in TextInput 
                 Definition because there is {...props} defined in TextInput 
                 definition, if there is no {...props} in definition, no other than id, name & type 
                 props will be handled  */

                place="XYZ"
                state="ABC"
            />
        )
    }
}

So if you give anything apart from "htmlId, name & text" to TextInput as a prop, it will be get handled by {...props} which you defined in the TextInput component definition. Otherwise, it won't be there in the DOM of TextInput. (As you can see from the below picture, place & state props that were not defined in the original TextInput component definition gets handled automatically)

NOTE: Whether you have props destructured( {...props} ) or not, you will be able to find all your props passed in Chrome's Developer tools React's Component tab, but it does not have any impact on DOM or concerned element.