I just started learning React. Oddly, it took a while to wrap my head around JSX and where it fits in the programming terminology I've been studying over the past few weeks.
JSX seems to be one of those things that experienced developers get, but can't explain struggle to explain to others. But for us newbies for whom everything in programming is completely new, I hope this short post will provide some clarity.
The short version:
JSX is an XML-like syntax extension of JavaScript.
In English:
JSX is essentially a way to write HTML code in your JavaScript file. This makes it easy to create React elements (or components
Where that fits:
React is a JavaScript library for creating user interfaces quickly. React is built completely out of JavaScript code. It creates small sections of reusable code, called components.
This lets you split the completed user interface into independent, reusable pieces, that are each saved in their own .js file.
What it looks like:
- Each .js file in your React app will have a render() method that returns one JSX element
class randomComponent extends ReactComponent {
render() {
return (
<div> </div>
)
}
export default randomComponent
Meanwhile your App.js file will include something like this:
class App extends React.Component {
render(){
return(
<div className="App">
<randomComponent></randomComponent>
</div>
Fortunately FreeCodeCamp.org has a React great tutorial that covers the JSX syntax. Check it out!
Top comments (2)
@_developit , the creator of Preact has an old but still good post about this, WTF is JSX.
Nice! I'll check it out