본문 바로가기

리액트7

리액트(React) 패키지 설치와 스타일 package.json { "name": "flix", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "prop-types": "^15.7.2", "react": "^17.0.1", "react-dom": "^17.0.1", "react-router-dom": "^5.2.0", "react-scripts": "4.0.1", "styled-components": "^5.2.1", "styled-reset": "^4.3.1", "web-vital.. 2020. 11. 25.
리액트(React) Arrow Function, Template Literals, Object Destructuring, Spread Operator 3항연산자, Classes, Array map, Array filter, forEach includes push 알아보기 Arrow Function function sayHello(name) { return "Hello " + name } const won = sayHello("won"); console.log(Hello); // a const sayHello = (name = "Human") => "Hello " + name; const won = sayHello(); console.log(won); // b const Button = document.querySelector("button"); button.addEventListener("click", event => console.log(event)) Click me Template Literals const sayHello = (name = "Human") => `H.. 2020. 11. 23.
리액트 네이티브 React Native 날씨 앱 만들기 2 (Make React Native Weather App 2) App.js import React from 'react'; import { Alert } from 'react-native'; import Loading from './Loading'; import * as Location from "expo-location"; import axios from "axios"; import Weather from './Weather'; const API_KEY = "2b3a5aa1eda4f5eae36e185775d93e06"; export default class extends React.Component { state = { isLoading: true }; getWeather = async(latitude, longitude) => { const { data: { m.. 2020. 11. 18.
리액트 React 무비앱 만들기 dowonkim97.github.io/movie_app_2020/ React App dowonkim97.github.io package.json { "name": "movie_app_2020", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "axios": "^0.21.0", "gh-pages": "^3.1.0", "prop-types": "^15.7.2", "react": "^17.0.1", "react-dom": "^17.0.1", "re.. 2020. 11. 10.
리액트 React 삼항연산자, setTimeout, state 값 변경 알아보기 App.js import React from "react"; import PropTypes from "prop-types"; // render() -> mount -> componentDidMount() -> 6s class App extends React.Component { state = { isLoading: true, movies: [] }; componentDidMount() { setTimeout(() => { this.setState({isLoading : false}); }, 6000); } render() { const { isLoading } = this.state; return {this.state.isLoading ? "Loading...": "We are ready"}; } } e.. 2020. 11. 9.
리액트 React Components, State, Component Life Cycle 알아보기 App.js import React from "react"; import PropTypes from "prop-types"; // every time set.state -> render -> this.state.1,2,3,0,-1 -> re-render (this.state.count = 1 -> not work) class App extends React.Component { constructor(props) { super(props) console.log("hello"); } state = { count: 0 }; add= () => { this.setState(current => ({ count: current.count + 1 })); }; minus= () => { this.setState(cu.. 2020. 11. 9.
리액트 React JSX & PROPS, PropTypes, map 알아보기 src / index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( , document.getElementById('root') ); src / App.js import React from "react"; import PropTypes from "prop-types"; const foodILike = [ { id:1, name: "Kimchi", image: "https://www.maangchi.com/wp-content/uploads/2019/11/vegetarian-kimchi.jpg", }, { id:2, name: "Samgyoepsal", image: .. 2020. 11. 9.

티스토리툴바