Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@xsiasu

react 시작했다.

2019년인가 react 공부를 하고
그동안 손을 놓고 있었다. 좀 어렵기도 하고 차라리 viewjs 를 공부를 하는것이 낳을것인가? 고민도 되고 했지만
올해 1월부터 react 프로젝트를 시작하게 되었다.
아직 나에게는 좀 어렵지만 이 기회에 공부를 해놓아야 겠다싶어서 내가 공부한것 앞으로 공부한것을 글로 남기고자 한다.

순전히 개인의 공부를 위한것이며 코드들은 copy and paste 가 아닌 직접 코딩하는것이므로 오타가 있을수 있다.

react

Hello.js
import React from 'react';
function Hello({color,name,isSpecial}){
  return (
    <div style={{color}}>
      {isSpecial && <b>*</b> }
      hello{name}
    </div>
  )
}

export default Hello
App.js
import React from 'react'
import Hello from 'Hello';

function App(){
  return(
    <Hello name="react" color="red" isSpecial />
  )
}

export default App;

간단한 카운터 만들어보기

Counter.js
import React,{useState} from 'react'

function Counter(){
  const [state, setState] = useState(0);
  const Increase = () => {
    setState(state + 1)
  }
  const Decrease = () => {
    setState(state - 1)
  }
  return(
    <div>
      <h1>{state}</h1>
      <button onClick={Decrease}>-1</button>
      <button onClick={Increase}>+1</button>
    </div>
  )
}

export default Counter;
App.js

import React from 'react;
import Counter from 'Counter'

function App(){
  return(
    <Counter />
  )
}

export default App;
0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?