React Getting Started
To use React in production, you need npm which is included with Node.js.
프로덕션에서 React를 사용하려면 Node.js에 포함된 npm이 필요합니다.
To get an overview of what React is, you can write React code directly in HTML.
리액트가 뭔지 개요를 보려면, HTML에서 리액트 코드를 작성해 보세요.
But in order to use React in production, you need npm and Node.js installed.
하지만 프로덕션에서 React를 사용하려면 npm과 Node.js가 설치되어 있어야 합니다.
React Directly in HTML
The quickest way start learning React is to write React directly in your HTML files.
React를 배우는 가장 빠른 방법은 HTML 파일에 React를 직접 작성하는 것입니다.
Start by including three scripts, the first two let us write React code in our JavaScripts, and the third, Babel, allows us to write JSX syntax and ES6 in older browsers.
세 개의 스크립트를 포함하는 것으로 시작합니다. 처음 두 개는 JavaScript에서 React 코드를 작성할 수 있게 해주고, 세 번째 Babel은 이전 브라우저에서 JSX 구문과 ES6을 작성할 수 있게 해줍니다.
You will learn more about JSX in the React JSX chapter.
JSX에 대해서는 React JSX 챕터에서 더 자세히 알아볼 수 있습니다.
ExampleGet your own React.js Server
Include three CDN's in your HTML file:
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="mydiv"></div>
<script type="text/babel">
function Hello() {
return <h1>Hello World!</h1>;
}
const container = document.getElementById('mydiv');
const root = ReactDOM.createRoot(container);
root.render(<Hello />)
</script>
</body>
</html>
This way of using React can be OK for testing purposes, but for production you will need to set up a React environment.
Setting up a React Environment
If you have npx and Node.js installed, you can create a React application by using create-react-app.
If you've previously installed create-react-app globally, it is recommended that you uninstall the package to ensure npx always uses the latest version of create-react-app.
To uninstall, run this command: npm uninstall -g create-react-app.
** Uninstall : npm uninstall -g create-react-app
Run this command to create a React application named my-react-app:
The create-react-app will set up everything you need to run a React application.
Run the React Application
Now you are ready to run your first real React application!
Run this command to move to the my-react-app directory:
Run this command to run the React application my-react-app:
A new browser window will pop up with your newly created React App! If not, open your browser and type localhost:3000 in the address bar.
The result:
Modify the React Application
So far so good, but how do I change the content?
Look in the my-react-app directory, and you will find a src folder. Inside the src folder there is a file called App.js, open it and it will look like this:
/myReactApp/src/App.js:
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;Try changing the HTML content and save the file.
Notice that the changes are visible immediately after you save the file, you do not have to reload the browser!
Example
Replace all the content inside the <div className="App"> with a <h1> element.
See the changes in the browser when you click Save.
function App() {
return (
<div className="App">
<h1>Hello World!</h1>
</div>
);
}
export default App;Notice that we have removed the imports we do not need (logo.svg and App.css).
The result:
What's Next?
Now you have a React Environment on your computer, and you are ready to learn more about React.
In the rest of this tutorial we will use our "Show React" tool to explain the various aspects of React, and how they are displayed in the browser.
If you want to follow the same steps on your computer, start by stripping down the src folder to only contain one file: index.js. You should also remove any unnecessary lines of code inside the index.js file to make them look like the example in the "Show React" tool below:
Example
Click the "Run Example" button to see the result.
index.js:
import React from 'react';
import ReactDOM from 'react-dom/client';
const myFirstElement = <h1>Hello React!</h1>
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myFirstElement);'컴퓨터 관련 > 리액트' 카테고리의 다른 글
| W3S/리액트 (2) | 2024.10.15 |
|---|---|
| 리액트 배우기 - 공식 홈페이지 (1) | 2024.08.06 |
| React-The library for web and native user interfaces (0) | 2024.08.06 |
| 웹팩/바벨 (0) | 2024.08.01 |
| Critical Rendering Path(CRP) (0) | 2024.08.01 |