React Elemental Course
Add, Edit, Remove comments list
Before click edit button in first comment.
After click edit button in first comment
Comment edited and clicked on save button
Before click remove button in second comment
After click remove button in second comment
Deleted all comments before click on Add New Comment Button
Clicked five times to add five new comments
- Initial Start, Install and Config, prepare simple html
- Simple Demo
- Components
- Rendering Multiple Components
- Props
- Event Handling
- this.props.children
- State
- Adding State to Components
- Refs
- Multiple Child Components
- Updating State and Removing Components
- Passing Functions as Props
- Creating New Components
Continue from
https://www.youtube.com/watch?v=szmS_M-BMls&list=PL6gx4Cwl9DGBuKtLgPR_zWYnrwv-JllpA&index=13&ab_channel=thenewboston
1. Initial Start, Install and Config, prepare simple html
Install nodejs, react, visual code studio
Create React App
install node.js
install visual studio code
google create react app, find github.com/facebook/create-react-app where the instrucctions are.
for short
>npx create-react-app react-frontend
>cd react-tutorials
>npm start
Our project is in react-tutorials directory
then it runs on https://localhost:3000/
to sligly modify it, on App.js file modify adding something like
<h1> My react App is working!</h1>
just to test it.
Now, The React App is working, but we will delete some files to make it simpler for the course, to start with a simple index.html to understand. basically delete logo, icons, reportWebVitals, and simplify App.js and index.js files.
2. Simple Demo
blabla
3. Components
blabla
4. Rendering Multiple Components
blabla
5. Props
The set value of the props is for the rest of the life cicle of the component.
blabla
6. Event Handling
blabla
7. this.props.children
blabla
8. State
When we need to change the value of a prop of the component, we may use the state, this allows change the value refering as state of the component.
9. Adding State To Components
Identify two states of the form, one as normal and other when editing. so we need to add state to this componen and manage accord each state, so when the edit button is clicked the editing state is active, redrawing a edit form with a save button, and when the save button is clicked then the state editing is off. showing the normal form.
In the edit form (renderForm) we manage the input type="text" to load the previous value using defaulvalue="this.props.children", and autoFocus with the text selected by calling this.handleFocus.
handleFocus = (event) => event.target.select();
...
<input type="text" className="alert alert-light col" autoFocus
onFocus={this.handleFocus} defaultValue={this.props.children}></input>
col in className in the bootstrap class to fix correctly the input along the container.
10. Refs
To take the value from the component, we can not use id, we need to use ref from the component, in this case we name the ref as newText.
11. Multiple Child Components
Lets create another component Board which has in his state an array of comments, this array cound be changed in their elements of comments. to display. we use the map function of the array which process for each element of the array the process in the anonymous function.
12. Updating State and Removing Components
In the Board component refactor the map extracting the function and adding index={i} to allow us take the index, and create two functions removeComment and updateComments which alter the state comments in order to remove or update the respective comment.
13. Passing Functions as Props
From the Comment component we need to call the methods removeComment and updateComment of Board Component, so we need to declare a prop in Board Component with his functions removeComment and updateComments in order that Comment component just has to access to it by this.props.nameFunction. So this way the child has access to the parent methods simply accessing it by the props that are mapped to these methods.
14. Creating New Components
bla bla
Finished code in only one file, need to be refactorized separating the components and script on diferent files.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React App</title>
<!-- Cargar React. -->
<!-- Nota: cuando se despliegue, reemplazar "development.js" con "production.min.js". -->
<script
src="https://unpkg.com/react@17/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
crossorigin
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- Latest compiled and minified CSS -->
</script>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
class Comment extends React.Component {
constructor(props){
super(props);
this.state = { editing: false}
console.log("constructor"+ this.state.editing);
}
handleFocus = (event) => event.target.select();
onKeyUp = (event) => {
var val = event.target.value;
if (event.charCode === 13) {
//this.setState({ inputValue: val});
this.props.updateCommentText(this.refs.newText.value, this.props.index);
this.setState( { editing: false});
console.log("onKeyUp :" + val);
}
};
edit = () => {
this.setState( { editing: true})
};
remove = () => {
console.log("remove comment");
this.props.removeFromBoard(this.props.index)
};
save = () => {
this.props.updateCommentText(this.refs.newText.value, this.props.index);
this.setState( { editing: false})
};
renderNormal() {
return (
<div className="container alert alert-primary">
<div className="alert alert-light">{this.props.children}</div>
<button onClick={this.edit} className="btn btn-primary">edit</button>
<button onClick={this.remove} className="btn btn-danger" style={{marginLeft: "10px"}}>remove</button>
</div>
);}
renderForm() {
return (
<div className="container alert alert-primary">
<div>
<input type="text" className="alert alert-light col" ref="newText"
autoFocus onFocus={this.handleFocus} defaultValue={this.props.children}
onKeyPress={this.onKeyUp}></input>
</div>
<button onClick={this.save} className="btn btn-success">save</button>
</div>
);
}
render() {
console.log("render editing: "+ this.state.editing);
if(this.state.editing)return this.renderForm();
else
return this.renderNormal();
};
}
class Board extends React.Component {
constructor(props){
super(props);
this.state = { comments : ["How to refer to this comment by component",
"you need to use this.props.children",
"refer this comment element by the component"],
};
this.removeComment = this.removeComment.bind(this);
this.updateComment = this.updateComment.bind(this);
this.addComment = this.addComment.bind(this);
}
removeComment(i){
console.log("removing comment: " + i);
var arr = this.state.comments;
arr.splice(i, 1);
this.setState({ comments: arr})
}
updateComment(newText, i) {
console.log("updating comment: " + i);
var arr = this.state.comments;
arr[i] = newText;
this.setState({ comments: arr})
}
addComment(text){
console.log("addComment: " + " " + text);
var arr = this.state.comments;
arr.push(text);
this.setState({ comments: arr});
}
render() {
return (
<div className="board">
<button className="btn btn-info btn-block create"
onClick={ this.addComment.bind(this, "New comment here!") }>Add New Comment</button><br/>
{
this.state.comments.map( (text, i) => {
return (<Comment key={i} index={i} updateCommentText={this.updateComment}
removeFromBoard={this.removeComment}>
{text}
</Comment>)
})
}
</div>
)
}
};
ReactDOM.render(
<Board />,
document.querySelector("#container")
);
</script>
</body>
</html>
eot
No hay comentarios:
Publicar un comentario