gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: move component to components, duplicate articles (#23862)

Browse Source
This commit is contained in:
Nathan Hannig
2018-10-21 10:30:12 -07:00
committed by Randell Dawson
parent 148336e82b
commit af7d1bbc63
2 changed files with 79 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
guide/english/react/component/index.md
View File

@ -1,83 +0,0 @@
---
title: React - Components
---
## React - Components
Components are reusable in react.js. You can inject value into props as given below :
```jsx
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Faisal Arkan" />;
ReactDOM.render(
element,
document.getElementById('root')
);
```
The value ```name="Faisal Arkan"``` will be assigned to ```{props.name}``` from ```function Welcome(props)``` and returns a component ```<h1>Hello, Faisal Arkan</h1>``` which is saved into the const variable ```element```. The component can then be rendered via ```ReactDOM.render(element, document.getElementById('root'));```. ```document.getElementById('root')``` in this case is the target location you would like the ```element``` component to be rendered.
### Other ways to declare components
There are many ways to declare components when using React.js, but there are two kinds of components, ***stateless*** components and ***stateful*** components.
### Stateful
#### Class Type Components
```jsx
class Cat extends React.Component {
constructor(props) {
super(props);
this.state = {
humor: 'happy'
}
}
render() {
return(
<div>
<h1>{this.props.name}</h1>
<p>
{this.props.color}
</p>
</div>
);
}
}
```
### Stateless Components
#### Functional Components (Arrow Function from ES6)
```jsx
const Cat = props => {
return (
<div>
<h1>{props.name}</h1>
<p>{props.color}</p>
</div>;
);
};
```
#### Implicit Return Components
```jsx
const Cat = props =>
<div>
<h1>{props.name}</h1>
<p>{props.color}</p>
</div>;
```

83
guide/english/react/components/index.md
View File

@ -1,12 +1,87 @@
--- ---
title: Components title: Components
--- ---
## Components
# Components Components are reusable in react.js. You can inject value into props as given below :
Components are the building blocks of React. ```jsx
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Faisal Arkan" />;
ReactDOM.render(
element,
document.getElementById('root')
);
```
The value ```name="Faisal Arkan"``` will be assigned to ```{props.name}``` from ```function Welcome(props)``` and returns a component ```<h1>Hello, Faisal Arkan</h1>``` which is saved into the const variable ```element```. The component can then be rendered via ```ReactDOM.render(element, document.getElementById('root'));```. ```document.getElementById('root')``` in this case is the target location you would like the ```element``` component to be rendered.
### Other ways to declare components
There are many ways to declare components when using React.js, but there are two kinds of components, ***stateless*** components and ***stateful*** components.
### Stateful
#### Class Type Components
```jsx
class Cat extends React.Component {
constructor(props) {
super(props);
this.state = {
humor: 'happy'
}
}
render() {
return(
<div>
<h1>{this.props.name}</h1>
<p>
{this.props.color}
</p>
</div>
);
}
}
```
### Stateless Components
#### Functional Components (Arrow Function from ES6)
```jsx
const Cat = props => {
return (
<div>
<h1>{props.name}</h1>
<p>{props.color}</p>
</div>;
);
};
```
#### Implicit Return Components
```jsx
const Cat = props =>
<div>
<h1>{props.name}</h1>
<p>{props.color}</p>
</div>;
```
### More Information: ### More Information:
<a href='https://reactjs.org/docs/components-and-props.html' target='_blank' rel='nofollow'>Components and Props</a> [https://reactjs.org/docs/components-and-props.html](Components and Props)
<br />