CODEWITHSUNDEEP
javascripthtml
user2301515
user2301515

Reputation: 5117

ReactJS installation and overkill complexity

Can somebody give possible simple explanation how to install the ReactJS from the documentation.

What are importan JS files in package react-16.2.0? And what means:

C:\Users\myuser>npm install --save react react-dom
npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\myuser\package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\myuser\package.json'
npm WARN myuser No description
npm WARN myuser No repository field.
npm WARN myuser No README data
npm WARN myuser No license field.

+ [email protected]
+ [email protected]
added 18 packages in 4.919s

And I don't never understand why such excelent projects including reactjs are made in a many thousand files instead of one javascript file like jQuery. It makes the pacakge using too much difficult that i prefer not begin to learn such technologies. Such new programming tools have to be possible simple installable.

Upvotes: 1

Views: 197

Answers (1)

illiteratewriter
illiteratewriter

Reputation: 4333

You can run react without using Babel and Webpack by using CDN which is how you use jquery. You just have to add 

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

But the problem with this is you will not get JSX. Which means you'll have to write

return React.createElement('h1', null, 'Greetings, ' + this.props.name + '!');

which is vanilla javascript, instead of writing

return ( <h1>Greetings, {this.props.name}!</h1> );

The second code piece is JSX with which you can kind of write HTML within JS. Babel is a transpiler which converts JSX to vanilla javascript. It also adds ES6 features which some browsers might not support.

Webpack is a code-bundler. It bundles all the code together for production and also helps in live reloading of the code. If you're starting out in react i would recommend you use create-react-app. It basically does all the configuration and comes preinstalled with babel and webpack. Create-react-app

npm install -g create-react-app

create-react-app my-app
cd my-app/
npm start

The errors in your app is because you haven't initialised the folder, which can be done by running npm init before you install react and react-dom.

Upvotes: 2

Related Questions