请问js与jsx有什么区别?
网友回复
1.js全称javascript,一种解释性脚本语言,能直接在浏览器端解释执行的,那么javascript与java什么关系呢,他们两没任何关系。
2.jsx全称JavaScript XML,一种构建react组件的template类XML语法,如果需要在浏览器端执行,
可以通过两种方式,
第一种通过webpack将jsx转换成js,
第二种,通过babel
示例代码,以下代码通过babel可直接在浏览器中执行jsx代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.17.1.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.17.1.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babel.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> function FormattedDate(props) { return <h2>现在是 {props.date.toLocaleTimeString()}.</h2>; } class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } componentWillUnmount() { clearInterval(this.timerID); } tick() { this.setState({ date: new Date() }); } render() { return ( <div> <h1>Hello, world!</h1> <FormattedDate date={this.state.date} /> </div> ); } } function App() { return ( <div> <Clock /> <Clock /> <Clock /> </div> ); } ReactDOM.render(<App />, document.getElementById('example')); </script> </body> </html>