diff --git a/guide/english/react/components/index.md b/guide/english/react/components/index.md
index 6c973b4ee0..e0744af9a3 100644
--- a/guide/english/react/components/index.md
+++ b/guide/english/react/components/index.md
@@ -7,24 +7,35 @@ Components are the building blocks of React. They help you divide the functional
```jsx
+// 1. Define our Welcome component
function Welcome(props) {
return
Hello, {props.name}
;
}
+// 2. Create our "app"
const element = ;
+
+// 3. Render the app in the browser window
ReactDOM.render(
element,
document.getElementById('root')
);
```
+First, we define our Component (this is a functional, stateless component). It takes a single argument, `props`, and from this object, only the value `name` is ever used. We could replace this with a `firstName` and `lastName` if we wanted. But we don't right now.
-The value ```name="Faisal Arkan"``` will be assigned to ```{props.name}``` from ```function Welcome(props)``` and returns a component ```Hello, Faisal Arkan
``` 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.
+Second, the Welcome component is called with the value ```name="Faisal Arkan"```. This will be assigned to ```{props.name}``` in our component. The Welcome component called with this name returns the element ```Hello, Faisal Arkan
```. We save this into the const variable ```element```.
+
+The value `name="Faisal Arkan"` will be assigned to `{props.name}` from `function Welcome(props)` and returns a component `Hello, Faisal Arkan
` 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.
+Briefly, stateful components are clever. They can hold their own information (in the `state` object) *and* inherit `props` (as seen above) from parents. Stateless components can *only* inherit `props`, so if they need to update they have to be told by their parent.
+
+See the below examples of af Cat component. The stateful Cat component is aware of its feeling, the stateless one is not.
+
### Stateful
#### Class Type Components
@@ -42,9 +53,12 @@ class Cat extends React.Component {
render() {
return(
-
{this.props.name}
+
Hi, my name is {this.props.name}
- {this.props.color}
+ I'm a {this.props.color} cat
+
+
+ I am a {this.state.humor} cat.
);
@@ -62,8 +76,9 @@ class Cat extends React.Component {
const Cat = props => {
return (
-
{props.name}
-
{props.color}
+
Hi, my name is {props.name}
+
I am a {props.color} cat
+
Sadly, I can't tell you how I feel, because I have no state.
;
);
};
@@ -72,12 +87,15 @@ const Cat = props => {
#### Implicit Return Components
+If all your component does is render something (i.e. no computing), you can omit the 'return'.
+
```jsx
const Cat = props =>
{props.name}
{props.color}
+
Sadly, I can't tell you how I feel, because I have no state.
;
```
@@ -105,5 +123,4 @@ class Cat extends React.PureComponent {
This component will only render if there is a change in its props; not when the parent re-renders.
### More Information:
-
-[https://reactjs.org/docs/components-and-props.html](Components and Props)
+- [Components and Props](https://reactjs.org/docs/components-and-props.html)