React
Vscode에서 React 설치 및 실행1
Antonio Bae
2023. 10. 19. 10:25
안녕하세요
1.react 설치 명령어
npx create-react-app .
사진 설명을 입력하세요.
2.스타트
npm start
사진 설명을 입력하세요.
사진 설명을 입력하세요.
다음과 같이 3000번 port로 로컬호스트가 생긴 것을 확인할 수가 있습니다.
사진 설명을 입력하세요.
만약 실행이 안된다면 Powershell이나 커맨트 창에서 실행을 해보시길 바랍니다.
사진 설명을 입력하세요.
3.수정
app.js의 이부분에서 수정을 하시면 됩니다.
여기서 html css 등을 수정할 수 있습니다.
다음 화면 처럼 app.js가 시작 페이지입니다.
사진 설명을 입력하세요.
hear부분 삭제하고 수정하시면 편집이 가능합니다.
사진 설명을 입력하세요.
css수정-
사진 설명을 입력하세요.
다음 화면과 같이 app.css에 있는 내용을 삭제하면 css가 없어집니다.
사진 설명을 입력하세요.
이렇게 app.js와 css에 내용들을 넣어주면 홈페이지가 변경됩니다.
body {
background-color: gray;
}
사진 설명을 입력하세요.
6.배포
nodejs로 만들어진 build에 명령을 주면 배포가 됩니다.
npx serve -s build
사진 설명을 입력하세요.
6.배포
npm run build
->build 폴더가 생김
->index.html에 코드 확인
7.사용자 정의 태그 -컴포넌트 화
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div>
<header>
<h1><a href="/">WEB</a></h1>
</header>
<nav>
<ol>
<li><a href="/read/1">html</a></li>
<li><a href="/read/1">css</a></li>
<li><a href="/read/1">js</a></li>
</ol>
</nav>
<article>
<h2>Welcome</h2>
Hello, Web
</article>
</div>
);
}
export default App;
컴포넌트화 시키면 이렇게 간단하게 코드를 만들 수 있습니다.
import logo from './logo.svg';
import './App.css';
function Header() {
return <header>
<h1><a href="/">Web</a></h1>
</header>
}
function Nav() {
return <nav>
<ol>
<li><a href="/read/1">html</a></li>
<li><a href="/read/1">css</a></li>
<li><a href="/read/1">js</a></li>
</ol>
</nav>
}
function Article() {
return <article>
<h2>Welcome</h2>
Hello, Web
</article>
}
function App() {
return (
<div>
<header></header>
<nav></nav>
<article></article>
</div>
);
}
export default App;
8.props 활용 예시
import logo from './logo.svg';
import './App.css';
function Header(props) {
console.log('props', props, props.title);
return <header>
<h1><a href="/">{props.title}</a></h1>
</header>
}
function Nav() {
const lis = [
<li><a href="/read/1">html</a></li>,
<li><a href="/read/2">css</a></li>,
<li><a href="/read/3">js</a></li>
]
return <nav>
<ol>
{lis}
</ol>
</nav>
}
function Article(props) {
return <article>
<h2>{props.title}</h2>
{props.body}
</article>
}
function App() {
const topics = [
{ id: 1, title: 'html', body: 'html is ...' },
{ id: 1, title: 'css', body: 'css is ...' },
{ id: 1, title: 'javascript', body: 'javascript is ...' }
]
return (
<div>
<Header title="WEB"></Header>
<Nav topics={topics}></Nav>
<Article title="Welcome" body="Hello, Web"></Article>
</div>
);
}
export default App;
배열로 변경
import logo from './logo.svg';
import './App.css';
function Header(props) {
console.log('props', props, props.title);
return <header>
<h1><a href="/">{props.title}</a></h1>
</header>
}
function Nav(props) {
const lis = [
// <li><a href="/read/1">html</a></li>,
// <li><a href="/read/2">css</a></li>,
// <li><a href="/read/3">js</a></li>
]
for (let i = 0; i < props.topics.length; i++) {
let t = props.topics[i];
lis.push(<li><a href={'/read/' + t.id}>{t.title}</a></li>)
}
return <nav>
<ol>
{lis}
</ol>
</nav>
}
function Article(props) {
return <article>
<h2>{props.title}</h2>
{props.body}
</article>
}
function App() {
const topics = [
{ id: 1, title: 'html', body: 'html is ...' },
{ id: 1, title: 'css', body: 'css is ...' },
{ id: 1, title: 'javascript', body: 'javascript is ...' }
]
return (
<div>
<Header title="WEB"></Header>
<Nav topics={topics}></Nav>
<Article title="Welcome" body="Hello, Web"></Article>
</div>
);
}
export default App;
import logo from './logo.svg';
import './App.css';
function Article(props) {
return <article>
<h2>{props.title}</h2>
{props.body}
</article>
}
function Header(props) {
return <header>
<h1><a href="/" onClick={(event) => {
event.preventDefault();//click해도 reload가 일어나지 않음
props.onChangeMode();
}}>{props.title}</a></h1>
</header>
}
function Nav(props) {
const lis = []
for (let i = 0; i < props.topics.length; i++) {
let t = props.topics[i];
lis.push(<li key={t.id}>
<a id={t.id} href={'/read/' + t.id} onClick={(event) => {
event.preventDefault();
props.onChangeMode(event.target.id);
}}>{t.title}</a>
</li>)
}
return <nav>
<ol>
{lis}
</ol>
</nav>
}
function App() {
const topics = [
{ id: 1, title: 'html', body: 'html is ...' },
{ id: 2, title: 'css', body: 'css is ...' },
{ id: 3, title: 'javascript', body: 'javascript is ...' }
]
return (
<div>
<Header title="WEB" onChangeMode={() => {
alert('Header');
}}></Header>
<Nav topics={topics} onChangeMode={(id) => {
alert(id);
}}></Nav>
<Article title="Welcome" body="Hello, Web"></Article>
</div>
);
}
export default App;
import logo from './logo.svg';
import './App.css';
function Article(props) {
return <article>
<h2>{props.title}</h2>
{props.body}
</article>
}
function Header(props) {
return <header>
<h1><a href="/" onClick={(event) => {
event.preventDefault();//click해도 reload가 일어나지 않음
props.onChangeMode();
}}>{props.title}</a></h1>
</header>
}
function Nav(props) {
const lis = []
for (let i = 0; i < props.topics.length; i++) {
let t = props.topics[i];
lis.push(<li key={t.id}>
<a id={t.id} href={'/read/' + t.id} onClick={(event) => {
event.preventDefault();
props.onChangeMode(event.target.id);
}}>{t.title}</a>
</li>)
}
return <nav>
<ol>
{lis}
</ol>
</nav>
}
function App() {
const mode = 'Read';
const topics = [
{ id: 1, title: 'html', body: 'html is ...' },
{ id: 2, title: 'css', body: 'css is ...' },
{ id: 3, title: 'javascript', body: 'javascript is ...' }
]
let content = null;
if (mode === 'Welcome') {
content = <Article title="Welcome" body="Hello, Web"></Article>
} else if (mode === 'Read') {
content = <Article title="Read" body="Hello, Read"></Article>
}
return (
<div>
<Header title="WEB" onChangeMode={() => {
alert('Header');
}}></Header>
<Nav topics={topics} onChangeMode={(id) => {
alert(id);
}}></Nav>
{content}
</div>
);
}
export default App;
mode에 입력값이 변경될 때마다 return값을 변경하게 만드는 것이 state
state, setMode 활용
감사합니다.