Building with React (Part 2)

Ahkeem Lang
Jul 21, 2017 · 2 min read

Hey there this is another meditation of mine — So today I started to build my second ReactJS application. I haven’t done much but I installed it so that’s enough of a win for me! This morning I work up with more motivation than usual and I used every bit of it towards rereading the ReactJS documentation and building my new application.

The new React app is called Namer, right now it’s only purpose is to collect, store and remove names. From there I know I’d want additional features but as of now it’s just going to be a simple storing app. This is what I have so far: import React, { Component } from ‘react’;
import logo from ‘./logo.svg’;
import ‘./App.css’;

var NAMES = [
{
name: “Ahkeem”
},
];

function Header () {
return(
<div className=”App-header”>
<img src={logo} className=”App-logo” alt=”logo” />
<h2>Welcome to Namer</h2>
</div>
)
}

function Intro () {
return (
<div className=”App”>
<Header />
<p className=”App-intro”>
This will just be a name collector.
</p>
</div>
)
}

class App extends Component {
render() {
return (
<Intro />
);
}
}

export default App;

Today I just worked on extracting components, it was available for me so I did just that, but then I read Composition vs. Inheritance section of the React documentation. Ex:

Function Example (props) {

return(

<div>

{props.children}

</div

);

}

Function Another () {

return (

< Example>

<h1>Hey there! </h1>

</Example>

);

}

ReactDOM.render(< Another />, root);

I thought this was pretty cool! I’d like to try this model out first before I continue!

)
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade