General question about React

JavaScript
1

I read couple of tutorials beside working on fcc react challenges of how to do? react in localhost. Many of them include installing nodejs along with react-dom and react-prop libraries. And i stumbled across one where there is no installing of any kind, just including cdn and your own js.
Here’s a example:
react7.html:

<!--FCC REACT-->
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react.js"></script>
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>-->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/prop-types/prop-types.min.js"></script>
<script src="react7.js" type="text/babel"></script>
<meta charset="UTF-8" />
</head>
<body>

<div id="demo"></div>

</body>
</html>

react7.js

const Items = (props) => {
	return <h1>Current Quantity of Items in Cart: {props.quantity}</h1>
};

Items.defaultProps = {
	quantity: 1
};

/*Items.propTypes = {
	quantity: PropTypes.number 
};*/
PropTypes.checkPropTypes(Items.propTypes, Items.props, 'quantity');
class ShoppingCart extends React.Component {
	constructor(props){super(props);}
	render(){
		return <Items />
	}
};

ReactDOM.render(<Items/>,document.getElementById("demo"));

Question is: Since most tutorials say to install node and these additional libraries, i presume it’s a correct way of doing this, unlike stated above?

1 Like
2

When I got started with React I installed node and git so I could use something called “create-react-app” which makes the skeleton outline of your app for you. Then it hosts a private local server for the app so you can see your edits as you make them. I think this is a good way to do it.

3

The reason you install Node is so that you can use Npm or yarn to install a bunch of other packages you might want.

Either method is fine, because the goal is just to get JS library on your page to use.

The npm method is great because you can handle dozens of dependencies that you might find useful. However, setting it up can mean needing to learn Webpack or something similar - which has a while learning curve of its own!

If you just want to focus on learning React first, using CDN hosted versions is great because it allows that focus.

Eventually, you are most likely to only use React with npm professionally.

4

As i understood, an “nmp” is linux thingy? Btw i tried installing using win cmd after installing node and during installation it said(as far i saw) is successful for aforementioned libraries …

5

No, there isn’t a correct way. The one you show above, that’s easier. Setting up Node and installing stuff etc add lots of complexity, and for learning and for simple small apps it’s not too necessary, On the other hand, there are also loads of advantages to installing a Node environment and managing the dependency/build/server side of your development environment that way.

You alsp gotta understand most of the people writing the articles are working programmers, and using Node to set things up is both necessary for them in their jobs and second nature

NPM = Node Package Manager. It’s how you manage package installs/uninstalls/updates etc for a Node project. It’s not platform specific.

6

So, you advice is: First do with cdn’s. Then when i know what i’m doing in React, try to do the same using Node and installing libraries?

7

Either is fine: CDN is easier at first but slightly limiting longer term, Node/NPM is harder at first but it’s more useful long term, necessary to know when writing code a professional setting. I would go CDN route personally, because then you can concentrate on learning React rather than React + NPM, but it’s equally valid to bite the bullet and learn that, it’s not too hard

1 Like
8

If you’re comfortable using the links, then do that. You can easily graduate to the NPM and create-react-app method later.

9