React With Express 사용

React는 오픈 소스 프런트엔드 라이브러리입니다.그것은 한 페이지의 응용 프로그램뿐만 아니라 복잡하고 방대한 웹 인터페이스에도 적용된다.이 도서관은 현재 시대의 대량의 사이트에 동력을 제공하였다.
이 라이브러리가 발표된 후 전 세계도 건장하고 경량급 자바스크립트 라이브러리의 이용률이 크게 증가하는 것을 보았다.사람들은 점점 더 많은 동적 웹 페이지를 선택하기를 원하고 개발자는 유연한 환경을 필요로 한다.이것이 바로 ReactJS가 갈수록 인기를 끌고 있는 이유다.리액트 블로그를 만들기 위해 리액트 JS 개발 서비스를 고용해야 하는 이유를 깊이 있게 알아보자.

ReactJS는 간단하기로 유명하다.JS 함수에 대해 잘 아는 개발자라면 누구나 쉽게 ReactJS를 사용할 수 있다.개발자는 HTML과 유사한 구문을 사용하는 JSX 인터페이스를 정의할 수 있습니다.따라서 CSS 및 HTML이 생성됩니다.React의 API는 매우 강력해서 누구나 기본 함수를 배우기 시작할 수 있다.

ReactJS가 등장하면서 더 이상 복잡하지 않게 발전했다.이 라이브러리는 구성 요소를 다시 사용해서 프로젝트를 구축할 수 있는 정확한 도구를 제공합니다.이러한 방식을 통해 이미 구축된 인터페이스 요소는 프로젝트의 어느 곳에서든 사용할 수 있으며, 각종 다른 구성 요소에서 호출하기만 하면 된다.함수를 작성해서 나중에 어느 곳에서든 다시 사용합니다.

React를 사용하여 애플리케이션을 만들 때 얻을 수 있는 이점js
속도 -React 블로그 CMS를 만드는 것은 개발자가 서버와 클라이언트에서 특정한 응용 프로그램의 각 부분을 이용할 수 있도록 하기 때문에 항상 유익하다.이것은 전체 개발 과정의 속도를 높였다.
성능 -ReactJS의 핵심은 가상 서버 쪽 렌더링과 DOM 프로그램을 제공하는데 이 프로그램은 복잡한 응용 프로그램의 빠른 실행을 지원한다.

React를 사용하여 응용 프로그램을 작성하려면js

Express Setup – React start를 사용하여 블로그를 만들려면 다음 명령을 사용하여 Express generator를 설치합니다.

npm install express-generator

서버 디렉터리에서express 명령을 실행합니다.이렇게 하면 기본express 프로그램을 사용할 수 있지만, 기본 설정을 사용하지 마십시오. 먼저 수정해야 하기 때문입니다.라우팅, 뷰 및 공용 폴더를 삭제하면 3개의 패키지에서 시작할 수 있습니다.bin 디렉터리와 프로그램의 json, www 파일.js.
3개의 추가 라이브러리 추가(예:

Cors – Express Server와 React 애플리케이션 간의 통신을 유지하는 데 도움이 됩니다.

헬멧 - HTTP 요청을 더욱 안전하게 하고 이 라이브러리에서 HTTP 헤더를 계속 업데이트합니다.

Pg – 이 주요 라이브러리는 psql 데이터베이스와 통신하는 데 사용됩니다.이 점이 없으면 데이터베이스와 영원히 통신할 수 없다.

이 명령을 사용하여 라이브러리 설치

npm install pg helmet cors

ReactJS에 블로그를 만들려고 할 때, 몇몇 명령을 관찰해서 서버가 정상적으로 작동하는지 확인하십시오.

클라이언트에 연결

React 기본 블로그는 클라이언트 애플리케이션을 서버에 연결하는 경우에만 작성할 수 있습니다.패키지에 들어가기만 하면 됩니다.클라이언트 디렉토리의 json 파일 & 다음 명령을 입력합니다.

“proxy”: “http://localhost:5000"

클라이언트는 이제 에이전트를 통해 서버와 쉽게 통신할 수 있습니다.
이제 서버로 돌아가 빠른 경로를 설정합니다.routes라는 새 파일을 만듭니다.js는 서버 디렉터리의 메인 폴더에 있습니다.이 파일은 클라이언트 응용 프로그램에 데이터를 보낼 수 있는express Route를 모두 보관합니다.이제 간단한 노선을 설정하자.

var express = require('express')
var createError = require('http-errors');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var app = express();
var router = express.Router()
router.get('/api/hello', (req, res) => {
  res.json('hello world')
})
app.use('/', router);
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
  console.log(`Listening on port ${PORT}`);
});
module.exports = app;

홈 클라이언트 코드의 명령입니다.js 구성 요소는 다음과 같습니다.

import React, { useState, useEffect } from 'react'
import axios from 'axios';

const Home = props => {
    useEffect(() => {
    axios.get('/api/hello')
        .then(res => setState(res.data))
    }, [])

    const [state, setState] = useState('')

  return(
    <div>
    Home
    <p>{state}</p>
    </div>
 )
};
export default Home;

마지막으로 react 튜토리얼을 사용하여 블로그를 구축하려면, react JS 개발자를 고용하려면 실행 중인express 서버에 axios get 요청을 보내야 합니다.만약 그것이 정상적으로 실행된다면, "Hello World"가 화면에 나타날 것입니다.
정상적으로 작동하는 경우 React Node fullstack 애플리케이션이 구축되어 있음을 알아야 합니다.

최종 결정권
위 절차와 명령을 사용하여 React 애플리케이션 블로그를 만들 수 있습니다.하지만 초보자라면 리액트에 블로그를 어떻게 쓰는지 모르면 리액트 JS 개발자를 고용하는 것이 좋다.전문가가 할 수 있는 일은 여전히 학습 중인 사람이 실현하기 어렵다.오늘 저희에게 연락을 주시고, 저희의 목소리와 경험이 풍부한 개발자와 함께 일하세요.
다음과 같은 기사도 좋아할 수 있습니다.
최초로 flatlogic.com-React, Angular, Vue, Bootstrap &React 원본 템플릿과 주제에 발표되었다.
텍스트 출처: Using React With Express