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
Related
As title.
I'm developing a web system for customers use react.js and Ant Design.
So many items are required NPM to download.
I use Visual Studio to develop ASP.Net web systems under Windows platform, so I wonder if I can understand what is should be added into the project and what is shouldn't inside what I downloaded from NPM. Furthermore, I need to deploy my product to a test site or even to customers.
I've read Use of Ant Design Icons While Offline but I don't know what is I really needed because of my poor English. I've downloaded Ant-design-icons by NPM, but I failed to add it to my project because it make my Visual Studio busy and no response. I've tried to add the contents of the "dist" folder in the package downloaded by NPM, and I got 1 error per 1 ts file while compiling. Could I have a way to achieve it?
I recommend using create-react-app for a quickstart to react.
Simply type (in terminal. in some directory):
npx create-react-app my-app
cd my-app
npm i antd #ant-design/icons
npm start
This will initialize a new react app in a folder called my-app (you can change the name if you wish), change into that directory, install ant design and the icons package. and start the dev server.
That should be enough to be able to get started using Ant Design.
If you are having npm trouble, try yarn.
Same idea:
yarn create react-app my-app
cd my-app
yarn add antd #ant-design/icons
yarn start
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.
I am new to building android app using react-native.I installed nodejs,npm(added the path variable as well),android studio,setup the sdk as required and create-react-native-app(using npm install -g create-react-native-app) as instructed in facebook github page.
When i tried creating new project with command "create-react-native-app" it shows that create-react-native-app isnot recognized as........... .Then i tried adding path in the user variable as well as system variables.But nothing seems to work.
I am on windows 8.1
If you are creating a project using expo then there is no need to android studio or Xcode setup because of expo compile code on to the cloud.
Create a project using expo
Step 1
Install node.js
Step 2.
Install the Expo CLI command line utility**
npm install -g expo-cli
Step 3.
Using the following command you can create first react native project
expo init AwesomeProject
cd AwesomeProject npm start
you can also use: expo start
Step 4.
Install expo app from google play store and scan QR which generate after execution of expo start command on command line then open new window into browser.
Create project using react native init command
Step 1.
Install node.js
Step 2.
Install the Expo CLI command line utility
npm install -g react-native-cli
If you create a project without expo then you need to extra setup for android and ios
Please check following link and go into React Native CLI Quickstart then click on to window setup
Step 4.
Create new project
react-native init AwesomeProject
cd AwesomeProject
react-native run-android
For more information about project creation please check following link
https://facebook.github.io/react-native/docs/getting-started
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'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