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

.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

댓글()

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

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


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



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

태그 : react

댓글()

react state 에러

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

댓글()

Spring x react 연동하기

에디터 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 state 에러  (0) 2018.11.29
Missing privilege separation directory: /var/run/sshd  (0) 2018.11.27
Spring x react 연동하기  (0) 2018.11.27
ubuntu 포트열기  (0) 2018.11.26
ubuntu tomcat8 설치하기  (0) 2018.11.26
react 설치하기  (0) 2018.11.21

태그 : react, Spring

댓글()

react 설치하기

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


결과화면



'취미생활 > 혼자삽질기' 카테고리의 다른 글

ubuntu 포트열기  (0) 2018.11.26
ubuntu tomcat8 설치하기  (0) 2018.11.26
react 설치하기  (0) 2018.11.21
티스토리 초기화면 특정페이지로 이동  (0) 2018.11.20
plex 서브도메인 설정  (0) 2018.11.13
css 영어 입력시 줄바꿈처리  (0) 2018.11.13

태그 : react

댓글()