VisualStudio Code 에서 React 개발환경을 설정하는 순서를 나열해 봤습니다.


Typescript

Webpack

React

을 구성했고 추가적으로 

react-hot-loader

Babel

TSLint


를 설정하는 방법을 기술하였습니다.


추후 화면 Capture 를 추가할 예정입니다. (일단은 제가 확인하기 위한 내용으로...)



<source path>\React\>mkdir typescript-react-webpack

<source path>\React\>cd typescript-react-webpack


<source path>\React\typescript-react-webpack>code .

<source path>\React\typescript-react-webpack>mkdir src

<source path>\React\typescript-react-webpack>mkdir build


npm config list


npm set init.author.name "<Your Name>"

npm set init.author.email "yourAccount@woojja.com"

npm set init.author.url "www.woojja.com"

npm set init.license "MIT"



<source path>\React\typescript-react-webpack>npm init -y


Wrote to 

<source path>\React\typescript-react-webpack\package.json:


######################  package.json  ###########################

{

  "name": "typescript-react-webpack",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "keywords": [],

  "author": "JH.Woo <woojja@bachilab.com> (www.bachilab.com)",

  "license": "MIT"

}

###############################################################



Part 1 — Typescript and Webpack


<source path>\React\typescript-react-webpack>npm install --save-dev typescript webpack webpack-cli


<source path>\React\typescript-react-webpack>copy con webpack.config.js


ctlr + z


######################  webpack.config.js  ###########################


var path = require("path");


var config = {

    mode: 'development',

  /*

   * app.ts represents the entry point to your web application. Webpack will

   * recursively go through every "require" statement in app.ts and

   * efficiently build out the application's dependency tree.

   */

  entry: ["./src/app.ts"],


  /*

   * The combination of path and filename tells Webpack what name to give to

   * the final bundled JavaScript file and where to store this file.

   */

  output: {

    path: path.resolve(__dirname, "build"),

    filename: "bundle.js"

  },


  /*

   * resolve lets Webpack now in advance what file extensions you plan on

   * "require"ing into the web application, and allows you to drop them

   * in your code.

   */

  resolve: {

    extensions: ["*", ".ts", ".tsx", ".js"]

  },


  module: {

    /*

     * Each loader needs an associated Regex test that goes through each

     * of the files you've included (or in this case, all files but the

     * ones in the excluded directories) and finds all files that pass

     * the test. Then it will apply the loader to that file. I haven't

     * installed ts-loader yet, but will do that shortly.

     */

    rules: [

      {

        test: /\.tsx?$/,

        exclude: /node_modules/,

        use: ['ts-loader']

      }

    ]

  }

};


module.exports = config;


###################################################################




<source path>\React\typescript-react-webpack>npm  install --save-dev ts-loader



make file : index.html, src/app.ts, and src/some_module.ts


##########################  src/some_module.ts  ########################

const greeting: string = "Hello World!";


export default greeting;

###################################################################


##########################  src/app.ts  ################################

import greeting from "./some_module";


console.log(greeting);

###################################################################


##########################  index.html ################################

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Getting Started with Typescript, ReactJS, and Webpack</title>

  </head>

  <body>

    <script src="build/bundle.js"></script>

  </body>

</html>

###################################################################


<source path>\React\typescript-react-webpack2>copy con tsconfig.json

{

    "compilerOptions": {

      "jsx": "react",

      "module": "commonjs",

      "noImplicitAny": true,

      "outDir": "./build/",

      "preserveConstEnums": true,

      "removeComments": true,

      "target": "ES5"

    },

    "exclude": [

      "node_modules"

    ]

}

ctlr + z


<source path>\React\typescript-react-webpack>npm run build


index.html 실행



console 확인.




Part 2 — ReactJS


<source path>\React\typescript-react-webpack>npm install --save react react-dom


<source path>\React\typescript-react-webpack>npm install --save-dev @types/react @types/react-dom @types/react-router-dom // @types/webpack-env


############################## some_module.ts ==>  Hello.tsx #####################################

// Remember to rename your file to Hello.tsx and

// place it within your src/ directory

import * as React from "react";


interface HelloProps {

  name: string;

}


class Hello extends React.Component<HelloProps, {}> {

  render() {

    return <div>Hello, {this.props.name}</div>;

  }

}


export default Hello;

###################################################################



########################### app.ts ==>  app.tsx  ########################################

import * as React from "react";

import * as ReactDOM from "react-dom";

import Hello from "./Hello";


ReactDOM.render(

  <Hello name="Willson" />,

  document.getElementById("root")

);

###################################################################


##########################  index.html ###############################

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Getting Started with Typescript, ReactJS, and Webpack</title>

  </head>

  <body>

    <!-- this is where our Hello component will get rendered into -->

    <div id="root"></div>


    <script src="build/bundle.js"></script>

  </body>

</html>

###################################################################



########################  webpack.config.js  ############################

var path = require("path");


var config = {

    mode: 'development',

  /*

   * app.ts represents the entry point to your web application. Webpack will

   * recursively go through every "require" statement in app.ts and

   * efficiently build out the application's dependency tree.

   */

  entry: ["./src/app.tsx"],


  /*

   * The combination of path and filename tells Webpack what name to give to

   * the final bundled JavaScript file and where to store this file.

   */

  output: {

    path: path.resolve(__dirname, "build"),

    filename: "bundle.js"

  },


  /*

   * resolve lets Webpack now in advance what file extensions you plan on

   * "require"ing into the web application, and allows you to drop them

   * in your code.

   */

  resolve: {

    extensions: ["*", ".ts", ".tsx", ".js"]

  },


  module: {

    /*

     * Each loader needs an associated Regex test that goes through each

     * of the files you've included (or in this case, all files but the

     * ones in the excluded directories) and finds all files that pass

     * the test. Then it will apply the loader to that file. I haven't

     * installed ts-loader yet, but will do that shortly.

     */

    rules: [

      {

        test: /\.tsx?$/,

        exclude: /node_modules/,

        use: ['ts-loader']

      }

    ]

  }

};


module.exports = config;

####################################################################


<source path>\React\typescript-react-webpack>npm run build



part 3 — Hot Module Replacement in React (react-hot-loader)


npm install --save-dev react-hot-loader


########################  webpack.config.js  #############################

const webpack = require('webpack');


module.exports = {

...,


plugins: [

new webpack.HotModuleReplacementPlugin()

], 

...


}


####################################################################


A huge development boost will give you react-hot-loader (Hot Module Replacement). 

It will shorten your feedback loop during development. 

Basically whenever you change something in your source code, 

the change will apply in your app running in the browser without reloading the entire page.


######################## app.tsx  ##################################

import * as React from "react";

import * as ReactDOM from "react-dom";

import Hello from "./Hello";


ReactDOM.render(

    <Hello name="Willson" />,

    document.getElementById("root")

  );


module.hot.accept();

####################################################################


참고 :

https://medium.com/@francesco.agnoletto/how-to-set-up-typescript-with-babel-and-webpack-6fba1b6e72d5


https://github.com/Kornil/simple-ts-react-app




import * as React from "react";

import * as ReactDOM from "react-dom";

// hot reload for development

import { AppContainer } from "react-hot-loader";


import App from "./App";


import "./style.scss";


const root = document.getElementById("root") as HTMLElement;


const render = (Component: React.SFC) => {

  ReactDOM.render(

    <AppContainer>

      <Component />

    </AppContainer>,

    root,

  );

};


render(App);


if (module.hot) {

  module.hot.accept("./App", () => {

    render(App);

  });

}


module.hot.accept();

####################################################################


Part 4 — Babel



<source path>\React\typescript-react-webpack>npm install --save-dev babel-core babel-loader

<source path>\React\typescript-react-webpack>npm install --save-dev @babel/core source-map-loader

<source path>\React\typescript-react-webpack>npm install --save-dev @babel/preset-typescript @babel/preset-react @babel/preset-env



<source path>\React\typescript-react-webpack>copy con .babelrc

{

  "presets": ["@babel/react", "@babel/typescript", ["@babel/env", { "modules": false }]]

}

ctrl + z



Tokenization is skipped for lines longer than 20k characters for performance reasons.



part 5 — Setting up TSLint


npm install --save-dev tslint tslint-react



########################  tslint.json  ##################################

{

  "extends": ["tslint:recommended", "tslint-react"],

  "rules": {}

}

####################################################################


행복한 고수되십시오. 


woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\













Posted by woojja

티스토리 툴바