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!
App.jsx
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.
Greeting.jsx
import React, { Component } from 'react';
const Greeting = (props) => {
return <h1>Hello, {props.name}</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;
Result
