Menu
Just wondering how create-react-app uses .js files instead of .jsx for jsx markup. Is it because of the special webpack configuration? Btw, where can I find the webpack and babel configuration of my project created with create-react-app?
714
To use JavaScript inside of JSX, you need to surround it with curly braces: {} . This is the same as when you added functions to attributes. To create React components, you'll need to convert the data to JSX elements. To do this, you'll map over the data and return a JSX element.
It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript. JSX produces React “elements”.
React doesn't require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages. It means, It's not mandatory but you can think of creating presentational components with '.
There's nothing special about the file extensions; it's just a matter of what's being run through Babel. For example:
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
loader: 'babel',
query: {
presets: [
'react',
'es2015',
'stage-0'
],
plugins: [
["transform-decorators-legacy"],
]
},
}
This runs .js and .jsx through Babel with the React presets.
The Webpack and Babel configs are inside create-react-app.
You can eject them via:
npm run eject to get them "externalized", but only do it if you really want to.
https://github.com/facebookincubator/create-react-app#user-content-converting-to-a-custom-setup
142
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
