ext 프레임워크 및react 프레임워크_13개의 최적 React JavaScript 프레임워크

37210 단어
ext 프레임워크와react 프레임워크
React.js와 React Native는 사용자 인터페이스(UI)를 개발하는 데 사용되는 유행하는 소스 오픈 플랫폼입니다.Stack Overflow의 2019년 개발자 조사에서 둘 다 취할 점과 사용성 면에서 높은 순위를 차지했다.페이스북은 2011년에 반응할 것이다.js는 크로스플랫폼, 동적, 고성능 UI에 대한 수요를 충족시키기 위해 자바스크립트 라이브러리로 개발되었고, 페이스북이 2015년에 발표한 React Native는 자바스크립트를 사용하여 본 컴퓨터의 응용 프로그램을 구축하는 데 사용되었다.
다음은 13개의 가장 좋은 React JavaScript 프레임워크입니다.이 모든 것은 오픈된 것이다. - 이전 11개(예를 들어 React)는 MIT의 허가에 따라 권한을 부여받았고, 나머지 2개는 아파치 2.0에 따라 권한을 부여받았다.

1. React 응용 프로그램 만들기


Facebook 개발자의 이 명령줄 인터페이스는 모든 React Native 프로젝트의 필수 조건이다.Create React App은 사용하기 쉽고 어플리케이션을 수동으로 설정하고 구성할 필요가 없어 시간과 노력이 많이 절약됩니다.간단한 명령 하나만 있으면 모든 준비가 완료되면 React 네이티브 프로젝트를 쉽게 만들 수 있습니다.디렉터리와 파일을 구축할 수 있습니다. 이 프레임워크에는 응용 프로그램을 구축, 테스트, 시작하는 도구도 포함되어 있습니다.
# Install package
$ npm install - g create - react - native - web - app
 
# Run create - react - native - web - app < project - directory >
$ create - react - native - web - app myApp
 
# cd into your < project - directory >
$ cd myApp
 
# Run Web / Ios / Android development
# Web
$ npm run web
 
# IOS ( simulator )
$ npm run ios
 
# Android ( connected device )
$ npm run android

React App을 만드는 이유

  • 구성 패키지, 컴파일러 및 테스트 실행 프로그램을 사용하여 개발한 일류 도구
  • 어플리케이션 구조에 구성, 여분의 파일 없음
  • 고정 개발 스택
  • 효과적인 빠른 개발 도구

    • 2. 재료 키트 React


    Google의 Material Design 시스템에서 시사한 바와 같이 Material Kit React는 React UI 구성 요소를 구축하는 데 가장 좋은 선택입니다.이 라이브러리에 대한 가장 좋은 것은 많은 구성 요소를 제공했다는 것이다. 이 구성 요소들은 한데 조합될 수 있고 믿기지 않을 것 같다.1000개가 넘는 완전 인코딩된 구성 요소가 있으며, 각 구성 요소는 폴더에 구성된 단독 층이 있습니다.이것은 당신에게 수천 수만 가지 선택이 있다는 것을 의미한다.영감을 얻거나 누군가와 생각이나 개념을 공유하고 싶다면 몇 가지 예시 페이지가 있습니다.

    재료 키트 설치

      $ npm install @ material - ui / core

    실제로 하다

    import React from 'react' ;
    import Button from '@material-ui/core/Button' ;

    const App = ( ) => (
      < Button variant = "contained" color = "primary" >
        Hello World
      Button >
    ) ;
    Material-UI 구성 요소는 별도의 설정 없이 작동하며 전체 범위를 오염시키지 않습니다.

    이점


    React 구성 요소는 보다 쉽고 빠른 웹 개발을 지원합니다.이를 통해 자신만의 디자인 시스템을 구축하거나 Material Design부터 시작할 수 있습니다.

    3. 조각 React


    이 현대의 React UI 세트는 빠른 성능을 위해 0부터 구축되었습니다.그것은 현대화된 디자인 시스템을 가지고 있어 당신이 필요로 하는 방식으로 사물을 사용자 정의할 수 있습니다.코드 수준에서 내용을 사용자 정의하기 위해 원본 파일을 다운로드할 수도 있습니다.또한 스타일에 사용되는 SCSS 구문은 개발 경험을 향상시킬 수 있습니다.
    Shards React는 Shards 기반이며 React Datepicker, React Popper(포지셔닝 엔진)와 noUISlider를 사용합니다.또한 믿을 수 없는 Material Design 아이콘도 지원합니다.영감을 얻고 사용할 수 있도록 미리 만들어진 버전이 있습니다.

    방사선 또는 NPM 장착 조각

    # Yarn
    yarn add shards - react

    # NPM
    npm i shards - react

    이점

  • 조각의 무게가 가볍고 점용 공간이 적으며 압축 후 무게는 약 13kb
  • 기본적으로 파편 응답력이 뛰어나 화면 크기에 맞게 레이아웃을 적응하고 재배열할 수 있습니다
  • Shards에서 확인할 수 있으므로 빠른 시일 내에 멋진 인터페이스를 구축할 수 있습니다

    • 4. 스타일링된 구성 요소


    이 효율적인 CSS 도구는 응용 프로그램의 시각적 인터페이스를 담당하는 소형 재사용 가능한 구성 요소를 구축하는 데 도움을 줄 수 있다.전통적인 CSS를 사용하면 웹 사이트의 다른 위치에서 사용하는 선택기를 의외로 덮어쓸 수 있지만, 스타일화된 구성 요소는 구성 요소 내부에서 CSS 문법을 직접 사용해서 이 문제를 완전히 피할 수 있습니다.

    설치

    npm install -- save styled - components

    실제로 하다

    const Button = styled. button `
      background : background_type ;
      border - radius : radius_value ;
      border : abc ;
      color : name_of_color ;
      Margin : margin_value ;
      padding : value ;

    이점

  • 구성 요소의 가독성 향상
  • 구성 요소의 스타일은 JavaScript
    • 에 의존합니다.
  • CSS를 사용하여 사용자 정의 구성 요소 구축
  • 내연 스타일
  • styled () 만 호출하면 구성 요소 (심지어 사용자 정의 구성 요소) 를 스타일화된 구성 요소로 변환할 수 있습니다

    • 5. Redux


    Redux는 JavaScript 응용 프로그램의 상태 관리 솔루션입니다.주로 React에 사용되지만.js, 하지만 다른 React 프레임워크에도 사용할 수 있습니다.

    설치

    sudo npm install redux
    sudo npm install react - redux

    실제로 하다

    import { createStore } from "redux" ;
    import rotateReducer from "reducers/rotateReducer" ;

    function configureStore ( state = { rotating : value } ) {
      return createStore ( rotateReducer , state ) ;
    }

    export default configureStore ;

    이점

  • 예측 가능한 상태 업데이트는 응용 프로그램의 데이터 흐름을 정의하는 데 도움이 된다
  • reducer 기능을 사용하여 논리를 더욱 쉽게 테스트하고 시간 여행 디버깅
  • 집중국가

    • 6. React Virtualized


    이 React Native JavaScript 프레임워크는 큰 목록과 표 데이터의 구현에 도움이 됩니다.React Virtualized를 사용하면 요청과 문서 대상 모델(DOM) 요소의 수를 제한하여 React 응용 프로그램의 성능을 향상시킬 수 있습니다.

    설치

    npm install react - virtualized

    실제로 하다

    import 'react-virtualized/styles.css'
    import { Column , Table } from 'react-virtualized'
    import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer'
    import List from 'react-virtualized/dist/commonjs/List'
    {
      alias : {
        'react-virtualized/List' : 'react-virtualized/dist/es/List' ,
      } ,
      ... rest
    }

    이점

  • 대량의 데이터를 효과적으로 표시
  • 대용량 데이터 렌더링
  • 하나의 구성 요소를 사용하여 가상 렌더링

    • 7. React DnD


    ReactDnD는 복잡한 드래그 앤 드롭 인터페이스를 생성합니다.수십 가지 드래그 라이브러리가 있지만 React DnD는 현대 HTML5의 드래그 API를 바탕으로 인터페이스를 만드는 과정이 쉬워지기 때문이다.

    설치

    npm install react - dnd - preview

    실제로 하다

      import Preview from 'react-dnd-preview' ;
     
      const generatePreview = ( { itemType , item , style } ) => {
        return < div class = "item-list" style = { style } > { itemType } div >;
      } ;
     
      class App extends React. Component {
        ...
     
        render ( ) {
          return (
            < DndProvider backend = { MyBackend } >
              < ItemList />
              < Preview generator = { generatePreview } />
              // or
              < Preview > { generatePreview } Preview >
            DndProvider >
          ) ;
        }
      }

    이점

  • 정교하고 자연스러운 물건 꽃다발
  • 휠체어를 지원하는 강력한 키보드 및 화면 판독기
  • 활약
  • 깨끗하고 강력한 API
  • 표준 브라우저 상호 작용에서 뛰어난 성능 발휘
  • 심플한 스타일
  • 다른 패키지dom 노드를 만들지 않았습니다

    • 8. React Bootstrap


    이 UI Kit 라이브러리는 React로 BootstrapJavaScript를 대체하여 각 구성 요소의 기능을 더욱 잘 제어할 수 있도록 합니다.모든 구성 요소의 구축은 접근하기 쉽기 때문에 React Bootstrap은 전단 프레임워크의 구축에 유익할 수 있습니다.선택할 수 있는 수천 개의 안내 테마가 있습니다.

    설치

    npm install react - bootstrap bootstrap

    실제로 하다

    import 'bootstrap/dist/css/bootstrap.min.css' ;
    import React from 'react' ;
    import ReactDOM from 'react-dom' ;
    import './index.css' ;
    import App from './App' ;
    import registerServiceWorker from './registerServiceWorker' ;

    ReactDOM. render ( < App />, document. getElementById ( 'root' ) ) ;
    registerServiceWorker ( ) ;

    이점

  • 필요한 코드/구성 요소를 쉽게 가져올 수 있음
  • Bootstrap 압축을 통해 입력 및 오류 감소
  • Bootstrap 압축을 통한 타자 작업 및 충돌 감소
  • 사용하기 쉽다
  • 요소에 봉인됨

    • 9. React Suite


    React Suite는 또 다른 효율적인 React입니다.js 프레임워크는 기업 시스템 제품에 사용되는 각종 구성 요소 라이브러리를 포함한다.그것은 모든 주요 브라우저와 플랫폼을 지원하여 거의 모든 시스템에 적용된다.또한 서버 측 렌더링도 지원합니다.

    설치

    npm i rsuite -- save

    실제로 하다

    import { Button } from 'rsuite' ;
    import 'rsuite/styles/less/index.less' ;
    ReactDOM. render ( < Button > Button Button >, mountNode ) ;

    이점

  • 글로벌 액세스 기능을 통해 애플리케이션 관리 용이
  • Redux 라이브러리의 상태 관리 집중
  • Redux는 모든 UI 계층의 유연성과 방대한 생태계
  • Redux는 이러한 복잡성을 줄이고 전체적인 접근성을 제공합니다

    • 10. PrimeReact


    PrimeReact의 가장 좋은 점은 입력 옵션, 메뉴, 데이터 프레젠테이션, 메시지 등 UI의 모든 기본 요구를 충족시킬 수 있다는 점이다.이 프레임워크는 또한 이동 체험에 주의를 기울여 터치-최적화 요소를 설계하는 데 도움을 준다.

    설치

    npm install primereact -- save
    npm install primeicons -- save

    실제로 하다

    import { Dialog } from 'primereact/dialog' ;
    import { Accordion , AccordionTab } from 'primereact/accordion' ;
    dependencies : {
        "react" : "^16.0.0" ,
        "react-dom" : "^16.0.0" ,
        "react-transition-group" : "^2.2.1" ,
        "classnames" : "^2.2.5" ,
        "primeicons" : "^2.0.0"
    }

    이점

  • 깔끔함과 성능
  • 편리한 사용
  • Spring 어플리케이션
  • 풍부한 사용자 인터페이스 만들기
  • 가용성 및 단순성

    • 11. React Router


    React Router는 React Native 개발자 커뮤니티에서 유행하고 있습니다. 쉽게 시작할 수 있기 때문입니다.PC에 Git와 npm 패키지 관리자, React의 기본 지식과 학습 의사만 설치하면 됩니다.그리 복잡한 것은 없다.

    설치

    $ npm install -- save react - router

    실제로 하다

    import { Router , Route , Switch } from "react-router" ;
     
    // using CommonJS modules
    var Router = require ( "react-router" ) . Router ;
    var Route = require ( "react-router" ) . Route ;
    var Switch = require ( "react-router" ) . Switch ;

    이점

  • 동적 라우팅 일치
  • 탐색 시 CSS가 뷰에서 전환
  • 표준화된 응용 프로그램 구조와 행위

    • 12. 단추 구멍


    Grommet은 응답 및 액세스 가능한 모바일 우선 순위 웹 응용 프로그램을 만드는 데 사용됩니다.이 Apache 2.0 라이센스 JavaScript 프레임워크에 대한 가장 좋은 점은 작은 패키지에 접근 가능성, 모듈화, 응답성, 테마화를 제공하는 것이다.넷플릭스, GE, Uber, 보잉 등에서 널리 사용되는 주요 원인 중 하나일지도 모른다.

    방사선과 npm의 설치

     $ npm install grommet styled - components -- save

    실제로 하다

    "grommet-controls/chartjs" : {
              "transform" : "grommet-controls/es6/chartjs/${member}" ,
              "preventFullImport" : true ,
              "skipDefaultConversion" : true

    이점

  • 패키지 거래로 도구 패키지 만들기
  • 개방 정책을 극대화
  • 재구성은 구축된 조직에 영향을 미칠 수 있음

    • 13. 온천 UI


    Onsen UI는 HTML5와 JavaScript를 사용하고 Angular, Vue, React와 통합된 모바일 응용 프로그램 개발 프레임워크를 제공하는 또 다른 것입니다.Apache 2.0에서 라이센스를 받습니다.
    Onsen은 탭, 측면 메뉴, 스택 탐색 및 기타 구성 요소를 제공합니다.프레임워크에 대한 가장 좋은 것은 모든 구성 요소가 iOS와 Android Material Design 지원과 자동 스타일을 가지고 있기 때문에 플랫폼에 따라 응용 프로그램의 외관을 바꿀 수 있다는 것이다.

    설치

    npm install onsenui

    실제로 하다

    ( function ( ) {
        'use strict' ;
        var module = angular. module ( 'app' , [ 'onsen' ] ) ;

        module. controller ( 'AppController' , function ( $scope ) {
          // more to come here
        } ) ;

    } ) ( ) ;

    이점

  • Onsen UI는 무료 및 소스 오픈 코드 위에 구축됨
  • 개발한 어플리케이션에 DRM 유형을 적용하지 않음
  • JavaScript 및 HTML5 코드 컴파일
  • 엔드 유저에게 기본 제공
    • 가장 좋아하는 React JavaScript 프레임워크는 무엇입니까?댓글로 공유해 주세요.
    번역자:https://opensource.com/article/20/1/react-javascript-frameworks
    ext 프레임워크와react 프레임워크
    GitHub의 사용자 이름을 변경하면 noreply 메일 주소의 제출 이력은 어떻게 됩니까?
    17줄의 코드로 된 트위터 봇

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage