Building with React (Part 2)
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!
