ReactJS是一个UI框架。要学习ReactJS,您不需要nodejs、npm或其他花哨的工具。只需要一个库脚本文件,您就可以将该库插入到简单的index.html中并开始编写javascript代码。请注意,因为您是在Web上编写,所以需要两个脚本(就像您以前一样)。
<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin="anonymous"></script>
这里是一个只使用纯JavaScript和React的示例1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="root"></div>
<script>
function Hello(props) {
return React.createElement('h1', null, `Hello ${props.text}`);
}
ReactDOM.render(
React.createElement(Hello, {text: 'World'}, null),
document.getElementById('root')
);
</script>
</body>
</html>
如果你仔细观察,例子1中的所有内容都是JavaScript,脚本中没有HTML,只有纯JavaScript。React和ReactDom被插入到我的窗口中,所以我可以全局访问它们。这很好用,我可以继续这样做,但是React引入了一种将HTML插入JavaScript(JSX)的方法,以便我们可以写更少的JavaScript(因为我们都是懒惰的开发者)。那么我们如何编写JSX呢?因为浏览器不理解JSX,它们只能理解JavaScript。
好的,我们将使用一个叫做独立库(babel standalone)的工具。它会将你在JSX和JavaScript中编写的所有代码转译(将所有代码转换为浏览器可读取的JavaScript),并将其转化为普通的JavaScript文件。在此过程开始之前,您需要让独立库知道您要转译哪些JavaScript文件,因此您需要像这样附加type="text/babel"
:<script type="text/babel">....</script>
。一旦DOM加载完成,独立库将转译您告诉它要转译的脚本,并将纯JavaScript插入到您的DOM中,然后您的JavaScript将运行。
是的,我说了... 1.首先将您的代码转译 2.然后将其加载到DOM中 3.然后我的JavaScript运行。这正是为什么我们不应该在生产中使用它的原因,因为使用ReactJS会出现巨大的延迟。这就是现代工具的作用。
以下是在浏览器上使用JSX和React的例子2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Hello(props) {
return <h1>Hello {props.text}</h1>;
}
ReactDOM.render(
<Hello text="World" />,
document.getElementById('root')
);
</script>
</body>
</html>
现在我们已经插入了JSX,如果我想要使用最新的ES6及以上功能怎么办?浏览器还不支持它们。独立库再次提供了帮助。该库使您能够添加插件来将最新的JavaScript或JSX或其他语言编译成JavaScript。
以下是一个使用插件在浏览器上运行ES6和JSX的示例3:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="root"></div>
<script data-plugins="transform-es2015-modules-umd" type="text/babel">
class Hello extends React.Component {
render() {
return <h1>Hello {this.props.text}</h1>;
}
}
ReactDOM.render(
<Hello text="World" />,
document.getElementById('root')
);
</script>
</body>
</html>
所有这些工具,如 babel、webpack,都有助于使您的应用程序准备好投入生产,但为了学习,首先最好不使用额外的工具来理解 react ,然后再慢慢开始扩展。
** 注意:所有示例仅供学习和原型制作之用,不适用于生产用途,如果您阅读完我的整个答案,您就会知道原因。
python -m SimpleHTTPServer
。 - Andy Ray