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
Related
I'm using the the built in Debugger tool in VS code. My launch.json settings look like this:
When I add some breakpoints to my code, it doesn't stop there. Is there some special settings required when using React with Typescript? On a react projects created bynpx create-react-app it works without any problems.
You must create what is known as source maps. Without them the executing JS file has not idea where the breakpoint is in your TS file.
I am not sure on the build system being used to help any further.
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 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:
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.
I am very new to React and IDEs for frontend development.
I am trying to use React in WebStorm. I made a new project with "React starter kit" in WebStorm. Now a whole bunch of packages got created under my project. Where should I start writing my react code?
Also I have read that I need to add library "node.js v1.8.1 core modules" and "Node.js Globals" but I'm not able to find them. I am attaching snippets for better understanding.
If you are starting with react-native you better not start with a "starter-kit".
I recommend you start form the very beginning, with the simple tutorial in the react-native docs:
https://facebook.github.io/react-native/docs/getting-started.html#content
After you get some familiarity with it, you will be able to use a stater-kit more properly.
As for the project in your WebStorm, you need to look for the files under the src directory to edit the react code.
Good luck