Components are like functions that return HTML elements.
React Components
Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML via a render() function.
Components come in two types, Class components and Function components, in this tutorial we will concentrate on Class components.
//src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
src/app.js
import React from 'react';
//Create a Class Component
//class App extends React.Component {
// render() {
// return <h2>Hi, I am a Car!</h2>;
// }
//}
//Function Component
//function App() {
// return <h2>Hi, I am also a Car!</h2>;
//}
//Component Constructor
//class App extends React.Component {
// constructor() {
// super();
// this.state = {color: "red"};
// }
// render() {
// return <h2>I am a {this.state.color} Car!</h2>;
// }
//}
//Components in Components
class Car extends React.Component {
render() {
return <h2>I am a Car!</h2>;
}
}
class App extends React.Component {
render() {
return (
<div>
<h1>Who lives in my Garage?</h1>
<Car />
</div>
);
}
}
export default App;
src/app.js
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<Header/>
<Content/>
<Footer/>
</div>
);
}
}
class Header extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
</div>
);
}
}
class Content extends React.Component {
render() {
return (
<div>
<h2>Content</h2>
<p>The content text!!!</p>
</div>
);
}
}
class Footer extends React.Component {
render() {
return (
<div>
<h2>Copyright @2021</h2>
</div>
);
}
}
export default App;
src/app.js
import React from 'react';
//Stateful Example - set the state for owner component (App)
//TableRow for every object from the data array.
class App extends React.Component {
constructor() {
super();
this.state = {
data:
[
{
"id":1,
"name":"Cairocoders",
"age":"31"
},
{
"id":2,
"name":"Clyde",
"age":"45"
},
{
"id":3,
"name":"Caite",
"age":"40"
}
]
}
}
render() {
return (
<div>
<Header/>
<table>
<tbody>
{this.state.data.map((person, i) => <TableRow key = {i}
data = {person} />)}
</tbody>
</table>
<Content/>
<Footer/>
</div>
);
}
}
class Header extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
</div>
);
}
}
class Content extends React.Component {
render() {
return (
<div>
<h2>Content</h2>
<p>The content text!!!</p>
</div>
);
}
}
class Footer extends React.Component {
render() {
return (
<div>
<h2>Copyright @2021</h2>
</div>
);
}
}
class TableRow extends React.Component {
render() {
return (
<tr>
<td>{this.props.data.id}</td>
<td>{this.props.data.name}</td>
<td>{this.props.data.age}</td>
</tr>
);
}
}
export default App;
public/index.html
//public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
