I've followed these steps but I still can't create a react-native app
for MacOS
Install Homebrew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Install Node
brew install node
Install watchman
brew install watchman
Finally install React Native CLI
npm install -g react-native-cli
/usr/local/Cellar/node/11.7.0/lib
└─┬ react-native-cli#2.0.1
├─┬ chalk#1.1.3
│ ├── ansi-styles#2.2.1
│ ├── escape-string-regexp#1.0.5
│ ├─┬ has-ansi#2.0.0
│ │ └── ansi-regex#2.1.1
│ ├─┬ strip-ansi#3.0.1
│ │ └── ansi-regex#2.1.1 deduped
│ └── supports-color#2.0.0
├── minimist#1.2.0
├─┬ prompt#0.2.14
│ ├── pkginfo#0.4.1
│ ├─┬ read#1.0.7
│ │ └── mute-stream#0.0.8
│ ├── revalidator#0.1.8
│ ├─┬ utile#0.2.1
│ │ ├── async#0.2.10
│ │ ├── deep-equal#1.0.1
│ │ ├── i#0.3.6
│ │ ├─┬ mkdirp#0.5.1
│ │ │ └── minimist#0.0.8
│ │ ├── ncp#0.4.2
│ │ └─┬ rimraf#2.6.3
│ │ └─┬ glob#7.1.3
│ │ ├── fs.realpath#1.0.0
│ │ ├─┬ inflight#1.0.6
│ │ │ ├── once#1.4.0 deduped
│ │ │ └── wrappy#1.0.2
│ │ ├── inherits#2.0.3
│ │ ├─┬ minimatch#3.0.4
│ │ │ └─┬ brace-expansion#1.1.11
│ │ │ ├── balanced-match#1.0.0
│ │ │ └── concat-map#0.0.1
│ │ ├─┬ once#1.4.0
│ │ │ └── wrappy#1.0.2 deduped
│ │ └── path-is-absolute#1.0.1
│ └─┬ winston#0.8.3
│ ├── async#0.2.10 deduped
│ ├── colors#0.6.2
│ ├── cycle#1.0.3
│ ├── eyes#0.1.8
│ ├── isstream#0.1.2
│ ├── pkginfo#0.3.1
│ └── stack-trace#0.0.10
└── semver#5.6.0
Use are using
react-native init
to create the project, right?
Otherwise, make sure it's in your PATH. See the following:
-bash: react-native: command not found
Related
npm audit
npm audit report
json5 <1.0.2
Severity: high
Prototype Pollution in JSON5 via Parse Method - https://github.com/advisories/GHSA-9c47-m6qq-7p4h
fix available via npm audit fix --force
Will install expo#1.0.0, which is a breaking change
node_modules/babel-preset-expo/node_modules/json5
find-babel-config <=1.2.0
Depends on vulnerable versions of json5
node_modules/babel-preset-expo/node_modules/find-babel-config
babel-plugin-module-resolver 2.3.0 - 4.1.0
Depends on vulnerable versions of find-babel-config
node_modules/babel-preset-expo/node_modules/babel-plugin-module-resolver
babel-preset-expo *
Depends on vulnerable versions of babel-plugin-module-resolver
node_modules/babel-preset-expo
expo >=14.0.0
Depends on vulnerable versions of babel-preset-expo
node_modules/expo
5 high severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
├─┬ #babel/core#7.20.12
│ └── json5#2.2.3 deduped
├─┬ #expo/json-file#8.2.35 extraneous
│ └── json5#1.0.2 extraneous
├─┬ babel-plugin-module-resolver#2.5.0 invalid: "5.0.0" from the root project
│ └─┬ find-babel-config#1.2.0
│ └── json5#0.5.1
├─┬ expo-splash-screen#0.17.5 extraneous
│ └─┬ #expo/prebuild-config#5.0.7
│ └─┬ #expo/json-file#8.2.36
│ └── json5#1.0.2
├─┬ expo#47.0.13
│ ├─┬ #expo/cli#0.4.11
│ │ ├─┬ #expo/json-file#8.2.36
│ │ │ └── json5#1.0.2
│ │ ├─┬ #expo/metro-config#0.5.2
│ │ │ └─┬ #expo/json-file#8.2.36
│ │ │ └── json5#1.0.2
│ │ └─┬ #expo/package-manager#0.0.57
│ │ └─┬ #expo/json-file#8.2.36
│ │ └── json5#1.0.2
│ ├─┬ #expo/config-plugins#5.0.4
│ │ └─┬ #expo/json-file#8.2.36
│ │ └── json5#1.0.2
│ ├─┬ babel-preset-expo#9.2.2
│ │ └─┬ babel-plugin-module-resolver#4.1.0
│ │ └─┬ find-babel-config#1.2.0
│ │ └── json5#0.5.1
│ └─┬ expo-constants#14.0.2
│ └─┬ #expo/config#7.0.3
│ └─┬ #expo/json-file#8.2.36
│ └── json5#1.0.2
├─┬ find-babel-config#2.0.0
│ └── json5#2.2.3 deduped
├── json5#2.2.3
└─┬ loader-utils#2.0.4 extraneous
└── json5#2.2.3 deduped
"npm audit fix --force" or npm install --save json5#latest command is not working as expected.
Hi everybody I don't really now if these are called "instances" of a package...anyway, my problem is this:
if I run yarn npm audit it shows me a problem with the package trim-newlines and suggests me to upgrade it to a version >=3.0.1 After the upgrade (with yarn up trim-newlines), I run npm ls trim-newlines and this is the output:
├─┬ lerna#3.22.1
│ └─┬ #lerna/version#3.22.1
│ └─┬ #lerna/conventional-commits#3.22.0
│ ├─┬ conventional-changelog-core#3.2.3
│ │ ├─┬ conventional-changelog-writer#4.1.0
│ │ │ └─┬ meow#8.1.2
│ │ │ └── trim-newlines#3.0.1
│ │ ├─┬ conventional-commits-parser#3.2.4
│ │ │ └─┬ meow#8.1.2
│ │ │ └── trim-newlines#3.0.1
│ │ └─┬ get-pkg-repo#1.4.0
│ │ └─┬ meow#3.7.0
│ │ └── trim-newlines#1.0.0
│ └─┬ conventional-recommended-bump#5.0.1
│ └─┬ meow#4.0.1
│ └── trim-newlines#2.0.0
└── trim-newlines#4.0.2
So it looks like there are multiple versions of it. I managed to upgrade the bottom one to latest version, but how do I upgrade the others?
I would like to ask for your opinion on the file structure and file names.
I am a beginning React programmer and I am interested in the opinion of experienced developers.
Is there anything you don't really like about the structure and the names themselves?
└── src
├── components
│ ├── layout
│ │ └── ThemeSwitcher.tsx
│ ├── movieDetail
│ │ ├── BackToHomepage.tsx
│ │ ├── FavoriteMovieButton.tsx
│ │ ├── MovieLoader.tsx
│ │ └── MovieTable.tsx
│ └── movieList
│ │ ├── MoviesList.tsx
│ │ ├── PaginationBar.tsx
│ │ └── SearchBar.tsx
├── img
│ ├── favorite-active.png
│ └── favorite-inactive.png
├── layout
│ ├── Header.tsx
│ └── Main.tsx
├── pages
│ ├── Detail.tsx
│ ├── Favorites.tsx
│ └── Homepage.tsx
├── redux
│ ├── movieDetail
│ │ ├── movieDetailSaga.tsx
│ │ ├── movieDetailSlice.tsx
│ │ └── movieDetailTypes.tsx
│ └── movieList
│ │ ├── moviesListSaga.tsx
│ │ ├── moviesListSlice.tsx
│ │ └── moviesListTypes.tsx
│ ├── rootSaga.tsx
│ └── store.tsx
├── styles
│ ├── abstracts
│ │ ├── mixin.scss
│ │ └── variables.scss
│ ├── base
│ │ ├── reset.scss
│ │ └── typography.scss
│ ├── components
│ │ ├── layout
│ │ │ └── ThemeSwitcher.scss
│ │ ├── movieDetail
│ │ │ ├── BackToHomepage.scss
│ │ │ ├── FavoriteMovieButton.scss
│ │ │ ├── MovieLoader.scss
│ │ │ └── MovieTable.scss
│ │ └── movieList
│ │ │ ├── MoviesList.scss
│ │ │ ├── PaginationBar.scss
│ │ │ └── SearchBar.scss
│ ├── pages
│ │ ├── Detail.scss
│ │ ├── Favorites.scss
│ │ └── Homepage.scss
│ └── main.scss
├── .d.ts
├── App.tsx
└── index.tsx
The following technologies were used in this particular project:
React create app
Typescript
Redux Toolkit
Redux Saga
Sass
Thank you for every suggestion.
https://reactjs.org/docs/faq-structure.html
"If you’re just starting a project, don’t spend more than five minutes on choosing a file structure. Pick any of the above approaches (or come up with your own) and start writing code! You’ll likely want to rethink it anyway after you’ve written some real code."
Your structure is fine. Like it's already said, do not overthink it.
Despite that, as you asked, I personally like to put components related to same feature together as you did.
I am trying to create a web React app that has multiple pages. I was able to configure babel so that it watches a single directory and output the vanilla Javascript files one directory above. The problem is that I have multiple folders with React files, and I do not want to manually have a watch command for each directory. I was wondering if I was able to do this with one command that watches all js/react/ directories and outputs to the respective js/ directories.
//node_modules have been excluded for brevity
.
├── app.js
├── environment.js
├── package-lock.json
├── package.json
├── public
│ ├── colab
│ │ ├── create
│ │ │ ├── index.html
│ │ │ ├── main.js
│ │ │ ├── project.js
│ │ │ └── style.css
│ │ ├── home
│ │ │ ├── index.html
│ │ │ ├── js
│ │ │ │ └── react
│ │ │ │ ├── main.js
│ │ │ │ └── project.js
│ │ │ ├── style.css
│ │ │ └── test.json
│ │ └── navbar
│ └── homepage
│ ├── css
│ │ └── style.css
│ ├── images
│ │ ├── bixby.png
│ │ ├── fortniteskill.png
│ │ ├── turtle.png
│ │ └── turtle2.jpg
│ ├── index.html
│ └── js
│ └── react
└── main.js
└── routers
├── alexa.js
├── api.js
├── colab.js
└── home.js
npx babel --watch . --out-dir js/ --presets react-app/prod
The folder structure of my Angular-Meteor-app looks like this:
.
├── client
│ ├── app
│ │ ├── auth
│ │ │ ├── login
│ │ │ │ ├── login.controller.js
│ │ │ │ ├── login.html
│ │ │ ├── register
│ │ │ │ ├── ...
│ │ │ ├── reset-password
│ │ │ │ ├── ...
│ │ │ ├── route.config.js
│ │ ├── lib
│ │ │ ├── app.module.js
│ │ │ ├── auth.module.js
│ │ ├── ...
│ ├── ...
├── ...
Please note that because of Meteor's load order I cannot put auth.module.js under the auth directory but have to place it under the lib directory. Otherwise Angular would complain that the auth module could not be injected when used in login.controller.js. (Files in subdirectories are loaded before files in parent directories, all files in lib are moved before everything else.)
What I would like is to move auth.module.js in the auth folder, so I have all files of my auth module in the right place:
.
├── client
│ ├── app
│ │ ├── auth
│ │ │ ├── login
│ │ │ │ ├── login.controller.js
│ │ │ │ ├── login.html
│ │ │ ├── register
│ │ │ │ ├── ...
│ │ │ ├── reset-password
│ │ │ │ ├── ...
│ │ │ ├── auth.module.js
│ │ │ ├── route.config.js
│ │ ├── lib
│ │ │ ├── app.module.js
│ │ ├── ...
│ ├── ...
├── ...
Any idea how to manage this?
I think you've got at least two options:
Make client/auth flat, so that the lexicographic ordering will load auth.module.js before login.controller.js.
│ │ ├── auth
│ │ │ ├── auth.module.js
│ │ │ ├── login.controller.js
│ │ │ ├── login.html
│ │ │ ├── ...
Or use yet another lib sub-directory
│ │ ├── auth
│ │ │ ├── lib
| │ │ │ ├── auth.module.js
│ │ │ ├── login
│ │ │ │ ├── login.controller.js
│ │ │ │ ├── login.html
│ │ │ ├── ...
Of course, one could argue that your code should not depend in the load order, i.e., you should only use the auth code once everything is loaded, e.g., in oMeteor.startup or onCreate of templates.