How to add react to a my express API? - reactjs

I'm currently experimenting with Node/Express and I have so far created a very simple rest api.
My question is, now I am wanting to add React to the project and I am unable to find out how to do this effectively with keeping the MVC structure. I can't seem to find anything simple.
Any help/ tutorial guidance would be appreciated

Are you looking for Server Side Rendering. Redux community has a excellent guide about SSR. React Universal App (SSR base app ) has some complexity regarding API call because life-cycle hook are not called during server side rendering. Find more here

Related

I need some advice on learning path

React Native or React JS, can you please tell me which one I should learn, and yes I know absolutely nothing aside from Colt Steele's web dev Bootcamp(we did have jQuery in that course, is it the same thing). If someone could explain to me the difference between React Native and React-Redux, that would be awesome, and please don't laugh if my question makes no sense. You can ignore it quietly. Thanks
I was asked to edit my question so here it goes, which tutorial will make more sense for a new learner,this one https://www.udemy.com/course/the-complete-react-native-and-redux-course/?ranMID=39197&ranEAID=OyDCFDQTmY&ranSiteID=O.yDCFDQTmY-pbBV5G_YA1uxwpEcfTPfUg&LSNPUBID=OyDCFDQTmY or this one https://www.udemy.com/course/react-redux/?ranMID=39197&ranEAID=OyDCFDQTmY&ranSiteID=O.yDCFDQTmY-pbBV5G_YA1uxwpEcfTPfUg&LSNPUBID=OyDCFDQTmY
React.js is:
A JavaScript library for building user interfaces
React Native is:
A framework for building native apps using React.
Which field of software development to you want to be involved in?
Web development or mobile app development?
Redux is:
A State Container for JS Apps
So basically you use Redux to manage state in your React app.

Angular Services in ReactJS?

I am new to ReactJS and I'm working on the Front-End side of a project I have developed myself. The project is meant to be a site where users can logIn and post messages.
I have developed my back-end using Spring, Kotlin and MongoDB as DDBB, and have developed the API to perform all the necessary actions.
I have already developed the front-end side in Angular 6, since I know how to do that, and I have the site running correctly.
However, I'm trying to learn ReactJS, and I want to 'replicate' what I've done in Angular with React. After some tutorials and stuff, I have been able to develop my LoginComponent, which can fetch correctly the userInformation from the backend.
Here's then my question: In Angular, I use services to store variables that I may need from different routes, such as the userId (I will query the messages using that). I have not noticed how to do that in React, any idea?
Sorry for the poor explanation, I'm new to React.
You need a place to store the application state, you can use rxjs or mobx observables, or you can use redux. I personally like observables, as there is a lot of boilerplate in redux.
In react, your smart components will usually import pure functions from services that perform actions on the stores, and derive its rendering from the application state that is passed down to dumb rendering components.

Is it possible to develop a reusable react/redux project?

I would like to know if it is possible to create a React project containing Redux library and then export it in another project? Until now, I only create components that display data. So I never wonder if it is possible.
The goal is to develop a little chatbot that communicates with an API. Then, this project will be used in several React projects.
Is it possible to do this? If yes, is it a good practice?
I have searched on the web and on Stack Overflowbut I didn't find any answer.
Sorry if the question has already been asked.
Thanks.
It is possible. A React component is a JavaScript function or a class. It can contain any JavaScript code. So a companent that is exported to other projects can manage its state using Redux.
Redux makes sense when the state handling is complex. Your component seems simple since all it does send data to an API and show received data. If you think it is complicated and that it would be difficult to implement it using pure React alone, you can use Redux.

How Can I Use Kitto (/Dashing) With A Standard React Fetch API?

The Short Story:
How does Elixir/Kitto link its Ruby syntax with the React parts?
Context:
Hi there. I'm a newbie in a React-heavy dev team while from a non dev background - so still finding my feet, as you can imagine.
I've been asked to build a dashboard that uses API live-feed/data - using React. I imagined this as a cloud hosted app that uses fetch to get api data through and displays in React components.
We found Kitto online, it looks rather great.
https://github.com/kittoframework/kitto
But... here's the challenge: code-wise, a lot of it appears very very Ruby-like (though the components are React).
So i'm very confused. How can i use Kitto as a slick React dashboard, but fetch my api data in a React 'fetch' fashion, if a lot of the logic is in Ruby? Or something very similar?
Or more specifically:
How do the .html.eex Elixir files talk to the api / React components?

Is it possible to use RelayJS and GraphQL without the ReactJS?

I'm trying to figure out if there is a way of using RelayJS and GraphQL without ReactJS. Im quite fond of how those three works in data management and at the same time, im looking forward on using the jeasyUI for the design of my web application. But the problem is jeasyUI doesnt really work well together with reactJS.
Im a newbie on this matter so please, please please, if you guys know any way on how to work on it. Enlighten me please. Any response regarding this would be highly appreciated. Thanks in advance.
No, it's not possible to use Relay without React, but it's possible to use GraphQL without Relay.
Relay is just one of several GraphQL clients, there are others like Apollo client ( a client that supports React, Angular, React Native and any other frontend) and Lokka (a very simple client, without cache).
At present facebook only support relay to be used with react or react native + GraphQL. But they are working on it to make it framework agnostic. You can try Apollo Client which is the best alternative for Relay out there and also has lots of cool features, if you want to choose different tech stack other than facebook's.

Resources