Tutorial- 6 What are JSX Restrictions? | React Tutorial for beginners | Learn React
In this tutorial, I have explained what are all the restrictions that JSX is having.
Learn what is JSX and restriction. React JS tutorial for beginners.
JSX Restrictions (JSX restriction)
1. className instead of class: class is a reserved word in JS. We already use it in React components class App extends Component. However, when the code is compiled, className is compiled to class.
2. All the elements we use in React components are managed by the React library.
3. A JSX expression must have one root element. With react16 this restriction has been loosened a bit. We are somehow able to return adjacent React elements now. However, it is best practice to wrap all elements within one root element, a div. This also makes sense since you want to style your components and add CSS classes that are responsible for your styling needs.
4. () after the return keyword are necessary in order that your JSX will actually be rendered to the page properly. It permits you to return nicely structured HTML across multiple lines without receiving errors.
#reactjs #jsxRestrictions #jsx #codinghacks
