I am trying to create a React component and import it through a git URL.
My question is, how should the component be created?
How should I import it?
I didn't find much information
I've been reviewing this response
How can I import a component from GitHub repository
For example, i have this component
import React from "react";
function Title() {
return (
<div>
<h1>Sample Importing</h1>
</div>
);
}
export default Title;
To migrate it to the new git repo, should I initialize the project with CRA?
How do I give the directives to then do
npm install bitbuketurl..
import Title from '....'
Related
I created a react app using npx create-react-app ./
then I deleted my src folder and created src folder again. then I created index.js with following codes
import react from 'react'
import { ReactDOM } from 'react'
import App from './App'
ReactDOM.render(<App/>,document.getElementById('root'));
Then created App.js file with following codes
import React from 'react'
const app = () => {
return (
<div className='App'>
<h1>Hello</h1>
</div>
)
}
export default app
Then saving those files in terminal I started the app. npm start
this loades the react app in localhost:3000 but it shows a white screen only.
please help me solving this problem.
I want this code shows Hello
I have been building a project on react using vscode and when i try to start it in the browser, I keep getting the error that it cant find the file index.js, even though it is in the right folder. (Yes I have imported react and not React). I have literally paused my project for a while day because of this and its weird because i was building a smaller project earlier on the same mahine, in the same way and it worked perfectly.
But I have no idea whats going on here, I have attached the code.
I tried moving the file around, checking my lowercase, deleteing the cache memory and restarting it, deleting the node modules folder and using npm insall, etc all that stuff already on stackOverflow but nothing works.
I am just starting out with react so I'm not sure what the problem is and I've tried googling as much as I could
Navbar.js:
import React from 'react'
import logo from './images/airbnb 1.png'
export default function Navbar(){
return (
<img src={logo} width= "40px"></img>
)
}
App.js:
import React from 'react'
export default function App(){
return(
<h1>App component</h1>
)
}
index.js:
import React from 'react'
import ReactDOM from 'react-DOM'
import App from './App'
import './index.css'
ReactDOM.render(<App />, document.getElementById("root"))
import ReactDOM from 'react-dom'
you are trying to import from react-DOM that does not exist
I tried with simple function and class components. The function component part working fine after include in my app.js. but I include class component it shows 'typeError: Class extends value undefined is not a constructor or null in react',
how can I fix this issue ? I missed any configuration?
welcome.js
import React ,{ Componet } from 'react'
class Welcome extends Componet{
render(){
return <h1> class component welcome </h1>
}
}
export default Welcome
app.js
import React, {Component} from 'react'
import './App.css';
import Greet from './components/Greet'
import Welcome from './components/Welcome';
function App() {
return (
<div className="App">
<Greet/>
<Welcome/>
</div>
);
}
export default App;
react version
npm view react version
17.0.1
npm view react-native version
0.63.4
npm view react-scripts version
4.0.2
npm view react-dom version
17.0.1
You have a typo Componet, but should be Component in
class Welcome extends Componet{
I'm following along to a youtube tutorial to learn the MERN stack. Currently i'm trying to import boostrap css in my App.js file. But i keep getting this error.
Error
Here is my App.js file
import React, { Component } from 'react';
import AppNavbar from './components/AppNavbar';
import './App.css';
import 'boostrap/dist/css/bootstrap.min.css';
class App extends Component {
render() {
return (
<div className="App">
<AppNavbar />
</div>
);
}
}
export default App;
I ran npm install --save boostrap before attempting to include it, ive also restarted the server. All to no avail. Is there a new way to include css from the node_modules folder?
If you are trying to import bootstrap into your react project. You can import the css file into your App.js like this.
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
The import statement is not finding the file(s) do to the path passed in.
You have a typo, use this
import 'bootstrap/dist/css/bootstrap.min.css'
I am completely a newbie in react coming from Angular Typescript background. I chose to learn React with Typescript to make my transition easier compared to learning react with javascript. Could somebody let me know nice fundamental videos on React with Typescript. There is fundamental video on Plural sight but can its demonstrated using javascript.
I have created an app using the create-react-app command which has scaffold of react project.
I have noticed that file has following declaration of const while the examples that i see on the videos shows a class declaration with a render method. Could somebody explain ?
Scafolded output
import React from 'react';
import logo from './logo.svg';
import './App.css';
const App: React.FC = () => {
return (
<div className="App">
</div>
);
}
export default App;
Example
import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
</div>
);
}
}
export default App;
In React there are 2 ways to define a component: with a function (Functional Component) or with a class (Class Component), you could check the exact differences here. This post from Dan Abramov attack that topic also (And give and inside on good practices).
But basically, both definitions are ok, but you have to be sure how you would want to use a component for, in order to decide between Funcional or Class components. Another good resource here.
Also for react training courses, you could check these resources:
React External Resources
React with Typescript
How to Use Typescript with React and Redux
Official Typescript with React tutorial
Also some Youtube options
Good Pluralsight tutorial