react-starter-kit | Super easy | Router library

Development and build version not working in IE 11 and Edge. Here are my webpack config and package json file.

I have used below repo. https://github.com/kriasoft/react-starter-kit

I have been trying to fix this issue using various babel packages and webpack configurations.

Arrow function seems not to be working.

Here's the error.

webpack.config.js

I am trying out React-Starter-Kit for the first time and loving all the cutting edge features baked in (apollo/graphql-client in particular). A crucial part of any app for me is the database, and for that my understanding is the same author provides nodejs-api-starter which sets up a REST interface for accessing Postgres at localhost:5000 and has a graphql webui at localhost:5000/graphl.

That is about as far as I have been able to understand of the setup so far. I have changed the frontend code a little bit so a new Component "Counter" is loaded on the home page. I need to be able to make a new counter, fetch the latest counter, and increment decrement the counter. Write now the component just outputs the 'value' retrieved from the server at 5000.

I do not think I am accessing the 5000 server correctly, do I put the port in this url line somehow?

You can pull the repo down from : https://github.com/Falieson/react-starter-kit-crud-counter-demo

This is my first time setting up a nodejs api server, I am used to using MeteorJS which has pub/sub to MongoDB baked in. I am looking forward to the separation the RSK strategy (which seems more industry standard?) provides.

I am trying to call a function in my child component from a button click event in my parent component.

Parent Component:

I'm using react-starter-kit and building a list component that looks like this:

I'm porting my code from ES6 to .TS / .TSX

Given a folder structure like this:

Table/Tables.tsx

Importing from another react component in ES6 I used to be able to just do this:

import Table from '../Table'

i.e. it would be smart enough to resolve the import by folder name. Now that I've switched to Typescript I have to import more verbosely (from another .tsx file);

import Table from '../Table/Table'

I've looked here https://www.typescriptlang.org/docs/handbook/module-resolution.html

I'm using Webpack with React Starter Kit.

I am trying to figure out how I get CSS to be successfully applied to components that I import from an npm library.

The core of my issue seems to be that I'm using css-loader as part of the react starter kit (https://github.com/kriasoft/react-starter-kit) and don't fully understand how it works.

I have looked at a couple of datepicker libraries - for example https://github.com/YouCanBookMe/react-datetime and https://github.com/wangzuo/input-moment.

In each case, the source code is applying local class names to the HTML. The formats that are embedded in the libraries aren't automatically applied. I've tried importing them manually from /node_modules in the component that uses the library component. I've also tried copying the relevant styles to a local css file and importing that.

The issue appears to be that css-loader is converting any imported styles class names to be module-specific class names which then don't match the actual class names in the resulting HTML.

Am I approaching this wrong? What's the preferred way to import components and apply custom styling to them?

Thanks!

There are some question relative, but completely different

Call child method from parent

Call child function from parent component in React Native

https://github.com/kriasoft/react-starter-kit/issues/909

They all need import Child in Parent file.

But how to set ref to this.props.children ???

I want to call Child method in Parent , Parent is a common wrapper which require a Child with specific function . Child is dynamic,

1. Child

   ...

I'm using passport-js with react-starter-kit and universal router, and there are some /login routes that are handled server side. Is there any way to force a server side fetch from a route url rather than a client-side one?

For instance, if I go to /logout directly from the url - it triggers the correct server side logout. However, if I click on a /logout link on the browser from the client-side I get a page not found error because it's doing the client-side routing and /logout is not defined in routes. Is it possible to define a route object that has to get served directly from the server?

routes/index.js

I would like to use resolve.alias feature from webpack in my projects using React Starter Kit.

For example:

Instead this: