You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
In this sample we will introduce a basic React concept, handling State.
4
4
5
-
In this scenario we will provide a default username but let the user update
6
-
it.
5
+
In this scenario we will provide a default username but let the user update it.
7
6
8
-
We will take as a starting point sample _02 Properties_:
7
+
We will take as a starting point sample _[02 Properties](../02%20Properties/)_:
9
8
10
9
## Summary steps:
11
10
12
-
- Create an _App_ component that will hold the state, this state will contain the current
13
-
username (by default assigned to "defaultUserName" value).
14
-
This _App_ component will render the _Hello_ component. At first we will create a simple stateless
15
-
_App_ component.
16
-
- Update _main.jsx_ file to include our _App_ component.
17
-
- Change _App_ component to a statful class component to hold the _userName_ state.
18
-
- Create a _NameEdit_ component to let the user change the username. This will change the _App_ state
19
-
using a function from _App_.
11
+
- Create an _`App`_ component that will hold the state, this state will contain the current username (by default assigned to "defaultUserName" value).
12
+
This _App_ component will render the _`Hello`_ component. At first we will create a simple stateless _`App`_ component.
13
+
- Update _[main.jsx](./src/main.jsx)_ file to include our _`App`_ component.
14
+
- Change _`App`_ component to a statful class component to hold the _`userName`_ state.
15
+
- Create a _`NameEdit`_ component to let the user change the username. This will change the _`App`_ state using a function from _`App`_.
20
16
- Check everything is working properly.
21
17
22
18
## Prerequisites
@@ -27,68 +23,73 @@ Install [Node.js and npm](https://nodejs.org) if they are not already installed
27
23
28
24
## Steps to build it
29
25
30
-
- Copy the content from _02 Properties_ and execute:
26
+
- Copy the content from _[02 Properties](../02%20Properties/)_ and execute:
31
27
32
-
```
33
-
npm install
34
-
```
35
-
36
-
- Let's create an _App_ component under a new file named _app.jsx_ (this component will display the _Hello_ component).
28
+
```bash
29
+
npm install
30
+
```
37
31
38
-
```jsx
39
-
exportconstHelloComponent=props=> (
40
-
<h2>Hello user: {props.userName}!</h2>
41
-
);
42
-
43
-
HelloComponent.propTypes= {
44
-
userName:React.PropTypes.string.isRequired,
45
-
};
46
-
47
-
```
32
+
- Let's create an _`App`_ component under a new file named _[app.jsx](./src/app.jsx)_ (this component will display the _`Hello`_ component).
48
33
49
-
- Let's update _main.jsx_ just to use the _App_ component that we have recently created.
34
+
_[app.jsx](./src/app.jsx)_
35
+
```jsx
36
+
importReactfrom'react';
37
+
import { HelloComponent } from'./hello';
50
38
51
-
```jsx
52
-
/* global document */
39
+
exportclassAppextendsReact.Component {
40
+
render() {
41
+
return (
42
+
<div>
43
+
<HelloComponent userName="John"/>
44
+
</div>
45
+
);
46
+
}
47
+
}
48
+
```
53
49
54
-
importReactfrom'react';
55
-
import { render } from'react-dom';
56
-
import { App } from'./app';
50
+
- Let's update _[main.jsx](./src/main.jsx)_ just to use the _App_ component that we have recently created.
57
51
58
-
render(
59
-
<App />
60
-
, document.getElementById('root')
61
-
);
52
+
_[main.jsx](./src/main.jsx)_
53
+
```diff
54
+
import React from 'react';
55
+
import {render} from 'react-dom';
56
+
-- import {HelloComponent} from './hello.jsx';
57
+
++ import { App } from './app';
62
58
63
-
```
59
+
render(
60
+
-- <HelloComponent userName="John" />,
61
+
++ <App />,
62
+
document.getElementById('root')
63
+
);
64
+
```
64
65
65
66
- Now we can check that things are still working as expected (nothing broken so far).
66
67
67
-
```
68
-
npm start
69
-
```
68
+
```bash
69
+
npm start
70
+
```
70
71
71
-
- It's time to revisit _app.jsx_, since we want to store the name of the user and let the
72
-
user updated it, let's move this component to a class stateful component and define
73
-
a state, including _userName_ and pass this value to the _Hello_ component.
72
+
- It's time to revisit _[app.jsx](./src/app.jsx)_, since we want to store the name of the user and let the user updated it, let's move this component to a class stateful component and define a state, including _`userName`_ and pass this value to the _`Hello`_ component.
// If the state gets more complex we should use object.assign
145
-
this.setState({
146
-
userName:event.target.value,
147
-
});
148
-
}
102
+
```bash
103
+
npm start
104
+
```
105
+
106
+
- Now it's time to create an _`NameEdit`_ component, this component will let the user update his username and will notify with a callback to the parent control whenever the _`userName`_ gets updated.
0 commit comments