I'm just starting out in Reactjs.
I have a RedHat Linux VM.
I've installed nodejs and created a simple reactjs application:
npx create-react-app my-first-project
My first project works OK.
Now I have found this great reactjs package with a demo:
https://github.com/TarikHuber/material-ui-filter
I want to install the demo part of this package that consists of index.css, index.html, app.js, index.js
How would I go with this?
Where do I put this new code relative to my-first-project?
How do I call this new code?
The package I think calls redux so I assume I will install this first.
Thanks.
You should learn how npm works. If you find some cool package and you want to use it then you have to install that package. There is a installation command on Readme file on that github repo. Install package via npm install material-ui-filter then you can just use the html file on demo project.
Related
I'm developing an npm package for custom React Hooks. And using yarn for package management. The custom hooks are in the src directory, and to prevent posting the wrong code to npm, I've created a new demo folder locally at the same level as src.
To test my hooks code locally, I bundled my hooks and used yarn link to link it in my demo project smoothly as if I installed it from the registry. And next I run yarn start in my demo folder to run my test project. But it reminded me Invalid Hook Call Warning in the Chrome console.
After reading this article I knew that it is because I used duplicate React, So I tried to this command: yarn link ../node_modules/react but it just told me
error No registered package found called "../node_modules/react".
info Visit https://yarnpkg.com/en/docs/cli/link for documentation about this command.
But when I tried to use npm link ../node_modules/react there is no error reported. I can start my test project smoothly.
But here comes the problem: I am using yarn for package management and it has its own lock file yarn.lock. If I want to run my test project, I had to run npm link ../node_modules/react, this step will generate a npm lock file which is a Redundancy for me.
So how can I use yarn link ../node_modules/react instead of npm link ../node_modules/react to link a same version React?
Here is the whole repository
I will assume this question is still relevant because I stumbled upon it while looking for the answer myself. I managed to figure it out eventually.
The yarn link docs state the following:
This command is run in the package folder you’d like to consume.
In order to create a link for React, you have to cd ../node_modules/react and then yarn link while in that directory. You can then use yarn link react from the other side to consume the linked package.
For the record, it doesn't look like it matters which side you create the link from (the library or the consumer) as long as the other side makes use of it.
So i created a react app using the create-react-app folder-name from cmd
So how do i add bootstrap and other libraries to launch on npm start i.e. when i launch the app. Do i install them with bower install or with npm install. I am so new to this i don't even get how are all the scdripts from the framework are launching with idnex.html. I know that the question is probably somewhat retarded, but idk how to even ask it correctly.
You can add any libraries you want utilizing npm and ES6 Import
Just Import anything you want in App.js.
Here is step by step guide on adding bootstrap to your project.
I have some code that I've written in a RN app, and I want to open-source and post it on npm for others to consume. What's the best workflow for writing a pure JS React Native library? Thanks!
So these are the steps on how to create a re-usable React Native library and publish it to NPM:
Create an account at https://npmjs.com
Open command line terminal, type:
npx create-react-native-library your-library-name-here
cd your-library-name-here
npm login
npm install --save react-native-builder-bob
npm install
npx react-native-builder-bob build
npm publish
You can verify at your https://npmjs.com home page that this library is now there. Now, to test it you have to create another React Native application, which will depend on the newly created library:
Open terminal
npx react-native init MyTestApp
cd MyTestApp
npx install --save your-library-name-here
Modify App.js main code entrypoint and make a call to a method in your library that multiplies two numbers to prove that the library works.
Open another terminal, go to project root folder and type:
npx react-native start.
From the main terminal at step#1, type:
npx react-native run-android
These steps needs a properly installed Android Studio IDE and node (Nodejs). The step to create the react-native library already has one callable pre-made test method called multiply(a, b).
If your module is pure JS, you can simply follow these steps to publish to npm:
https://docs.npmjs.com/getting-started/publishing-npm-packages
Essentially, you are exporting a component from your main file (index.js). This should all be defined in your package.json
A RN example: https://github.com/ugiacoman/react-native-calendar
I'll be publishing this package to npm soon :)
If your module requires native code, you can use this generator to setup your project:
https://github.com/frostney/react-native-create-library
I am learning React. I wanted to create new project using React/React router/ES6. I read tones articles about setuping project using grunt/webpack etc. I tried to setup using simply npm. I believe it is possible to do this without of tons of configuration and adding many external libraries. But I don't know how :) Can someone give me some articles how to setup project using only npm?
Thanks for all answers
Best easy way to start react project
install react-create app by using following command
//install react create app globally to the system
npm install -g create-react-app
// generate project
create-react-app appName
cd my-app/
npm start
I'm trying to create a React project in WebStorm 2016.3.1
It's asking me for a create-react-app but I have no idea what that is and I can't find any reference on Google.
What is it and where can I find the value?
You need to install create-react-app npm module, before you use this feature.
npm install -g create-react-app
You can read more about this feature on the official release blog of WebStorm.
Excerpt from the documentation :
Make sure that you have create-react-app installed globally on your computer, for that run npm install -g create-react-app. Then to start your new project, double click on the start task in the npm tasks tool window to run it. That’s it!
I had ie installed create-react-app globally using yarn and webstorm failed to find it. Then I used npm, not to mention globally and its working like a charm.
TL;DRNo need to install anything. Just enter npx create-react-app in the create-react-app field & it should work like a pycharm, I mean charm :)
Side note: npx is pre-bundled with npm since npm version 5.2.0.
I created webStrom react app following this steps.
Download node.js
Open command line console and type "npm install -g create-react-app"
Create react app project from web-storm.
Make sure you provided the correct file path of create-react-app , by default it is
installed in ~\AppData\Roaming\npm\node_modules\create-react-app
use
npm start: to start development server
If you are using asdf or any other tool to manage multiple versions of nodejs, you will need to set up the path to create-react-app manually
I'm on mac, so for me the path was
/Users/<USER>/.asdf/installs/nodejs/12.16.2/.npm/lib/node_modules/create-react-app