React app with the create react app commad. How do i include bootstrap? - reactjs

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.

Related

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.

Target container is not a DOM element in react

I am new to React. I cant figure out the following error
JSX doesn't work everywhere as far as I know. You have to create component, so try a
import React from 'react'
class App = () => (<p>first react app</p>);
and then
ReactDOM.render(App, app)
You have to use the babel traspiler to convert your JSX into React code. The easiest way for a beginner to set-up the React environment is to use create-react-app.
I'm assuming that you already have node installed. If not a quick Google search will instruct you how to install nodejs.
After that run the following command in the directory where you want to create the project
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
Then open your browser and go to localhost:3000 and you should see your react template.
More information on create-react-app can be found via the following links
github page
react official documentation

Configure antd after create-react-app eject

My react app was created with create-react-app and I added And Design following:
https://ant.design/docs/react/use-with-create-react-app
I even customized some less vars using:
https://ant.design/docs/react/use-with-create-react-app#Customize-Theme
Now, I ejected my app but everything stopped working.
EDIT1:
The first error is that after ejecting, the scripts configured in package.json no longer works, as described here:
https://github.com/ant-design/create-react-app-antd/issues/10
What are the steps to configure antd after ejecting create-react-app?
Thanks
You just need to run npm i react-scripts.
This will install the missing dependency you need to make this work.

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

Using angular from both atmosphere and npm gives warning

Using Meteor 1.3.2.4 I do:
meteor create myapp
cd myapp
meteor npm install --save angular
meteor add angularjs:angular
and in main.js add as first line
import angular from 'angular';
This gives me
WARNING: Tried to load angular more than once.
in the browser console.
I guess this is because angular packages from both npm and atmosphere are added, but I do not know how to circumvent this if I need an atmosphere package that depends on angularjs:angular and also want to to use angular from npm (for example when using angular-meteor). More specifically I want to use the package angular-leaflet-directive in a meteor/angular app. Any suggestions ?
I asked the same question here.
The package author needs to follow those instructions here to make his package work on both Meteor 1.3 and Meteor 1.2 and earlier.
Maybe you could submit a pull request for him and until he will merge it, you could publish to Atmosphere under your own user.
Also, you could just bring angular-leaflet-directive from npm!

Resources