How does create-react-app tool work without babel or any build tool?

Question

I usually use webpack and babel to configure my react project. Recently trying to use 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. So how does ES6 or other stuff work without these tools?

Answer 1

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.

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

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

Answer 2

Well this is how i did it without using babel

First the 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.

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'))