How can I see what I´m building on my Chrome browser?
I know how to see PHP through local server, see HTML website through normal ways and with Gulp but can´t seem to understand this.
I would suggest you look into create-react-app, it comes handy with a few things that are already prebuilt https://github.com/facebookincubator/create-react-app
Here's a tutorial on it: https://medium.com/#diamondgfx/learning-react-with-create-react-app-part-1-a12e1833fdc
You can load the build from your project on 'create-react-app' into your PHP project.
Related
So I have built a react app from scratch using npx create-react-app. Everything was going great and I decided to deploy it, to which I hit a lot of problems. Using BlueHost has the host, I accessed the CPanel and inserted the build folder, which i used npm run build to create. The website loaded correctly on chrome, however issues within Safari and Mobile browsers emerged, the page was empty.
After doing further research, I decided that the issue was in deployment and not dependencies. I came to this conclusion because I was able to run a local server on both Chrome and Safari, to which the website worked. If it was a dependency issue, it would not have worked on the local server.
So, I decided to start debugging the build folder. However, this is where an issue emerged, I could not load it at all on a server. I tried using serve -s build, but that directed me to an error screen, 404: the requested path could not be found. If I try to plainly use the index.html, open with browser method on my build, it directs my to an empty page with an invalid url, file:///Users/danieldobrovolskiy/Documents/optimal-exterior/build/index.html.
Apologies if my question is vague or incoherent in someway. I'm seriously confused with the deployment process and have no idea what to even ask. All help is appreciated! Let me know if further information is needed.[
Have you set a homepage in package.json? it should be like "homepage": "./" if you're deploying off the main folder of the webserver
So similar questions have been asked, but I have additional questions that I'm needing answered. It's also quite possible I'm overthinking all of this.
To create a react project offline, I should be able to get the minified react library from a CDN. But without internet access, I need to save out that javascript to a different file, right? Then I can transfer that to my offline machine.
From there, how does running the project work? Can I use command line tools for react? Do I lose the react debugging capabilities? Or am I just writing React code and then loading the index.html into the browser?
How does node_modules work? I know the amount of modules react installs when using create-react-app is a lot. Is all of that self-contained in the CDN?
Do I need to get Babel for transpiling? or is that also included in the CDN?
Thanks in advance.
EDIT:
It seems that using node_modules is going to be out of the question for my use case. So I'll need to use the CDN scripts. What do I lose when using React this way? I'm assuming I can't run from the command-line, so I'm only able to load the index.html into the browser. Same question as before though, do I need Babel for transpiling? What other capabilities that I'm used to having with React to I lose when only using the CDN script?
I come from a background in Angular, but I wanted to start learning React. I want to make a React front-end for a nodejs Express web service.
In Angular, I could simply build the source code into a static folder with a standard index.html, and it can be deployed on any web server. With React however, every tutorial I see is about running React in its own server using create-react-app and npm start.
I know you can also just use script tags to import the React framework in a static page, but then you can't use JSX syntax, and I would like to. Is it possible to simply build a React project into a static folder with an index.html that can be deployed on any web server?
Yep, you can do what you're describing. If you want to use JSX syntax, you'll need Babel, which transpiles it into standard JavaScript.
You can avoid the complexities of setting it up by using create-react-app to create the app, then running npm build instead of npm start. This will compile everything into a build directory, complete with index.html.
CRA uses its server for development purposes. You don't need CRA for using React of course. But, as your app getting bigger and bigger you will need some more extra tools. For example you want to see your code instantly without refreshing your browser. Here comes the dev server and hot reloading.
CRA uses Webpack behind the scenes. It is a great tool for bundling (obviously) all your files (including css), minifying, uglifying, optimizing your code etc.
For simple code or testing purposes using one file and attaching React and Babel to your file could be enough but for real apps you will need more. Either you will use something like Webpack on your own or you will use CRA and let it do all the extra stuff for you.
I'm not getting how to run reactjs code on eclipse.I have created dynamic web page folder,I tried to run react code but i'm not.I have added react-1.4.jar file to that folder also, but I don't know whether it is correct or not.
Please any one can help me about setup to run react code on eclipse.
I've been using CodeMix to work on Node.js Typescript project with an Angular web application all of these under Eclipse, although, it is not React, it also have support for React projects!!! I would recommend to give it a try, I've already tried to create a CodeMix React Project and it provides a nice example on how to write ReactJS under Eclipse. Hopefully this will get you on the right direction.
You can generate bundle.js using web pack that can be placed in
eclipse web content folder.
Don't forget to place HTML, CSS, images and other script files.
You can't run the JSX files using eclipse.
you can't run react (JSX) codes without babel, webpack. whatever IDE your working with, write a JSX code and compile it by using babel.
There is actually a plugin to support JSX and typescript in Eclipse. It's called "TypeScript". TypeScript
follow - official react js documentation React
If you still stuck, try to start react app by using other IDE's like Visual Studio Code, Sublime, Atom.
For Online VS Code IDE react use this : stackblitz
Hope this helps
I started to learn angular.js and build the hello world app according to the official angular site.
I'm working with Spring Tool Suite 3.8.4 and installed the AngularJS Eclipse 1.2.0 plugin and the test project was working fine without any validation errors.
After finishing this tutorial I made a git clone from this demo application, did all the installation steps, imported it as a project into Eclipse and configured it as an angular project (nature).
After all validation was done Eclipse showed me about 2500 errors with the message Unexpected token. I opened some files and it seems that the import and export keyword isn't recognized properly.
As the hello world app uses also these keywords and didn't have any validation errors I assume the reason could be a configuration problem. If i compare them in my project explorer i was wondering why in my hello world app was only a folder "TypeScript Resources (2.2.2)" and in this imported project there is also one folder/lib called "Javascript Resources". Might be ok, just something i noticed.
As im totally new to angular I have no clue what I could check. I read that the angular js support for the Eclipse IDE isn't perfect but these articles have been partly outdated as they were using Angular 1.x and 2.x.
Running the application with npm start in a terminal or "Run as" ==> ng serve" works fine without any problem.
Both applications (hello world and the cloned one) use Angular 4.x.
Does anybody have an idea? Do I need to provide more information?
At first just to clarify things, you have installed Angular2 Eclipse which is for Angular2, Angular4 and where you develop with TypeScript. AngularJS Eclipse is for Angular1 where you develop with JavaScript.
You error is a JavaScript Problem which comes from the JSDT plugins. It seems that you have added JSDT nature. I suggest you to remove JSDT nature from your project because you develop with TypeScript and not with JavaScript.
To do that you can edit your .project file and remove this line:
<nature>org.eclipse.wst.jsdt.core.jsNature</nature>
If you need to open JavaScript file in an editor with validation, completion, etc, TypeScript IDE provide a JavaScript (Salsa) Editor which does that. You open your JS file with JavaScript (Salsa) Editor:
and after you benefit from the same feature than TypeScript editor: