We have chosen the react JS 0.14.8 for front end because it supports IE 8 browser but Is Node JS or JSX is necessary for React JS development or we can create components without Node JS or Jsx
1
-
Neither is required. You can write components in plain JS and you can host the code in any server, e.g. Apache and IIS. I would still recommend learning and using JSX syntax as it just makes reading (and writing) components easy.hazardous– hazardous2017-03-28 07:40:08 +00:00Commented Mar 28, 2017 at 7:40
Add a comment
|
4 Answers
Yes you can create ReactJs app without nodejs and jsx.
But why you should use JSX?
JSX provides a very clean way to declare your UI component. You can use your familiar html syntax to declare your user interface. JSX gets trans-piled and converted to light weight objects representing ui elements. e.g You can use following way to declare a react js via
1.jsx
const App = () => {
return (
<div><h1>Welcome to React</h1></div>
);
}
or
2.without jsx
const App = function App() {
return React.createElement(
"div",
null,
React.createElement(
"h1",
null,
"Welcome to React"
)
);
};
You can guess which one is easy to write.
Why should I use nodejs to build browser projects?
nodejs is never required for running websites on browser. But nodejs ecosystem provides you thousands of npm modules to use in your projects without reinventing them just for your projects.
Without nodejs you could have used cdn providers and added <script> tag to use any library. But with the use of module bundlers and static assets generator such as browserify and webpack you can leverage the powser of nodejs ecosystem directly in your web project( which does not require nodejs runtime environment but rather run in browser).
Below snippet use <script> tag to make reactjs available without nodejs.
const App = () => {
return (
<div><h1>Welcome to React</h1></div>
);
}
ReactDOM.render(<App />, document.getElementById('app'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app">
</div>3 Comments
Anurag Dadheech
Awesome Explanation.. It help me a lot. Thanks WitVault
Anurag Dadheech
One more help please what is the best and open source editor available for react js
WitVault
It depends upon your taste :) I like vim a lot. You can also try sublime text or visual studio code (vs code).
Is node js required for React JS?
Let me split the answer into 2 parts:
In Production:
Server Side: Not needed unless you are using Node.js to create a web server and server your ReactJS files.
Client Side: Only browser is enough.
In development:
Server Side: Needed to download react libraries and other dependencies using NPM. Needed by webpack to create production bundles.
Client Side: Only browser is enough.
Is JSX required for React JS?
Developer can use HTML tags directly inside javascript if JSX(javascript + XML tags) is used. otherwise it becomes difficult to write code as well as to understand the code.
Hope this answer helps, Thank you
Comments
They're not strict requirements; you can include react with a script tag and use React.createElement.
That said, almost everyone uses node.js for development tooling and uses jsx. You can use any language for your api server, but you'll use a node.js server in development most of the time.
2 Comments
Anurag Dadheech
Actually on back end we are using rest API so i am so curious to know that can we make ajax call through React Code? and for data rendering purpose react js is enough?
Brigand
webpack-dev-server has a proxy option, or you can enable CORS on the api server during development.
Usage:
require('node-jsx').install()
If you want to use a different extension, do:
require('node-jsx').install({extension: '.jsx'})
If you want to couple with an additional transform (such as CoffeeScript), do:
var coffee = require('coffee-script');
require('node-jsx').install({
extension: '.coffee',
additionalTransform: function(src) {
return coffee.compile(src, {
'bare': true
});
}
});
If you want to use ES6 transforms available in the JSX tool
require('node-jsx').install({harmony: true})
1 Comment
Anurag Dadheech
but is jsx required ??