React | Props & State
Introduction
You just learned the basics of React, how important are props and state in a React App, and how useful are for manage data in our application
In this exercsie wi will use Create React App and we will handle a Counter and a simple Form
Requirements
- Fork this repo
- Clone this repo
Submission
-
Upon completion, run the following commands:
git add . git commit -m "your doubts" git push origin master
-
Create Pull Request so your TAs can check up your work.
Instructions
We will using the Create React App CLI, but don't worry about it, we already started the project
DON'T FORGET, BY DEFAULT CRA INITIALIZE GIT IN THE PROJECT
Install the dependencies
$ npm install
or
$ yarn install
Structure of our app
- Create the
components
folder inside thesrc
folder.
- Inside the components folder create two new components,
Counter.js
andForm.js
lab-props-and-state
β node_modules
β public
ββββ src
ββββ components
β ββββ Counter.js
β ββββ Form.js
ββββ App.css
ββββ App.js
ββββ App.test.js
ββββ index.css
ββββ index.js
ββββ logo.svg
ββββ serviceWorker.js
Iteration 1 - Presentational components
Let's start with the basics: Let's put some pretty and dumb HTML in our presentational components.
Counter.js
-
This component should be a function component.
-
Should return only HTML:
-
Return an
<h2>
, the value of the count must be in this field. -
Return an increment
<button>
, this button should increment the count in 1. -
Return a decrement
<button>
, this button should decrement the count in 1.
-
-
Because our component is dumb and it's only for presentation purpose, should recieve by props the logic for increment and decrement the count, and the count itself.
Form.js
-
This component should be a function component.
-
Should return only HTML:
-
Return 3
<input>
, don't forget to give them a name, respectively. -
Return 3
<p>
, each p should display the inputs value, respectively.
-
Iteration 2 - The logic
Remember, there should always be only one component that manages the state of our application and through props can communicate the information to the components that are designed for that.
So, let's do this. We will have all our logic in the App.js
.
- Our
App.js
should have an state, with the following values:
state = {
count: 0,
form: {
name: '',
surname: '',
age: ''
}
}
-
Should be a function that can manage the increment of or counter, called
increment
. -
Should have a function that can manage the decrement of our counter, called
decrement
. -
Should have a function that can manage the values of our inputs, called
handleChange
.
Remember which method we use to update our state
Iteration 3 - Magic!
In the App.js, you should return the <Counter/>
component and the <Form/>
component. Don't forget to pass the
necessary props to these components.
It should looks like this:
...
render() {
<div>
<Counter {/* Here should be magic! (props) */} />
<Form {/* Here should be magic! (props) */} />
</div>
}
...
Iteration 4 - Styles
Don't forget the CSS, add some styles to our application to make it look better.
Happy coding!
By: DiuriVJ