https://scrimba.com/learn/learnreact
1.the first react code
import React from "react"
import ReactDom from "react-dom"
function MyInfo(){
return (
hong ccc
This is a paragraph about me
- 1
- 2
- 3
)
}
ReactDom.render(2.need to learn
3.MyInfo.js
import React from "react"
function MyInfo() {
return (
Bob Ziroll
This is a paragraph about me...
- Thailand
- Japan
- Nordic Countries
)
}
export default MyInfoindex.js
import React from "react"
import ReactDOM from "react-dom"
import MyInfo from "./MyInfo"
ReactDOM.render(
4.
5.child components
footer.js(Header, MainConent the same as footer .js)
import React from "react"
function Footer() {
return (
)
}
export default Footer5.App.js
import React from "react"
function App(){
return(
placeholder text here
placeholder text here1
placeholder text here2
placeholder text here3
)
}
export default App
6.lesson 14(Styling React with CSS Classes)
header.js
import React from "react"
function Header() {
return (
This is the header
)
}
export default Header
style.css
7.lesson 16(JSX to JavaScript and Back)
index.js
import React from "react"
import ReactDOM from "react-dom"
function App() {
const date = new Date()
const hours = date.getHours()
let timeOfDay
if (hours < 12) {
timeOfDay = "morning"
} else if (hours >= 12 && hours < 17) {
timeOfDay = "afternoon"
} else {
timeOfDay = "night"
}
return (
Good {timeOfDay}!
)
}
ReactDOM.render(8.lesson 17
import React from "react"
import ReactDOM from "react-dom"
function App() {
const date = new Date(2018, 6, 31, 15)
const hours = date.getHours()
let timeOfDay
const styles = {
fontSize: 30
}
if (hours < 12) {
timeOfDay = "morning"
styles.color = "#04756F"
} else if (hours >= 12 && hours < 17) {
timeOfDay = "afternoon"
styles.color = "#8914A3"
} else {
timeOfDay = "night"
styles.color = "#D90000"
}
return (
Good {timeOfDay}!
)
}
ReactDOM.render(9.lesson 18
TodoItem.js
import React from "react"
function TodoItem() {
return (
Placeholder text here
)
}
export default TodoItemApp.js
import React from "react"
import TodoItem from "./TodoItem"
function App() {
return (
style.css
body {
background-color: whitesmoke;
}
.todo-list {
background-color: white;
margin: auto;
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid #efefef;
box-shadow:
/* The top layer shadow */
0 1px 1px rgba(0,0,0,0.15),
/* The second layer */
0 10px 0 -5px #eee,
/* The second layer shadow */
0 10px 1px -4px rgba(0,0,0,0.15),
/* The third layer */
0 20px 0 -10px #eee,
/* The third layer shadow */
0 20px 1px -9px rgba(0,0,0,0.15);
padding: 30px;
}
.todo-item {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 30px 20px 0;
width: 70%;
border-bottom: 1px solid #cecece;
font-family: Roboto, sans-serif;
font-weight: 100;
font-size: 15px;
color: #333333;
}
input[type=checkbox] {
margin-right: 10px;
font-size: 30px;
}
input[type=checkbox]:focus {
outline: 0;
}10.lesson 21
(1)ContactCard.js
import React from "react"
function ContactCard(props) {
return (
{props.name}
Phone: {props.phone}
Email: {props.email}
)
}
export default ContactCard(1)App.js
import React from "react"
import ContactCard from "./ContactCard"
function App() {
return (
(2)ContactCard.js
import React from "react"
function ContactCard(props) {
console.log(props)
return (
{props.contact.name}
Phone: {props.contact.phone}
Email: {props.contact.email}
)
}
export default ContactCard（2）App.js
import React from "react"
import ContactCard from "./ContactCard"
function App() {
return (
11.lesson 23
App.js
import React from "react"
import Joke from "./Joke"
import jokesData from "./jokesData"
function App() {
const jokeComponents = jokesData.map(joke => jokesData.js
const jokesData = [
{
id: 1,
punchLine: "It’s hard to explain puns to kleptomaniacs because they always take things literally."
},
{
id: 2,
question: "What's the best thing about Switzerland?",
punchLine: "I don't know, but the flag is a big plus!"
},
{
id: 3,
question: "Did you hear about the mathematician who's afraid of negative numbers?",
punchLine: "He'll stop at nothing to avoid them!"
},
{
id: 4,
question: "Hear about the new restaurant called Karma?",
punchLine: "There’s no menu: You get what you deserve."
},
{
id: 5,
question: "Did you hear about the actor who fell through the floorboards?",
punchLine: "He was just going through a stage."
},
{
id: 6,
question: "Did you hear about the claustrophobic astronaut?",
punchLine: "He just needed a little space."
}
]
export default jokesData12.lesson 24
Product.js
import React from "react"
function Product(props) {
return (
{props.product.name}
{props.product.price.toLocaleString("en-US", { style: "currency", currency: "USD" })} - {props.product.description}
)
}
export default ProductApp.js
import React from "react"
import Product from "./Product"
import productsData from "./vschoolProducts"
function App() {
const productComponents = productsData.map(item => )
return (
{productComponents}
)
}
export default App 13.lesson 25
TodoItem.js
import React from "react"
function TodoItem(props) {
return (
{props.item.text}
)
}
export default TodoItemApp.js
import React from "react"
import TodoItem from "./TodoItem"
import todosData from "./todosData"
function App() {
const todoItems = todosData.map(item => )
return (
{todoItems}
)
}
export default App 14.lesson 26
class App extends React.Component {
render() {
return (
hello world
)
}
}
class App extends React.Component {
yourMethodHere() {
}
render() {
return (
this id code
)
}
}
export default App15.lesson 27
/*
Challenge:
1. Convert all 3 components to be class-based
2. Fix the small bug
*/
import React, {Component} from "react"
import ReactDOM from "react-dom"
// #1
class App extends React.Component {
render() {
return (
Welcome, {this.props.username}!
)
}
}
// #3
class Greeting extends Component {
render() {
const date = new Date()
const hours = date.getHours()
let timeOfDay
if (hours < 12) {
timeOfDay = "morning"
} else if (hours >= 12 && hours < 17) {
timeOfDay = "afternoon"
} else {
timeOfDay = "night"
}
return (
Good {timeOfDay} to you, sir or madam!
)
}
}
ReactDOM.render(16.lesson 28
import React from "react"
// https://scrimba.com/p/p4Mrt9/cQnMDHD
class App extends React.Component {
constructor() {
super()
this.state = {
answer: "Yes"
}
}
render() {
return (
Is state important to know? {this.state.answer}
)
}
}
export default App17.lesson 29
React State Practice
import React,{Component} from "react"
// Challenge:
// Given an incomplete class-based component without a constructor,
// add a constructor and initialize state to fix the broken component.
class App extends Component{
constructor(){
super()
this.state={
name:"AAA",
age:"18"
}
}
render(){
return (
{this.state.name}
{this.state.age} years old
)
}
}
export default App
18.lesson 30
React State Practice 2
import React,{Component} from "react"
// Given a stateless functional component, add state to it
// state should have a property called `isLoggedIn` which is a boolean
// (true if logged in, false if not)
// Then, give your best shot at rendering the word "in" if the user is logged in
// or "out" if the user is logged out.
class App extends Component{
constructor(){
super()
this.state={
isLoggedIn:false
}
}
render(){
let display
if(this.state.isLoggedIn){
display = "in"
}else{
display="out"
}
return (
You are currently logged {display}
)
}
}
export default App
19.lesson 31
React Todo App: Phase 4
App.js
/*
In the previous iteration of this todo list app, we pulled in todos data from a JSON file and mapped over it to display the todo items.
Eventually we'll want to be able to modify the data, which will only happen if we've "loaded" the data in to the component's state
Challenge: Change the )
return (
{todoItems}
)
}
}
export default App 20.lesson 32
Handling Events in React
App.js
import React from "react"
function handleClick() {
console.log("I was clicked")
}
// https://reactjs.org/docs/events.html#supported-events
function App() {
return (
![]()
console.log("Hovered!")} src="https://www.fillmurray.com/200/100"/>
)
}
export default App
21.lesson 33
TodoItem.js
/**
* Challenge: Get rid of our warning about not having an onChange on our input. For now, the function that runs onChange can simply console.log something.
*/
import React from "react"
function TodoItem(props) {
return (
console.log("changed!")}
/>
{props.item.text}
)
}
export default TodoItem22.lesson 34
App.js
import React from "react"
class App extends React.Component {
constructor() {
super()
this.state = {
count: 0
}
this.handleClick = this.handleClick.bind(this)
}
handleClick() {
this.setState(prevState => {
return {
count: prevState.count + 1
}
})
}
render() {
return (
{this.state.count}
)
}
}
export default App
23.lesson 35（too difficult，need review）
App.js
/**
* Let's make it so our checkbox can actually mark our todo as complete or incomplete!
* This challenge is a little more involved than some of the past ones. Check the comments
* in the code for some help on accomplishing this one
*
* Challenge:
* 1. Create an event handler in the App component for when the checkbox is clicked (which is an `onChange` event)
* a. This method will be the trickest part. Check the comments in the stubbed-out method below for some pseudocode to help guide you through this part
* 2. Pass the method down to the TodoItem component
* 3. In the TodoItem component, make it so when the `onChange` event happens, it calls the `handleChange` method and passes the id of the todo into the function
*/
import React from "react"
import TodoItem from "./TodoItem"
import todosData from "./todosData"
class App extends React.Component {
constructor() {
super()
this.state = {
todos: todosData
}
this.handleChange = this.handleChange.bind(this)
}
handleChange(id) {
// Update state so that the item with the given id flips `completed` from false to true (or vise versa)
// Remember not to modify prevState directly, but instead to return a new version of state with the change you want included in that update. (Think how you might use the `.map` method to do this)
this.setState(preState => {
const updateTodos = preState.todos.map(todo =>{
if(todo.id===id){
return {
...todo,
completed: !todo.completed
}
}
return todo
})
return{
todos: updateTodos
}
})
}
render() {
const todoItems = this.state.todos.map(item => )
return (
{todoItems}
)
}
}
export default App TodoItem.js
import React from "react"
function TodoItem(props) {
return (
props.handleChange(props.item.id)}
/>
{props.item.text}
)
}
export default TodoItem24.lesson 37
// https://engineering.musefind.com/react-lifecycle-methods-how-and-when-to-use-them-2111a1b692b1
// https://reactjs.org/blog/2018/03/29/react-v-16-3.html#component-lifecycle-changes
componentDidMount() {
// GET the data I need to correctly display
}
componentWillReceiveProps(nextProps) {
if (nextProps.whatever !== this.props.whatever) {
// do something important here
}
}
shouldComponentUpdate(nextProps, nextState) {
// return true if want it to update
// return false if not
}
componentWillUnmount() {
// teardown or cleanup your code before your component disappears
// (E.g. remove event listeners)
}25.lesseon 39
// https://scrimba.com/g/greacthooks
App.js
// https://scrimba.com/g/greacthooks
// Uncaught Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
import React from "react"
import randomcolor from "randomcolor"
class App extends React.Component {
constructor() {
super()
this.state = {
count: 0,
color: ""
}
this.increment = this.increment.bind(this)
this.decrement = this.decrement.bind(this)
}
increment() {
this.setState(prevState => {
return {
count: prevState.count + 1
}
})
}
decrement() {
this.setState(prevState => {
return {
count: prevState.count - 1
}
})
}
componentDidUpdate(prevProps, prevState) {
if(prevState.count !== this.state.count) {
const newColor = randomcolor()
this.setState({color: newColor})
}
}
render() {
return (
{this.state.count}
)
}
}
export default App
26.lesson 40
conditional.js
import React from "react"
function Conditional(props) {
return (
{props.isLoading ? Loading...
: Some cool stuff about conditional rendering
}
)
}
export default ConditionalApp.js
import React, {Component} from "react"
import Conditional from "./Conditional"
class App extends Component {
constructor() {
super()
this.state = {
isLoading: true
}
}
componentDidMount() {
setTimeout(() => {
this.setState({
isLoading: false
})
}, 1500)
}
render() {
return (
)
}
}
export default App
27.lesson41
App.js(&&)
import React, {Component} from "react"
import Conditional from "./Conditional"
class App extends Component {
constructor() {
super()
this.state = {
unreadMessages: ["a", "b"]
}
}
// &&
// false && false
render() {
return (
{
this.state.unreadMessages.length > 0 &&
You have {this.state.unreadMessages.length} unread messages!
}
)
}
}
export default App
28.lesson 42
App.js
import React from "react"
/*
Challenge:
Given a stateless functional component:
1. Follow the steps necessary to add state to it,
// class-based component
// constructor method
2. Have state keep track of whether the user is logged in or not
// isLoggedIn: Boolean (true or false)
3. Add a button that logs the user in/out
// event listener (onClick)
a. extra challenge - make the button display "log in" if they're not logged in and "log out" if they are
// Conditional Rendering
4. Display text that says "Logged in" if the user is logged in, or "Logged out" if they're not.
// Conditional Rendering
*/
class App extends React.Component {
constructor() {
super()
this.state = {
isLoggedIn: false
}
this.handleClick = this.handleClick.bind(this)
}
handleClick() {
this.setState(prevState => {
return {
isLoggedIn: !prevState.isLoggedIn
}
})
}
render() {
let buttonText = this.state.isLoggedIn ? "LOG OUT" : "LOG IN"
let displayText = this.state.isLoggedIn ? "Logged in" : "Logged out"
return (
{displayText}
)
}
}
export default App
29.lseeon 43
todoItem.js
/**
* Challenge: Style the completed todo items differently from the incomplete items.
*/
import React from "react"
function TodoItem(props) {
const completedStyle = {
fontStyle: "italic",
color: "#cdcdcd",
textDecoration: "line-through"
}
return (
props.handleChange(props.item.id)}
/>
{props.item.text}
)
}
export default TodoItem30.lesson 45（fetching dada）
APP.js
import React, {Component} from "react"
// https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch
// https://swapi.co/
// https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261
class App extends Component {
constructor() {
super()
this.state = {
loading: false,
character: {}
}
}
componentDidMount() {
this.setState({loading: true})
fetch("https://swapi.co/api/people/1")
.then(response => response.json())
.then(data => {
this.setState({
loading: false,
character: data
})
})
}
render() {
const text = this.state.loading ? "loading..." : this.state.character.name
return (
{text}
)
}
}
export default App
31.lesson 46 (react frm part1)
App.js
import React, {Component} from "react"
class App extends Component {
constructor() {
super()
this.state = {
firstname:"",
lastname:""
}
this.handleChange=this.handleChange.bind(this)
}
handleChange(event){
const {name,value}=event.target
this.setState({
[name]:value,
})
}
render() {
return (
)
}
}
export default App
32.lesson 47(react form part 2)
App.js
import React, {Component} from "react"
class App extends Component {
constructor() {
super()
this.state = {
firstName: "",
lastName: "",
isFriendly:true,
gender:"",
favColor:"blue"
}
this.handleChange = this.handleChange.bind(this)
}
handleChange(event) {
const {name, value,type,checked} = event.target
type==="checkbox" ? this.setState({[name]:checked}):this.setState({
[name]: value
})
}
render() {
return (
)
}
}
export default App
33.lesson 48
App.js
import React, {Component} from "react"
/**
* Challenge: Wire up the partially-finished travel form so that it works!
* Remember to use the concept of controlled forms
* https://reactjs.org/docs/forms.html
*
* All information should be populating the text below the form in real-time
* as you're filling it out
*
* This exercise is adapted from the V School curriculum on vanilla JS forms:
* https://coursework.vschool.io/travel-form/
*
* All of our challenges and learning resources are open for the public
* to play around with and learn from at https://coursework.vschool.io
*/
class App extends Component {
constructor() {
super()
this.state = {
firstName: "",
lastName: "",
age: "",
gender:"",
destination:"",
isVegan:false,
isKosher:false,
isLactoseFree:false
}
this.handleChange=this.handleChange.bind(this)
}
handleChange(event){
const {name, value,type,checked} = event.target
type==="checkbox" ? this.setState({
[name]:checked
})
:
this.setState({
[name]: value
})
}
render() {
return (
Entered information:
Your name: {this.state.firstName}{this.state.lastName}
Your age: {this.state.age}
Your gender: {this.state.gender}
Your destination: {this.state.destination}
Your dietary restrictions:
Vegan:{this.state.isVegan ? "Yes":"No"}
Kosher:{this.state.isKosher ? "Yes":"No"}
LactoseFree:{this.state.isLactoseFree ? "Yes":"No"}
)
}
}
export default App
34.lesoon 49
App.js
// https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
import React, {Component} from "react"
import Form from "./FormContainer"
function App() {
return (
)
}
export default App
FormComponent.js
import React from "react"
function FormComponent(props) {
return (
Entered information:
Your name: {props.data.firstName} {props.data.lastName}
Your age: {props.data.age}
Your gender: {props.data.gender}
Your destination: {props.data.destination}
Your dietary restrictions:
Vegan: {props.data.isVegan ? "Yes" : "No"}
Kosher: {props.data.isKosher ? "Yes" : "No"}
Lactose Free: {props.data.isLactoseFree ? "Yes" : "No"}
)
}
export default FormComponentFormContainer.js
import React, {Component} from "react"
import FormComponent from "./FormComponent"
class Form extends Component {
constructor() {
super()
this.state = {
firstName: "",
lastName: "",
age: "",
gender: "",
destination: "",
isVegan: false,
isKosher: false,
isLactoseFree: false
}
this.handleChange = this.handleChange.bind(this)
}
handleChange(event) {
const {name, value, type, checked} = event.target
type === "checkbox" ?
this.setState({
[name]: checked
})
:
this.setState({
[name]: value
})
}
render() {
return(