React Support for client side

See original GitHub issue

This is the central ticket for our React support. This will be an evolving ticket, I’ll create a Project once we have identified TODO items clearly Any TODO must be added/modified to this opening comment.

The below is the Framework choices made so far:

React written in Typescript
Redux + react-redux + Axios + Promise middleware + redux-thunk
React router v4
Bootstrap 4 + Reactstrap
Tslint + tslint-eslint + tslint-react
Lodash
Karma + Mocha + Chai + Enzyme for unit tests
Sass support
i18n custom with react-jhipster lib
Webpack set up close to our Angular setup

The below are the initial list of TODO:

Merge the generator-jhipster-react library into a new branch in the generator-jhipster repo (@deepu105)
- This is done and now lives in https://github.com/jhipster/generator-jhipster/tree/jh-react
Migrate to bootstrap from material UI (@sendilkumarn @deepu105)
Migrate to Typescript from ES6 + babel (@sendilkumarn @deepu105)
Find a solution for i18n so that our current files can be reused. If cannot find a lib write a plugin using counterpart adapting ngx-translate(@deepu105)
Add sample unit tests
Migrate entity sub generator
Implement a transform stream to strip i18n related stuff when its disabled
Cleanup structure and finish almost done pages if any (@deepu105)
add more travis builds for React(no i18n, sass, ws, Search, Oauth)
Add options to tempate for Auth, Sass, i18n etc
Migrate remaining account module pages
Supress React options for UAA
move reducers to feature folders
use import alias and align with new entity folder structure

Modules

Account: activate
Account: password
Account: register
Account: reset
Account: sessions
Account: settings
Admin: audits
Admin: configuration
Admin: docs
Admin: health
Admin: logs
Admin: metrics
Admin: tracker
Admin: gateway
Admin: user-management
Blocks: config
Blocks: handlers
Blocks: interceptors
Shared: alert
Shared: auth
Shared: form
Shared: language
Shared: login
Shared: profiles
Shared: util
shared:all
Home
Layouts:error
Layouts:navbar

Issues/Bugs

Error handling when authentication fails
Handling roles
No login errors when invalid password #6669
Changing password doesn’t work #6670
Pagination componenet tries to paginate when there is no next page (needs unit tests in lib as well)
Entity dialog page creates lot of methods to handle relations, try to remove and simplify those

Test cases

Application

Default options with i18n
Default options without i18n
Default options with i18n prod profile
Default options without i18n prod profile
Default options regenerate existing app
Default options with SASS
Default options with --skip-user-management flag
Default options with --jhi-prefix flag
Default options with --skip-server flag
Default options with i18n for Gateway
Default options without i18n for Gateway
Default options with Protractor
Gradle build Default with i18n
Gradle build Default with i18n prod profile
With Search engine
With websocket
Session Auth
Oauth2 Auth
add new languages to app

Entity

With no pagination
With pagination
With Infinite scroll
With blob
With Image
With Text
Different field types
Different relationship types
Import from JDL

cc @jhipster/developers

Issue Analytics

State:
Created 6 years ago
Reactions:43
Comments:114 (97 by maintainers)

Top GitHub Comments

11reactions

deepu105commented, Aug 11, 2017

Base configuration works now

7reactions

deepu105commented, Sep 24, 2017

React is re licensed as MIT https://code.facebook.com/posts/300798627056246/relicensing-react-jest-flow-and-immutable-js/

Top Results From Across the Web

Client Side Rendering Vs Server Side Rendering in React js ...

In server-side rendering when a user makes a request to a webpage, the server prepares an HTML page by fetching user-specific data and...

3 Reasons You Should Server-Render Your React App

By default, your React app will be client-side rendered. This means basically, all of the source code will live in JavaScript files referenced ......

ReactJS server-side rendering vs client-side rendering

Think of ReactJS as a server-side templating engine here (like jade, handlebars, etc...). The HTML rendered by the server contains the UI as...

Chapter 15 Introduction to React | Client-Side Web Development

This chapter introduces the React JavaScript library. React is “a JavaScript library for building user interfaces” developed by Facebook (though it is released ......

What is client-side rendering in React? - Tutorialspoint

Client−side rendering is a technique used in web development to improve the performance of web pages. It moves the browser's rendering ...