[英]How does create-react-app tool work without babel or any build tool?
I usually use webpack and babel to configure my react project. 我通常使用webpack和babel来配置我的react项目。 Recently trying to use create-react-app.
最近尝试使用create-react-app。 The thing is when you create your app using create-react-app there is no babel or any build tools like gulp installed on the project as it seems in package.json file.
问题是,当您使用create-react-app创建应用程序时,在package.json文件中似乎没有babel或任何构建工具(例如gulp)安装在项目上。 So how does ES6 or other stuff work without these tools?
那么,没有这些工具,ES6或其他东西如何工作?
Stuff like babel and webpack are dependencies of the react-scripts
package, so even though they're not directly listed in your package.json
, they get downloaded by npm (or yarn) as part of installing the dependencies of the dependencies, and their dependencies. 像babel和webpack之类的东西是
react-scripts
包的依赖项,因此即使它们没有直接列在package.json
,它们也会被npm(或yarn)下载,作为安装依赖项及其依赖项的一部分依赖。
Here's the package.json
file for react-scripts
, and you can see all the dependencies there: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/package.json 这是
react-scripts
的package.json
文件,您可以在那里查看所有依赖项: https : //github.com/facebook/create-react-app/blob/master/packages/react-scripts/package.json
This effect is called a dependency tree , and you can end up with loads of libraries that you have no idea about. 这种效果称为依赖树 ,最终可能会导致您不了解的库负载。
More here: https://en.wikipedia.org/wiki/Dependency_grammar 此处更多内容: https : //en.wikipedia.org/wiki/Dependency_grammar
Well this is how i did it without using babel 好吧,这就是我不使用babel的方式
First the react js
首先是React js
https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js
https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js
Then create a jsx
File there you will have your react code. 然后在其中创建一个
jsx
文件,您将拥有自己的代码。
And last
最后
Normaly when you have babel you could call the react like this 通常,当您有通天塔时,您可以这样称呼反应
ReactDOM.render(<ShoppingList name="test" />, document.getElementById('content'));
But sense you dont have babel then the call would look like this instead 但是感觉到你没有通天塔,那么电话看起来像这样
ReactDOM.render(React.createElement(ShoppingList,{option}),document.getElementById('content'))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.