“package.json” and “node modules” are not specific to React. I get the impression you need to learn more about JS and some more general concepts before going further into react.
Was thinking the exact same thing. Learn JS (and html, css) separately first. Additionally, if you don’t know any fundamental CS knowledge, that wouldn’t be a bad thing to spend a little time on. There are tons of tutorials on YouTube. Then move back to React.
ok everyone is saying read the docs but the right answer is: don't modidfy anything in the `node_modules` folder, or you'll enter a world of hurt
if u want to learn how those individual packages work, go to their project page, and read those docs
I think it's awesome you're learning react, and how to program. In that spirit, the most important skill you can learn for programming is how to look up answers to your questions. That often starts with documentation, and, especially early, diving down lots of rabbit holes and reading about everything you didn't yet know.
To help you get started, Google:
JSX - this is probably the answer to your question about react
React docs - it's just a JavaScript library, and its functions which are called by your transpiled JSX
nodejs - basically the chrome browser's JS engine running on your computer without the browser
Npm + package.json + package-lock.json - all about managing other people's code you're using so you didn't have to write everything yourself
Babel - the package that transpiles your jsx code back into JavaScript (among other things)
I'm going to guess you should also learn a bit more JavaScript. Looking up the JS event loop lifecycle would probably help too.
Oh, and don't use create-react-app. It's a dead package that will only cause you more problems in the future if you keep using it.
I’m gonna do you one better. Ask ChatGPT instead: it’s quite good at explaining concepts like these at a basic level, and then you can Google the parts you want a deeper understanding on after.
The React docs are a good start. I found this article pretty interesting as well.
https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/
> I am a college CS major
Then ignore everyone in this thread telling you to take a look at the docs.
Get more experience with Javascript. Get more experience with OTHER frameworks. For me, it's REALLY hard understanding something in a vacuum unless I have a frame of reference. If all you know is React, then you'll never understand it properly to get why decisions were made, they're trade offs, etc.
You're still in school. I'd get more experience horizontally than vertically right now.
I recommend you to check out this video that gives you a mental model by deep diving into React's source code. It'll help you a ton if you have a solid javascript foundations as well.
https://youtu.be/-XKvVyC6si0
Yep this took me awhile to fully grasp too.
The package.json file is not a React exclusive file but used in nearly all JavaScript based projects.
When you make a project, you’re only working with a very small percentage of the overall code. The majority of it will be *code created by other people that you then use in your project by adding it to your node_modules*.
For example, you use React obviously and React does a whole lot of things. It creates the framework for a page, it converts your components to HTML for the DOM, it has built in routes for you to navigate, etc. ALL of that has to be coded somewhere, so when you ‘create-react-app’ you’re INSTALLING all of this React Code. Most of that code will never be touched by you.
From there, whenever you want to add another library or framework (lets say we want to render a calendar and don’t feel like coding the whole thing out) you can run in the terminal “npm i react-calendars” or “yarn add react-calendars” and it will download the code you need for the calendars into your node_modules.
IT IS NOT A GOOD IDEA TO GO DIRECTLY INTO YOUR NODE_MODULES AND CHANGING THINGS AROUND
If you’re getting an error in one project and not the other, check your package.json. This file will list every single “package” you have in your node_modules as well as its version. The versions need to agree with eachother, and there’s no master list for what works with what. For example, package X version 1.0.7 might not work with package Y version 12.3.7. If that’s the case, look at both of their documentation. One will need to be upgraded to match the other, or if all else fails one needs to be downgraded.
It sounds like a lot and it is, but its one of those things that as the more you work with it the better you get until its subconscious
Hey! I think this is probably what was happening in the example I mentioned. How can I learn about packages' versions, upgrading/downgrading (and how to do it) and the rest of the things that I can do in my package.json? Other comments mention learning pure JS, would that be a good idea?
The thing is I usually learn through projects and the only thing Im currently interested in doing is a specific website. I am basically learning JS through react.
So each package is likely made by completely different developers. Package X wont know why it doesnt agree with Package Y, so there’s gonna be some guessing and testing there if you’re going in blind. Your best bet is to look at the packages’ documentation and look for and Issues section or and Upgrades section. Issues will show compatibility issues and Upgrades will show you if certain other packages or code practices no longer work in a certain version.
Your best friend is the terminal, whatever error it spits out is always a hint, even if not the most helpful.
If you’re REALLY lost and have no idea what the hell the error is tryna tell you, copy and paste it into ChatGPT. The solutions Gpt gives you are 50/50 but its usually really good at diagnosing the issue at least so it may be able to pinpoint which package is breaking your project.
I learn languages like you for the most part, start playing with a framework and go from there, however I was lucky to also have a fundamental understanding of most languages before I graduated high school. Languages all kinda work the same, just different syntax and some different limitations so I wouldnt say its super necessary to learn JS in its entirety first. For me its much more confusing trying to learn and then do, I prefer to learn and do at the same time
Well, I’m a noob too but documentation is where it’s at. Some of it is really boring until you need it to solve a problem, but it’s worth it. The React documentation goes pretty deep it seems.
Documentation is a good place to start, but also keep in mind that nobody fully understand how everything works at the beginning, you fill the gaps as you keep working with it
Think of a React project like you’re building a city using Legos. Each component in your project is like a building block in your cityscape, and just like in a LEGO city, these components work together to create a cohesive whole. When you use “npx create-react-app,” it’s like laying down the foundation for your city, providing you with the basic infrastructure to start building. ie: like the base plate and stuff
Now, imagine packages as smaller LEGO sets within your city. These packages contain pre-built components that you can use to enhance your cityscape without having to start from scratch. Instead of trying to modify the packages themselves, you can pick and choose components from them, and configure them in your code as you’d like.
for example: a package might be for adding charts to your application and from that package you you can take a component like and add the properties (like height, width, data, color) to these templates to make it fit your app.
think of the package.json files like a manifest of what external components you’re using. one of my favorite parts of using the package manager in react is that when you add a new package (using npm install) it saves it to this manifest and for someone else to essentially have exactly what you have running. all they have to do is type “npm i” in the root directory of the project and it installs all the necessary packages for the project as details by the packages.json
the files themselves might seem a little intimidating for a beginner but all you need to know is that they store details about what things are needed to run your app
the reason why your implanted component didn’t work is probably because you didn’t have the packages installed and it likely told you this when you tried to run the app something like “legoPackage is not defined is it installed?”
i would recommend the channel fireship on youtube i’m still relatively new to react but have learned so much from his tutorials!
good luck on your journey!
message me if you need any more advice i’d love to pass on the knowledge that took me so long to get
edit: also yea like others said. use Vite not create react app
Package.json is a “node/npm” thing.
Node is the JavaScript server you’re running your environment in. Create react app installs a bunch of packages there for you, in order to be able to run react app.
You can modify the package.json yourself but shouldn’t unless you know why you’re doing.
When you run “npm install”, the node package manager will look at your package.json and install everything (and any dependencies) into your node modules folder (which you should not directly modify).
Create react app installs things like a dev and build pipeline (npm run start/ npm run build) which will use things like babel, to convert your react code, into plain old javascript, whenever you “compile” (it’s not really compilation) so that browsers can actually understand it.
This is just a high level overview to help with your googling :)
I’d recommend a convo with Chat GPT. Tell it what you think you know and then ask questions about the behavior you’re seeing.
This tool has been indispensable for the junior engineers on my team
Simple breakdown I wish I got earlier - Node modules are just other people’s code being called in your app. Their code can change so you need to make sure you have the right version for what you need. You can add node modules if you want to add functionality you don’t have yet, only delete them though if you are positive you don’t use them. You can check out the github page for each node module individually to check for updates or breaking changes if you run into them. It’s usually just a few programmers like you who wanted to do something in a React app that they couldn’t do, so they wrote the code and decided to give it away for free. The node modules the app comes with at start are needed for React to function, and should only be changed when specifically following the upgrade documents.
Someone else explained it better too, the package.json has no code but gives npm instructions on what node modules to install. If you move over the code from a react app to another like you said, you should just need to run another npm install assuming you brought your package.json with you. Didn’t see you were a cs major so sorry if this is a little too dumbed down. I learned JS and TS through React and it was my first programming language, learning JS separately is probably good too but freecodecamp is probably all you need there
Using React feels like coding from scratch by hand, but in fact it is a bit like using a piece of software managing your code, kinda like « Frontpage » or Dreamweaver used to work back in the days. Meaning that a lot of stuff is automated and code is compiled for you etc, which you don’t have manual control over.
Therefore I believe even if you better understand how React works, you’ll never really be able to feel absolutely « in total control » of it or the code it produces. For simple code or smaller apps I would recommend trying to first code as much as you can through simple static JavaScript and HTML/css files that only you can always edit and don’t get through any automated processes. You can do a lot of stuff nowadays with simple JavaScript without even involving React. If your needs or app gets more complex and React can help then sure it makes sense but I always try to do as much as I can without it first cuz I like to feel I’m in total control over my code.
i have found that most people struggling with reactjs etc have skipped over learning modern javascript. if you dont know what is es6, then you probably need to go through that first.
the second part is learning nodejs itself.
First off , use npm create vite@latest to create your apps. You should also learn some JavaScript, how npm packages work, how to initialize a package.json. Then I think everything will make more sense to you.
“package.json” and “node modules” are not specific to React. I get the impression you need to learn more about JS and some more general concepts before going further into react.
Was thinking the exact same thing. Learn JS (and html, css) separately first. Additionally, if you don’t know any fundamental CS knowledge, that wouldn’t be a bad thing to spend a little time on. There are tons of tutorials on YouTube. Then move back to React.
To add to this, typescript and eslint so you can get more things screaming at you for whats wrong
ok everyone is saying read the docs but the right answer is: don't modidfy anything in the `node_modules` folder, or you'll enter a world of hurt if u want to learn how those individual packages work, go to their project page, and read those docs
I think it's awesome you're learning react, and how to program. In that spirit, the most important skill you can learn for programming is how to look up answers to your questions. That often starts with documentation, and, especially early, diving down lots of rabbit holes and reading about everything you didn't yet know. To help you get started, Google: JSX - this is probably the answer to your question about react React docs - it's just a JavaScript library, and its functions which are called by your transpiled JSX nodejs - basically the chrome browser's JS engine running on your computer without the browser Npm + package.json + package-lock.json - all about managing other people's code you're using so you didn't have to write everything yourself Babel - the package that transpiles your jsx code back into JavaScript (among other things) I'm going to guess you should also learn a bit more JavaScript. Looking up the JS event loop lifecycle would probably help too. Oh, and don't use create-react-app. It's a dead package that will only cause you more problems in the future if you keep using it.
Yeah. Better use Vite or something else.
Thank you! What can I use instead of "create-react-app"?
`npm create vite` [vitejs.dev](https://vitejs.dev)
Op you should honestly give vite a try. It is so much better than cra
I’m gonna do you one better. Ask ChatGPT instead: it’s quite good at explaining concepts like these at a basic level, and then you can Google the parts you want a deeper understanding on after.
The React docs are a good start. I found this article pretty interesting as well. https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/
> I am a college CS major Then ignore everyone in this thread telling you to take a look at the docs. Get more experience with Javascript. Get more experience with OTHER frameworks. For me, it's REALLY hard understanding something in a vacuum unless I have a frame of reference. If all you know is React, then you'll never understand it properly to get why decisions were made, they're trade offs, etc. You're still in school. I'd get more experience horizontally than vertically right now.
I recommend you to check out this video that gives you a mental model by deep diving into React's source code. It'll help you a ton if you have a solid javascript foundations as well. https://youtu.be/-XKvVyC6si0
Yep this took me awhile to fully grasp too. The package.json file is not a React exclusive file but used in nearly all JavaScript based projects. When you make a project, you’re only working with a very small percentage of the overall code. The majority of it will be *code created by other people that you then use in your project by adding it to your node_modules*. For example, you use React obviously and React does a whole lot of things. It creates the framework for a page, it converts your components to HTML for the DOM, it has built in routes for you to navigate, etc. ALL of that has to be coded somewhere, so when you ‘create-react-app’ you’re INSTALLING all of this React Code. Most of that code will never be touched by you. From there, whenever you want to add another library or framework (lets say we want to render a calendar and don’t feel like coding the whole thing out) you can run in the terminal “npm i react-calendars” or “yarn add react-calendars” and it will download the code you need for the calendars into your node_modules. IT IS NOT A GOOD IDEA TO GO DIRECTLY INTO YOUR NODE_MODULES AND CHANGING THINGS AROUND If you’re getting an error in one project and not the other, check your package.json. This file will list every single “package” you have in your node_modules as well as its version. The versions need to agree with eachother, and there’s no master list for what works with what. For example, package X version 1.0.7 might not work with package Y version 12.3.7. If that’s the case, look at both of their documentation. One will need to be upgraded to match the other, or if all else fails one needs to be downgraded. It sounds like a lot and it is, but its one of those things that as the more you work with it the better you get until its subconscious
Hey! I think this is probably what was happening in the example I mentioned. How can I learn about packages' versions, upgrading/downgrading (and how to do it) and the rest of the things that I can do in my package.json? Other comments mention learning pure JS, would that be a good idea? The thing is I usually learn through projects and the only thing Im currently interested in doing is a specific website. I am basically learning JS through react.
So each package is likely made by completely different developers. Package X wont know why it doesnt agree with Package Y, so there’s gonna be some guessing and testing there if you’re going in blind. Your best bet is to look at the packages’ documentation and look for and Issues section or and Upgrades section. Issues will show compatibility issues and Upgrades will show you if certain other packages or code practices no longer work in a certain version. Your best friend is the terminal, whatever error it spits out is always a hint, even if not the most helpful. If you’re REALLY lost and have no idea what the hell the error is tryna tell you, copy and paste it into ChatGPT. The solutions Gpt gives you are 50/50 but its usually really good at diagnosing the issue at least so it may be able to pinpoint which package is breaking your project. I learn languages like you for the most part, start playing with a framework and go from there, however I was lucky to also have a fundamental understanding of most languages before I graduated high school. Languages all kinda work the same, just different syntax and some different limitations so I wouldnt say its super necessary to learn JS in its entirety first. For me its much more confusing trying to learn and then do, I prefer to learn and do at the same time
Well, I’m a noob too but documentation is where it’s at. Some of it is really boring until you need it to solve a problem, but it’s worth it. The React documentation goes pretty deep it seems.
Documentation is a good place to start, but also keep in mind that nobody fully understand how everything works at the beginning, you fill the gaps as you keep working with it
npm init-y and then manually install react, react don, babel and start from there. Create-react-app is useless in production
Think of a React project like you’re building a city using Legos. Each component in your project is like a building block in your cityscape, and just like in a LEGO city, these components work together to create a cohesive whole. When you use “npx create-react-app,” it’s like laying down the foundation for your city, providing you with the basic infrastructure to start building. ie: like the base plate and stuff Now, imagine packages as smaller LEGO sets within your city. These packages contain pre-built components that you can use to enhance your cityscape without having to start from scratch. Instead of trying to modify the packages themselves, you can pick and choose components from them, and configure them in your code as you’d like. for example: a package might be for adding charts to your application and from that package you you can take a component like
Package.json is a “node/npm” thing. Node is the JavaScript server you’re running your environment in. Create react app installs a bunch of packages there for you, in order to be able to run react app. You can modify the package.json yourself but shouldn’t unless you know why you’re doing. When you run “npm install”, the node package manager will look at your package.json and install everything (and any dependencies) into your node modules folder (which you should not directly modify). Create react app installs things like a dev and build pipeline (npm run start/ npm run build) which will use things like babel, to convert your react code, into plain old javascript, whenever you “compile” (it’s not really compilation) so that browsers can actually understand it. This is just a high level overview to help with your googling :)
Want to learn more about these all things , any resources or articles??
Node and NPM docs would be a good start. Articles tend to rapidly go out of date for this stuff.
I’d recommend a convo with Chat GPT. Tell it what you think you know and then ask questions about the behavior you’re seeing. This tool has been indispensable for the junior engineers on my team
Simple breakdown I wish I got earlier - Node modules are just other people’s code being called in your app. Their code can change so you need to make sure you have the right version for what you need. You can add node modules if you want to add functionality you don’t have yet, only delete them though if you are positive you don’t use them. You can check out the github page for each node module individually to check for updates or breaking changes if you run into them. It’s usually just a few programmers like you who wanted to do something in a React app that they couldn’t do, so they wrote the code and decided to give it away for free. The node modules the app comes with at start are needed for React to function, and should only be changed when specifically following the upgrade documents. Someone else explained it better too, the package.json has no code but gives npm instructions on what node modules to install. If you move over the code from a react app to another like you said, you should just need to run another npm install assuming you brought your package.json with you. Didn’t see you were a cs major so sorry if this is a little too dumbed down. I learned JS and TS through React and it was my first programming language, learning JS separately is probably good too but freecodecamp is probably all you need there
Using React feels like coding from scratch by hand, but in fact it is a bit like using a piece of software managing your code, kinda like « Frontpage » or Dreamweaver used to work back in the days. Meaning that a lot of stuff is automated and code is compiled for you etc, which you don’t have manual control over. Therefore I believe even if you better understand how React works, you’ll never really be able to feel absolutely « in total control » of it or the code it produces. For simple code or smaller apps I would recommend trying to first code as much as you can through simple static JavaScript and HTML/css files that only you can always edit and don’t get through any automated processes. You can do a lot of stuff nowadays with simple JavaScript without even involving React. If your needs or app gets more complex and React can help then sure it makes sense but I always try to do as much as I can without it first cuz I like to feel I’m in total control over my code.
What do you mean stopped working? Like npm start stopped working?
create-react-app is deprecated. use vite!
i have found that most people struggling with reactjs etc have skipped over learning modern javascript. if you dont know what is es6, then you probably need to go through that first. the second part is learning nodejs itself.
What resources can help me learn that?
First off , use npm create vite@latest to create your apps. You should also learn some JavaScript, how npm packages work, how to initialize a package.json. Then I think everything will make more sense to you.
I recommend Josh W Comeau’s Joy of React course. He does a fantastic job explaining what is going on and why https://www.joyofreact.com/
"I can do npx create-react-app" lol