How to use ant design icons without NPM in Visual studio - reactjs

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

Related

When yarn is used to create React app only node_modules, package.json, yarn.lock is formed

I want to build a React App by installing it with yarn.
So these are the steps I have used so far to install the react app:
1.I have installed nodejs
After installation I used this command to install the react app:
2.yarn create react-app my-app
After successful installation of my-app I found out three things in it:
1.node_modules
2.package.json
3.yarn.lock
But the problem I am facing right now is that I don't know how I can start my app. So please guide me what I need to do next.

reactjs application add to existing reactjs application

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.

How do you start a React Native npm library?

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

React without webpack project setup

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

Can't create WebStorm React 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

Resources