티스토리 뷰
안녕하세요. AlbertKo입니다.
저번글 세팅과 알고 넘어가는 부분을 진행했고,
이제 간단하게 코딩을 해보도록 하겠습니다.
코딩하기
컴포넌트 만들기
'./src/components' 에 'First.tsx' 파일을 만들어 줍시다.
그 후 아래와 같이 코드를 작성해 주세요.
import * as React from "react";
export interface iFirst { compiler: string; framework: string; }
export class Hello extends React.Component<iFirst, {}> {
render() {
return <h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>;
}
}
그 다음 './src' 에 'index.tsx' 를 만들어 준 후 아래 코드를 작성해 주세요.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Hello } from "./components/first";
ReactDOM.render(
<Hello compiler="TypeScript" framework="React" />,
document.getElementById("example")
);
다 되셨으면 프로젝트 루트 경로에 'index.html'을 생성하신 후에 밑에 코드를 작성해 주세요.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
</head>
<body>
<div id="example"></div>
<!-- Dependencies -->
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<!-- Main -->
<script src="./dist/bundle.js"></script>
</body>
</html>
그러면 이제 코드 작성은 끝입니다.
Webpack configuration 파일 작성하기
마지막으로, Webpack에 설정 파일만 만들면 됩니다.
루트 경로에 'webpack.config.js' 파일을 만들어 주신 다음에 다음 코드를 작성해주세요.
module.exports = {
entry: "./src/index.tsx",
output: {
filename: "bundle.js",
path: __dirname + "/dist"
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".tsx", ".js", ".json"]
},
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
]
},
// When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.
externals: {
"react": "React",
"react-dom": "ReactDOM"
}
};
이제 모두 끝났습니다!!
마지막으로 루트 경로 터미널에서
webpack
입력을 해주면 ./dist 폴더에 빌드되어 있을겁니다.
그러면 index.html을 열어볼까요??
짜잔! 성공했습니다.
이상 여기까지 React 세팅부터 텍스트 출력까지 해보았습니다.
다음번에는 Route부분이나 rxjs를 같이 사용해서 진행하는걸 해보면 어떨까 생각중입니다.
짧은 지식이지만 많은 도움이 되었으면 좋겠습니다.
'Programming > React' 카테고리의 다른 글
| <예제> React로 ToDoList 만들기 안내 (0) | 2018.08.02 |
|---|---|
| React LifeCycle이란 (2) | 2018.07.26 |
| React에 Component 만들기 (0) | 2018.07.22 |
| create-react-app을 이용하여 react typescript의 프로젝트 생성하기 (2) | 2018.07.06 |
| Typescript를 사용하여 React 시작하기 - Setting 및 알고 넘어가기 (0) | 2018.07.03 |
댓글