I'm trying to implement a solution with react and symfony 2.8, but as I'm new to react I'm still in the tutorials step. Once I though I had a good enough knowledge from react I decided to try and integrate React with symfony and I was almost successful in that. I managed to get a symfony view to load react components but was unable to do live edits, and by that I mean, I have to restart webpack and press F5 to reload the page. So I decided to go back to the tutorials I made and see what I was doing wrong. When I start a new react project (by using "create-react-app projectName") to see where I failed, this project had the same problem, I had to reload the webpack so I could see the changes I made, and I know that this project was able to live-edits (because was the first tutorial I made and was working at the time), all I needed to do is to save the document and the page should automatically show the changes I made.
I think that showing the code its not important in this case because it's a fresh project by using the command I said before, but anything you need I can try to explain you or giving the code.
Related
I am wondering how to add React into an existing ASP.NET Core MVC project in Visual Studio 2022 (no, I cannot use VS Code). I can see templates in VS2022 to create new React projects, but I have been unable to find any tutorials, videos, blogs or vlogs to show how to add React into an existing project, so I am wondering if it can be done.
I have added react.js and react-dom.js to the project and I am able to create pure javascript components using those (no JSX), but I would like to utilize more of what React has to offer.
=========================================
After the request to ask a more specific question, including the project in question . . .
I am currently on a small team working on an ASP.NET Core 6.0 MVC application. It is currently using jQuery and jQuery-UI components within the CSHTML views for the UI. There are some $.ajax calls to an API for data, but most data is loaded with the model of the view.
My boss has asked me to look into utilizing React and the reusable components on the next module that we will be working on, without replacing the entire app into a "new React application".
Every single example, video, tutorial that I have watched uses VS Code or some other IDE (other than Visual Studio) to run commands on the CLI to "Create New React App", but nothing on how to "Add React to an Existing App".
Before I go back to him and tell him that I do not think we will be able to do what he is asking, I thought I would see if anyone here could point me to anything that could show that it could be done.
Specific question: can React be added to an existing ASP.NET Core 6 MVC app in Visual Studio Professional 2022 in a way that will allow linting, testing and JSX for reusable React components?
I think I know what you are trying to achieve:
Replace what you used to do in jQuery with React and to do so without
having to move to the whole VSCode, Create-React-App (or Vite), "npm
run stuff" environment.
You can indeed do so: I have setup a .Net6 project which is the standard MVC stuff that you are already used to, stripped out jQuery that comes with it, added Bootstrap 5 (no jQuery) and then used this (https://beta.reactjs.org/learn/add-react-to-a-website) to actually add React just as a library - JSX included.
The final bit that is missing is the JSX babel warning I get. I just need to add something to my MSBuild that will minimise all my JavaScript and JSX components and I'm done.
Everything in Visual Studio too.
You can easily build components and I use a watcher on session storage to tell the state to render and it works pretty well.
The main reason I did it was so I didn't have to use NextJS because I don't see the point in learning/using NextJS and it's whole environment because its "Server Side Rendered" when that is what we have been doing for years in .Net MVC, Wordpress, and every framework/CMS you can think of.
Note, I am not against Next I am just at a point where I only use/learn tech if there is a benefit. I can clearly see the benefit of using React over jQuery.
My public facing app needs to be actual HTML coming from the server not a client side rendered page.
My private login area I build using Create-React-App (or maybe I'll switch to Vite - as I am rebuilding it) and I do all that in VSCode.
I made a simple CRUD application that is supposed to be an appointment manager based on Traversy's Task Manager (found here: https://www.youtube.com/watch?v=w7ejDZ8SWv8), and now I'm trying to publish it.
I have found a number of guides but none have helped me. I'll list them below:
https://dev.to/nikita_guliaev/deploying-create-react-app-with-json-server-as-backend-to-github-3pp9
https://github.com/YoussefZidan/fake-server
https://www.youtube.com/watch?v=5cbFLDe4OAA
The one that I believe came the closest to help me do what I want is the first one listed. If I follow it to the letter, all I get is the background but nothing else. I experimented trying to run it on my pc, changing the fetch requests from localhost to https://my-json-server.typicode.com/jmiguelcastellanosj/ap-m/appointments but it didn't work. I removed the homepage property from the package.json file and it worked on my computer (changes didn't persist, but from my understanding that's expected from the service provided by typicode), tried deploying it but it didn't even load the background.
I could describe my other attempts with the other two guides, but other than finding out that heroku exists, I don't think I got much useful learning from them.
Ideally, I would like the changes to persist after reloading the application, but right now that seems like a pipedream considering it doesn't even work once deployed.
I have a feeling that the reason for this app not working is related to the fetch requests (found in Dashboard.js, AddAppointmentForm.js, EditAppointment.js, Appointment.js), but I really don't know.
This is my first time trying to deploy anything, so I have no idea what it is that I'm missing or doing wrong, and having spent days trying and failing at this, I'm at a complete loss on what to do. Help would be greatly appreciated. Thank you.
My repo can be found here: https://github.com/jmiguelcastellanosj/ap-m
Right now it should be able to work locally with json-server as backend.
Before building set your "homepage" in package.json to "https://jmiguelcastellanosj.github.io/ap-m", this will let github pages load your files properly.
Also if your routing doesn't work properly, in each of your routes add "/ap-m" in front of your path (So path='/' becomes path="/ap-m")
I have a React app that is deployed in amazon aws. Whenever i update the code, i need to force hard reload manually on the client side(on Chrome ctrl+f5).
Is there a way to not have to do this manually in React?
I've noticed some posts about setting a query string param with a versioning system, and many solutions for angular CLI, but nothing on React.
Is there i flag i can pass in the build of the code?
I created an app with
react-create-app client
inside my e-commerce website(it uses nodejs and express), in order to implement some other functionalities. The problem is that i don't understand how to make the react-app work with ejs template, instead of using index.html. First of all i want the root component to be in a .ejs file inside views folder(outside react app). I think i need to change something in webpack, but i'm really confused, i can't even find config and there are a lot of additional plugins and code that i've never seen before, it's really difficult to understand something. Also when i run my server on port 3000 and app on port 5000 (with proxy set on 3000) it says 'something already running on port 3000'. What should i do? I can't use react on the entire website (all buttons, menus) because it's too simple for react i think, and there is some simple rendering done with ejs that i don't know how to implement with react.
At first you shouldn't use create-react-app for just bunch of components on existing page, this is whole environment done for true SPA done purely in React. If you need to just plug React to the existing page you have no choice than to read docs and learn or find a way how to setup in your existing app (you didnt say anything about it so I am not answering how.)
Secondly you need to eject your react app with yarn eject which will expose you all configs. https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-eject
Then you need html-webpack-plugin which can accepts .ejs format as entry point https://github.com/jantimon/html-webpack-plugin.
I don't see any reason why not to use React for everything, because it is "too" simple. You can render plain HTML with PureComponents and it will cost almost 0 memory for browser to render it.
I'm starting building a react native application for both iOS and Android. I've read through the documentation of react native application, but there is one thing now I do not understand:
Is react-native app fully native application?
They say in react-native, that it would be. Then why am I asking this question? Well, I found the reason to ask the question through https://github.com/Microsoft/react-native-code-push. According to code push, they are able to dynamically update the application. And this is done by updating the javascript part of the application. But wait, if the application is real native app, then in the final version of the app there shouldn't be any javascript, am I right? So how are they doing it? Are they compiling the application at code push servers, and then sending the compiled app to the user or what? This really worries me that the react-native app is really not fully native app.
The CodePush plugin helps get product improvements in front of your end users instantly, by keeping your JavaScript and images synchronized with updates you release to the CodePush server. This way, your app gets the benefits of an offline mobile experience, as well as the "web-like" agility of side-loading updates as soon as they are available. It's a win-win!
Also, the reason I'm doubting this is because they say also in code-push documentation, that they are unable to update the native part of the react-native application:
Note: Any product changes which touch native code (e.g. modifying your AppDelegate.m/MainActivity.java file, adding a new plugin) cannot be distributed via CodePush, and therefore, must be updated via the appropriate store(s).
If the react-native app would be fully native, then in the end, all code should be native code. So I don't really understand why would it be harder to update the native native code, than the code that has been compiled to native?
If you change only code in /src/ folder (JS code) and without adding native modules
you can use CodePush to update your application.
If you change code in /src/ folder (JS code) and add some natives modules, you can't use CodePush to update your application.
You're JS code is compiled and read by native components. That's why you can update the JS layer.
If you take a look into your .ipa file and open main.jsbundle (unminify required) you can see your JS code. example: