React: Component and Props

As a junior web developer, one of my goals is to become a better person every day. That is why I decided to write about the coding that I know and learn. It might be very simple and easy for some people, but I celebrate every small step (which motivates me), so I try to do it every day! You are welcome to give feedback to my posting!


import react, { Component } from 'react';
import Greeting from './components/greeting';

class App extends Component {
    render() {
        return (
            <Greeting name='Grace' />

export default App;

You can make props that will be passed to a component in this file. In this example, name is props name (it can be anything). Grace is the value that is assigned to props.


import React, { Component } from 'react';

const Greeting = (props) => {
    return <h1>Hello, {}</h1>;

export default Greeting;

You can decide how a component should look like. You can get a value from the parent component to access the props.

If you don't want to type props.something every time, you can do it this way.

import React, { Component } from 'react';

const Greeting = ({ name }) => {
    return <h1>Hello, {name}</h1>;

export default Greeting;


Screen Shot 2020-12-10 at 14.09.56.png