react - create react app - ReactJS Components - react js - reactjs
What is Components in Reactjs?
- ReactJS Components is an abstract idea.
- Let’s see how to combine components to make the app easier to maintain.
- This approach will allow you to update and change your components without affecting the rest of the page.
learn reactjs tutorial -
react components statefull
- reactjs example - react tutorial - reactjs - react
Stateless Example
- Our first component in example below is App. This component is owner of Header and Content.
- We are creating Header and Content separately and just adding it inside JSX tree in our App component.
- Only App component needs to be exported.
Core Concept of Reactjs :
Reactjs - Create Components / Execute Components :
App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<Header/>
<Content/>
</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>
);
}
}
export default App;
click below button to copy the code. By reactjs tutorial team
- To be able to render this on page, we need to import it in main.js file and call reactDOM.render().
- We already did it when we were setting environment.
Article tag : react , react native , react js tutorial , create react app , react tutorial , learn react
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));
click below button to copy the code. By reactjs tutorial team
Output:
- Above code will generate the following result:
learn reactjs tutorial -
react components stateless
- reactjs example - react tutorial - reactjs - react
Article tag : react , react native , react js tutorial , create react app , react tutorial , learn react
Statefull Example
- In this example, we will set the state for owner component (App). The Headercomponent is just added like in the last example since it doesn't need any state.
- Instead of content tag, we are creating table and tbody elements where we will dynamically insert TableRow for every object from the dataarray.
- You can see that we are using EcmaScript 2015 arrow syntax (⇒) which looks much cleaner than the old JavaScript syntax.
- This will help us create our elements with fewer lines of code.
- It is especially useful when you need to create list with a lot of items.
Article tag : react , react native , react js tutorial , create react app , react tutorial , learn react
App.jsx
import React from 'react';
class App extends React.Component {
constructor() {
super();
this.state = {
data:
[
{
"id":1,
"name":"Foo",
"age":"20"
},
{
"id":2,
"name":"Bar",
"age":"30"
},
{
"id":3,
"name":"Baz",
"age":"40"
}
]
}
}
render() {
return (
<div>
<Header/>
<table>
<tbody>
{this.state.data.map((person, i) => <TableRow key = {i} data = {person} />)}
</tbody>
</table>
</div>
);
}
}
class Header extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
</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;
click below button to copy the code. By reactjs tutorial team
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App/>, document.getElementById('app'));
click below button to copy the code. By reactjs tutorial team
Article tag : react , react native , react js tutorial , create react app , react tutorial , learn react
NOTE:
- Notice that we are using key = {i} inside map() function.
- This will help React to update only necessary elements instead of re-rendering entire list when something change.
- It is huge performance boost for larger number of dynamically created elements.
Output:
