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)