What do these instructions when cloning a GitHub repo mean? - reactjs

Here is a screenshot
For context, this a ReactJS project for a chrome extension for desktops. I'm just not entirely sure why I would have to change the name of these fields in the package.json.
The next instructions are to npm install the dependencies and then npm start the project and I understand those. It's the first two I don't understand.
I'm new to git cloning repositories so any help is appreciated. Thanks

The fields in package.json are just meta informations on your package.
If you would like to publish your project or even build it. The values from this file are used.

Related

Do I need to use npm init every time I create a new project?

I saw people explaining that npm init is necessary to create the package.json file. But in my last practice project I forgot to use npm init and the package.json file was created when I used npx create-react-app ...
Can someone help me to understand this, please?
Package.json file is a file where you specify the name of the application ,the version, the licence the dependancies the app needs etc.It is not necessary to do npm init before spinning up a new react project as it comes with a package json file that has the project dependancies and scripts to start/run the app .You can just modify the package json file that comes with the react app to fit your needs.

How to remove storybook from the react project

How to uninstall storybook from the react project ?
what is the command should I've to use to uninstall storybook?
They don't have a cli command to automate this.
Follow the following steps to remove storybook from your project
delete your stories
delete the .storybook folder
delete the scripts added to package.json
delete all storybook related dependencies from package.json
run yarn or npm to update the lockfile
Storybook doesn't know where your stories are until runtime, so it's hard to know exactly what to delete. Also users sometimes have multiple storybooks in 1 repo, so overall it's rather complicated. Adding files is usually safer then removing... we might remove something that the user can't recover from.
Here is a full discussion on github

What is the purpose of each file in the React Native file architecture?

I started to use React Native recently and, following the oficial docs, I initialized a project using npx react-native init ProjectName.
I'm not sure if the tools versions matters (probably yes), but i'm using npm version 6.13.7, react-native-cli version 2.0.1 and react-native 0.62.2. With that config, the file architecture i that get is the following:
I seached about it, but i not found an answer. So, can someone please explain to me what is the purpose of each file in this file architecture and which of these files can i remove?
Thank you in advance :D
Package.json
This file holds all of the dependencies of modules that your app is using and needed to install for running your app.
yarn.lock files yarn and package-lock.json
These two files hold the version of your dependencies yarn.lock package-lock.json is automatically generated for any operations where npm or yarn modifies either the node_modules tree or package.json. It describes the exact tree that was generated, such that subsequent installs are able to generate identical trees, regardless of intermediate dependency updates.
app.json
This file holds your application name etc.
babel.config.js
This file holds configs related to babel, Babels is a transpiler that transpile ES6 to ES5.
index.js
This is the entry point of your application form where your react-native code start executing.
EsLint and Prettier
These file related to maintaining the code indentation, Unused imports, extra, spacing, these files holds configs related to these things(EsLint and prettier are used to avoid above-mentioned things).
.watchMan
watchman watches the code changes when the packager is running, so this file have configs about this.
.Flow
Flow is been used for type checking so it holds the configs related to this.
node_modules
This folder holds all of the modules that your app is been using also lited down in your package.json.
And then there is Android(which holds native android code), IOS(which holds native ios code), and other JS files which holds code react-native js code.

How do I install my forked React modules into Symfony 4?

I'm trying install a React module into my Symfony 4 project. I already have the React entry point setup and running with webpack encore, and now I want to add a module to the React app.
The React module has a github and can be installed through npm, but how do I install it into Symfony? How do I deal with the webpack.config.js and package.json files in the package, since Symfony has its own for these files.
I have compared the webpack.config.js and it seems like the Symfony one can override the other one, since it already covers React entry point and babel setup. What do I do?
Another problem I have is that the original module was outdated, so I forked the project to my repository, updated it and filed a pull request. But since the PR is still pending, I wanted to install my fork for now, what do I need to do?
NPM supports installing dependencies directly from github (or other git host) https://docs.npmjs.com/cli/install so executing npm install github:<githubname>/<githubrepo>[#<commit-ish>] should work fine from the package.json directory.
The React module has a github and can be installed through npm, but how do I install it into Symfony? How do I deal with the webpack.config.js and package.json files in the package, since Symfony has its own for these files.
I'm not familiar with Symfony, does it manage your NPM dependencies after install? If so you will have to determine how to accomplish the npm install via Symfony.
Another problem I have is that the original module was outdated, so I forked the project to my repository, updated it and filed a pull request. But since the PR is still pending, I wanted to install my fork for now, what do I need to do?
As per above, just specify your git path until your PR is pulled, then update package.json to the original repo

Package dependencies in NPM and Bower

First time user of npm and bower. I am able to install packages correctly but I am not sure how the dependencies work? As an example, I did "npm install angularjs" in my application root which created a folder "node_modules/angularjs/" with some files in it. I can also see that there is a package.json file within the angularjs folder, and it looks like it has not been processed as there is numerous packages listed in it and not installed.
Long story short, should I install all these packages manually or is there a built in feature that npm/bower can also process these sets of dependencies?
UPDATE:
I greatly lack the ability to ask precise questions, I apologise to those who have answered and did not give the correct sypnosis.
What I expect to happen:
Using npm or bower, I want to clarify that if I do an install of one of their packages, will it automatically also install the new package's dependancies or would I need to do a npm/bower install for each of the packages.json or bower.json files manually?
What I did to try make it work:
Created folder D:\Websites\TestSite
Within the folder through CMD, I did a "npm init" and ran through the guide
I followed that up with a "npm install angularjs"
A new folder was created D:\Websites\TestSite\node_modules\angularjs and within this folder there was a "index.js" and package.json file
Opening index.js I get a "require("angular");" and module.exports = window.angular.
The package.json file contains a number of dependancies which has not been installed.
My Result:
As per my expectations, npm install in point 3 above did not install the dependancies of the package.json file after it installed angularjs.
I am not sure but I assume that the index.js file needs to be included in my html and that it required the requirejs library initiated? If this is the case, then requirejs (which I do not have installed on my site) should be a dependancy for angularjs to work, and should be installed prior to giving me the ability to try and initiate it?
Am I missing a step or misunderstanding the functionality of NPM/Bower? Thank you for your patience!
Npm and Bower are great tools for managing your dependencies, i'll try to make it clear in a few words.
In general npm is used for managing your back-end dependencies and Bower is responsible for your front end dependencies.
There are 2 config files:
package.json, here are listed your dependencies that are not used in browser(e.g. bower, grunt). To install all dependencies in package.json run npm install.
Bower.json, here will be listed your "in browser" dependencies(e.g angular, jQuery). Run bower install to install all dependencies listed here in bower_components
You can find a extended guide i wrote here.

Resources