.jsx 다른 클래스 import할때 jsx확장자 제거하기

취미생활/react|2018.11.29 17:46

.jsx 다른 클래스 import 할때 확장자 제거하기


import Counter from './Counter.jsx';

위에서 .jsx를 제거하면 아래와같은 에러가 난다. 


ERROR in ./MainPage.jsx
Module not found: Error: Can't resolve './Counter' in 'C:\project\demo\src\main\jsx'
 @ ./MainPage.jsx 23:0-32 50:64-71


webpack.config.js 에 아래내용 추가



module: {
        rules: [ {
            ...
            resolve: {
                extensions: [".js", ".jsx"]
            }
        }
		...
    }


이후 .jsx를 제거하면 정상적으로 출력됨.




태그 : react

댓글(0)

spring x react 세팅후 package.json 파일이 안보일때

취미생활/react|2018.11.29 17:27

spring x react 세팅후 package.json 파일이 안보일때 


https://github.com/babel/babel/tree/master/packages/babel-plugin-proposal-class-properties



나는 @babel/plugin-proposal-class-properties 설치후 생성되었다. 

태그 : react

댓글(0)

react state 에러

취미생활/react|2018.11.29 17:25

SyntaxError: C:\project\demo\src\main\jsx\Counter.jsx: Support for the experimental syntax 'classProperties' isn't currently enabled (4:9):


import React, { Component } from 'react';

class Counter extends Component {
  state = { //이부분에 에러날때 
    number: 0
  }
  ...



처리방법


package.json 에 아래내용추가. 

plugins만 추가해도 될것같기도함.


  ...
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties"
    ]
  }


태그 : react

댓글(0)

Spring x react 연동하기

취미생활/react|2018.11.27 16:26

에디터 vscode 기준


2018/11/23 - [취미생활/알쓸기능] - vscode spring 프로젝트 생성하기


이전 vscode에 설치한 spring에 react를 연동시켜보았다.

이글은 전적으로 이동련님 블로그에서 보고 배웠다.


1. react 라이브러리 설치 


터미널 Ctrl + Shift + '


npm i react react-dom
npm i @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader style-loader webpack webpack-cli -D


package.json에 의존성 추가확인



2. webpack 설정


루트에 webpack.config.js 파일 생성


var path = require('path'); module.exports = { context: path.resolve(__dirname, 'src/main/jsx'), entry: { main: './MainPage.jsx', page1: './Page1Page.jsx' }, devtool: 'sourcemaps', cache: true, output: { path: __dirname, filename: './src/main/webapp/js/react/[name].bundle.js' }, mode: 'none', module: { rules: [ { test: /\.jsx?$/, exclude: /(node_modules)/, use: { loader: 'babel-loader', options: { presets: [ '@babel/preset-env', '@babel/preset-react' ] } } }, { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] } };


3. Controller 작성


 지난번 HomeController.java 파일에 추가함. 

class import - Alt + Shift + o 


	@GetMapping("/{name}.html")
    public String page(@PathVariable String name, Model model){
        model.addAttribute("pageName", name);
        return "page";
    }



4. 폴더생성

src/main/jsx 

src/java/webapp/css

src/java/webapp/jsp




5. .../jsp/page.jsp 


	<%@ page language="java" contentType="text/html; charset=utf-8"
	%>
	
	
		
			${pageName}
		
		 
		
			


 .../css/custom.css

.main { font-size: 24px; border-bottom: solid 1px black; }
.page1 { font-size: 14px; background-color: yellow; }


.../jsx/MainPage.jax


import '../webapp/css/custom.css';
 
import React from 'react';
import ReactDOM from 'react-dom';
 
class MainPage extends React.Component {
 
    render() {
        return 
메인 페이지
; } } ReactDOM.render(, document.getElementById('root'));




6. webpack watch


개발시 -d , 운영시 -p


node_modules\.bin\webpack --watch -d


태그 : react, Spring

댓글(0)

1. react 설치하기

취미생활/react|2018.11.21 16:55

1. node.js 설치

https://nodejs.org/ko/download/


2. Yarn 설치(npm 사용해도됨)

https://yarnpkg.com/en/docs/install#windows-stable



3. react install


yarn global add create-react-app


4. 프로젝트 생성하기


create-react-app hello-react


5. 프로젝트 실행하기 


yarn start


결과화면



태그 : react

댓글(0)