freecodecamp: React
step by step to practice
Create a Simple JSX Element
"const JSX = <h1>Hello JSX!</h1>;"
Create a Complex JSX Element
"const JSX=<div>
<h1></h1>
<p></p>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>;"
Add Comments in JSX
"const JSX = (
/* here in first time */
<div>
<h1>This is a block of JSX</h1>
<p>Here's a subtitle</p>
</div>
);"
Render HTML Elements to the DOM
"const JSX = (
<div id='challenge-node' >
<h1>Hello World</h1>
<p>Lets render this to the DOM</p>
</div>
);
// change code below this line
ReactDOM.render(JSX,document.getElementById('challenge-node'));"
Define an HTML Class in JSX
"const JSX = (
<div className="myDiv">
<h1>Add a class to this.myDiv div</h1>
</div>
);"
Learn About Self-Closing JSX Tags
"const JSX = (
<div>
<h2>Welcome to React!</h2> <br />
<p>Be sure to close all tags!</p>
<hr />
</div>
);
"
Create a Stateless Functional Component
"const MyComponent = function() {
// change code below this line
return (<div> adfsdfadfsadfsad </div>);
// change code above this line
}"
Create a React Component
" render() {
// change code below this line
return (
<div>
<h1>Hello React!</h1>
</div>
);
// change code above this line
}"
Create a Component with Composition
"const ChildComponent = () => {
return (
<div>
<p>I am the child</p>
</div>
);
};
class ParentComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h1>I am the parent</h1>
{ /* change code below this line */ }
<ChildComponent/>
{ /* change code above this line */ }
</div>
);
}
};"
Use React to Render Nested Components
"const TypesOfFruit = () => {
return (
<div>
<h2>Fruits:</h2>
<ul>
<li>Apples</li>
<li>Blueberries</li>
<li>Strawberries</li>
<li>Bananas</li>
</ul>
</div>
);
};
const Fruits = () => {
return (
<div>
{ /* change code below this line */ }
<TypesOfFruit/>
{ /* change code above this line */ }
</div>
);
};
class TypesOfFood extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h1>Types of Food:</h1>
{ /* change code below this line */ }
<Fruits/>
{ /* change code above this line */ }
</div>
);
}
};"
Compose React Components
"class Fruits extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h2>Fruits:</h2>
{ /* change code below this line */ }
<NonCitrus/>
<Citrus/>
{ /* change code above this line */ }
</div>
);
}
};
class TypesOfFood extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h1>Types of Food:</h1>
{ /* change code below this line */ }
<Fruits/>
{ /* change code above this line */ }
<Vegetables />
</div>
);
}
};"
Render a Class Component to the DOM
"class TypesOfFood extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div id='challenge-node'>
<h1>Types of Food:</h1>
{/* change code below this line */}
<Fruits/>
<Vegetables/>
{/* change code above this line */}
</div>
);
}
};
// change code below this line
ReactDOM.render(<TypesOfFood/>,document.getElementById('challenge-node'));"
Write a React Component from Scratch
"// change code below this line
class MyComponent extends React.Component{
constructor(pros){
super(pros);
}
render(){
return (
<div id='challenge-node'>
<h1>My First React Component!</h1>
</div>
);
}
};
ReactDOM.render(<MyComponent/>,document.getElementById('challenge-node'));"
Pass Props to a Stateless Functional Component
"const CurrentDate = (props) => {
return (
<div>
{ /* change code below this line */ }
<p>The current date is: {props.date=Date()}</p>
{ /* change code above this line */ }
</div>
);
};
class Calendar extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h3>What date is it?</h3>
{ /* change code below this line */ }
<CurrentDate date />
{ /* change code above this line */ }
</div>
);
}
};"
Pass an Array as Props
"const List= (props) => {
{ /* change code below this line */ }
return <p>{props.tasks.join(", ")}</p>
{ /* change code above this line */ }
};
class ToDo extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h1>To Do Lists</h1>
<h2>Today</h2>
{ /* change code below this line */ }
<List tasks={["walk dog","workout","call baby"]}/>
<h2>Tomorrow</h2>
<List tasks={["walk dog","workout","call baby"]}/>
{ /* change code above this line */ }
</div>
);
}
};"
Use Default Props
"ShoppingCart.defaultProps={items:0}"
Override Default Props
"return <Items quantity={10} />"
Use PropTypes to Define the Props You Expect
"Items.propTypes = {quantity: PropTypes.number.isRequired}"
Access Props Using this.props
"<p>Your temporary password is: <strong>{this.props.tempPassword}</strong></p>
<ReturnTempPassword tempPassword={'@#SJSKJKS'}/>"
Review Using Props with Stateless Functional Components
"// change code below this line
const Camper=(props)=>{
return <p>{props.name}</p>
}
Camper.defaultProps={name:'CamperBot'};
Camper.propTypes={name:PropTypes.string.isRequired};"
Create a Stateful Component
" // initialize state here
this.state={
name:""
}"
Render State in the User Interface
"<h1>{this.state.name}</h1>"
Render State in the User Interface Another Way
" // change code below this line
const name= this.state.name;
// change code above this line
return (
<div>
{ /* change code below this line */ }
<h1>{name}</h1>
{ /* change code above this line */ }
</div>
);"
Set State with this.setState
"class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'Initial State'
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
// change code below this line
this.setState({name:'React Rocks!'});
// change code above this line
}
render() {
return (
<div>
<button onClick={this.handleClick}>Click Me</button>
<h1>{this.state.name}</h1>
</div>
);
}
};"
Bind 'this' to a Class Method
""
"class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
visibility: false
};
// change code below this line
this.toggleVisibility=this.toggleVisibility.bind(this);
// change code above this line
}
// change code below this line
toggleVisibility(){
const visibility=this.state.visibility;
if(visibility)
this.setState({visibility: false});
else
this.setState({visibility: true});
}
// change code above this line
render() {
if (this.state.visibility) {
return (
<div>
<button onClick={this.toggleVisibility}>Click Me</button>
<h1>Now you see me!</h1>
</div>
);
} else {
return (
<div>
<button onClick={this.toggleVisibility}>Click Me</button>
</div>
);
}
}
};"
Write a Simple Counter
" // change code below this line
this.increment=this.increment.bind(this);
this.decrement=this.decrement.bind(this);
this.reset=this.reset.bind(this);
// change code above this line
}
// change code below this line
increment(){
const count=this.state.count;
this.setState({count: count+1});
}
decrement(){
const count=this.state.count;
this.setState({count: count-1});
}
reset(){
const count=this.state.count;
this.setState({count:0});
}
// change code above this line"
Create a Controlled Input
"class ControlledInput extends React.Component {
constructor(props) {
super(props);
this.state = {
input: ''
};
// change code below this line
this.handleChange= this.handleChange.bind(this);
// change code above this line
}
// change code below this line
handleChange(event){
this.setState({input: event.target.value});
}
// change code above this line
render() {
return (
<div>
{ /* change code below this line */}
<input value={this.state.input} onChange={this.handleChange}/>
{ /* change code above this line */}
<h4>Controlled Input:</h4>
<p>{this.state.input}</p>
</div>
);
}
};"
Create a Controlled Form
"class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = {
input: '',
submit: ''
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({
input: event.target.value
});
}
handleSubmit(event) {
// change code below this line
this.setState({submit:this.state.input});
// change code above this line
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
{ /* change code below this line */ }
<input value={this.state.input} onChange={this.handleChange} />
{ /* change code above this line */ }
<button type='submit' >Submit!</button>
</form>
{ /* change code below this line */ }
<h1>{this.state.submit}</h1>
{ /* change code above this line */ }
</div>
);
}
};"
Pass State as Props to Child Components
"class MyApp extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'CamperBot'
}
}
render() {
return (
<div>
<Navbar name={this.state.name}/>
</div>
);
}
};
class Navbar extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h1>Hello, my name is: {this.props.name} </h1>
</div>
);
}
};"
Pass a Callback as Props
"class MyApp extends React.Component {
constructor(props) {
super(props);
this.state = {
inputValue: ''
}
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({
inputValue: event.target.value
});
}
render() {
return (
<div>
{ /* change code below this line */ }
<GetInput input={this.state.inputValue} handleChange={this.handleChange} />
<RenderInput input = {this.state.inputValue}/>
{ /* change code above this line */ }
</div>
);
}
};
class GetInput extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h3>Get Input:</h3>
<input
value={this.props.input}
onChange={this.props.handleChange}/>
</div>
);
}
};
class RenderInput extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h3>Input Render:</h3>
<p>{this.props.input}</p>
</div>
);
}
};"
Use the Lifecycle Method componentWillMount
" // change code below this line
console.log('1');
// change code above this line"
Use the Lifecycle Method componentDidMount
"class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
activeUsers: null
};
}
componentDidMount() {
setTimeout( () => {
this.setState({
activeUsers: 1273
});
}, 2500);
}
render() {
return (
<div>
<h1>Active Users: {this.state.activeUsers}</h1>
</div>
);
}
};"
Add Event Listeners
"class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
message: ''
};
this.handleEnter = this.handleEnter.bind(this);
this.handleKeyPress = this.handleKeyPress.bind(this);
}
// change code below this line
componentDidMount() {
document.addEventListener('keydown',this.handleKeyPress);
}
componentWillUnmount() {
document.removeEventListener('keydown',this.handleKeyPress);
}
// change code above this line
handleEnter() {
this.setState({
message: this.state.message + 'You pressed the enter key! '
});
}
handleKeyPress(event) {
if (event.keyCode === 13) {
this.handleEnter();
}
}
render() {
return (
<div>
<h1>{this.state.message}</h1>
</div>
);
}
};"
Manage Updates with Lifecycle Methods
"class Dialog extends React.Component {
constructor(props) {
super(props);
}
componentWillUpdate() {
console.log('Component is about to update...');
}
// change code below this line
componentWillReceiveProps(nextProps){
console.log(this.props);
console.log(nextProps);
}
componentDidUpdate(){
console.log('Component is about to update...');
}
// change code above this line
render() {
return <h1>{this.props.message}</h1>
}
};
class Controller extends React.Component {
constructor(props) {
super(props);
this.state = {
message: 'First Message'
};
this.changeMessage = this.changeMessage.bind(this);
}
changeMessage() {
this.setState({
message: 'Second Message'
});
}
render() {
return (
<div>
<button onClick={this.changeMessage}>Update</button>
<Dialog message={this.state.message}/>
</div>
);
}
};"
Optimize Re-Renders with shouldComponentUpdate
"class OnlyEvens extends React.Component {
constructor(props) {
super(props);
}
shouldComponentUpdate(nextProps, nextState) {
console.log('Should I update?');
// change code below this line
return (nextProps.value % 2===0) ?true:false;
// change code above this line
}
componentWillReceiveProps(nextProps) {
console.log('Receiving new props...');
}
componentDidUpdate() {
console.log('Component re-rendered.');
}
render() {
return <h1>{this.props.value}</h1>
}
};
class Controller extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 0
};
this.addValue = this.addValue.bind(this);
}
addValue() {
this.setState({
value: this.state.value + 1
});
}
render() {
return (
<div>
<button onClick={this.addValue}>Add</button>
<OnlyEvens value={this.state.value}/>
</div>
);
}
};"
Introducing Inline Styles
"
class Colorful extends React.Component {
render() {
return (
<div style={{color: 'red',fontSize: '72px' }}>Big Red</div>
);
}
};"
Add Inline Styles in React
"
const styles ={color: "purple", fontSize: 40,border: '2px solid purple'};
// change code above this line
class Colorful extends React.Component {
render() {
// change code below this line
return (
<div style={styles}>Style Me!</div>
);
// change code above this line
}
};"
Use Advanced JavaScript in React Render Method
"const inputStyle = {
width: 235,
margin: 5
}
class MagicEightBall extends React.Component {
constructor(props) {
super(props);
this.state = {
userInput: '',
randomIndex: ''
}
this.ask = this.ask.bind(this);
this.handleChange = this.handleChange.bind(this);
}
ask() {
if (this.state.userInput) {
this.setState({
randomIndex: Math.floor(Math.random() * 20),
userInput: ''
});
}
}
handleChange(event) {
this.setState({
userInput: event.target.value
});
}
render() {
const possibleAnswers = [
'It is certain',
'It is decidedly so',
'Without a doubt',
'Yes, definitely',
'You may rely on it',
'As I see it, yes',
'Outlook good',
'Yes',
'Signs point to yes',
'Reply hazy try again',
'Ask again later',
'Better not tell you now',
'Cannot predict now',
'Concentrate and ask again',
'Don\'t count on it',
'My reply is no',
'My sources say no',
'Most likely',
'Outlook not so good',
'Very doubtful'
];
const answer =this.state.randomIndex // << change code here
return (
<div>
<input
type="text"
value={this.state.userInput}
onChange={this.handleChange}
style={inputStyle} /><br />
<button onClick={this.ask}>
Ask the Magic Eight Ball!
</button><br />
<h3>Answer:</h3>
<p>
{ /* change code below this line */ }
{possibleAnswers[answer]}
{ /* change code above this line */ }
</p>
</div>
);
}
};"
Render with an If/Else Condition
"class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
display: true
}
this.toggleDisplay = this.toggleDisplay.bind(this);
}
toggleDisplay() {
this.setState({
display: !this.state.display
});
}
render() {
// change code below this line
if(this.state.display)
return (
<div>
<button onClick={this.toggleDisplay}>Toggle Display</button>
<h1>Displayed!</h1>
</div>
);
else
return (
<div>
<button onClick={this.toggleDisplay}>Toggle Display</button>
</div>
);
}
};"
Use && for a More Concise Conditional
"class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
display: true
}
this.toggleDisplay = this.toggleDisplay.bind(this);
}
toggleDisplay() {
this.setState({
display: !this.state.display
});
}
render() {
// change code below this line
return (
<div>
<button onClick={this.toggleDisplay}>Toggle Display</button>
{this.state.display && <h1>Displayed!</h1>}
</div>
);
}
};"
Use a Ternary Expression for Conditional Rendering
"
const inputStyle = {
width: 235,
margin: 5
}
class CheckUserAge extends React.Component {
constructor(props) {
super(props);
// change code below this line
this.state={
input:'',
userAge: ''
};
// change code above this line
this.submit = this.submit.bind(this);
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
this.setState({
input: e.target.value,
userAge: ''
});
}
submit() {
this.setState({
userAge: this.state.input
});
}
render() {
const buttonOne = <button onClick={this.submit}>Submit</button>;
const buttonTwo = <button>You May Enter</button>;
const buttonThree = <button>You Shall Not Pass</button>;
return (
<div>
<h3>Enter Your Age to Continue</h3>
<input
style={inputStyle}
type="number"
value={this.state.input}
onChange={this.handleChange} /><br />
{
(this.state.userAge>0) ? (this.state.userAge<18 ? buttonThree: buttonTwo) :buttonOne
}
</div>
);
}
};"
Render Conditionally from Props
"class Results extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<h1>
{
/* change code here */
this.props.fiftyFifty ? 'You win!' : 'You lose!'
}
</h1>
)
};
};
class GameOfChance extends React.Component {
constructor(props) {
super(props);
this.state = {
counter: 1
}
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({
counter: this.state.counter +1 // change code here
});
}
render() {
let expression = Math.random() > .5; // change code here
return (
<div>
<button onClick={this.handleClick}>Play Again</button>
{ /* change code below this line */ }
<Results fiftyFifty={expression}/>
{ /* change code above this line */ }
<p>{'Turn: ' + this.state.counter}</p>
</div>
);
}
};"
Change Inline CSS Conditionally Based on Component State
"// change code below this line
if (this.state.input.length > 15) {inputStyle={border: '3px solid red'}};
// change code above this line"
Use Array.map() to Dynamically Render Elements
"const textAreaStyles = {
width: 235,
margin: 5
};
class MyToDoList extends React.Component {
constructor(props) {
super(props);
// change code below this line
this.state={
userInput: '',
toDoList: []
}
// change code above this line
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
}
handleSubmit() {
const itemsArray = this.state.userInput.split(',');
this.setState({
toDoList: itemsArray
});
}
handleChange(e) {
this.setState({
userInput: e.target.value
});
}
render() {
const items = this.state.toDoList.map(function(item){return (<li>{item}</li>);}); // change code here
return (
<div>
<textarea
onChange={this.handleChange}
value={this.state.userInput}
style={textAreaStyles}
placeholder="Separate Items With Commas" /><br />
<button onClick={this.handleSubmit}>Create List</button>
<h1>My "To Do" List:</h1>
<ul>
{items}
</ul>
</div>
);
}
};"
Give Sibling Elements a Unique Key Attribute
"const frontEndFrameworks = [
'React',
'Angular',
'Ember',
'Knockout',
'Backbone',
'Vue'
];
function Frameworks() {
const renderFrameworks = frontEndFrameworks.map(function(item){return (<li key={item}>{item}</li>);}); // change code here
return (
<div>
<h1>Popular Front End JavaScript Frameworks</h1>
<ul>
{renderFrameworks}
</ul>
</div>
);
};"
Use Array.filter() to Dynamically Filter an Array
"error"
"class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return <div/>
}
};
Render React on the Server with renderToString
// change code below this line
ReactDOMServer.renderToString(<App />);"
Nhận xét
Đăng nhận xét