I am beginner to react....
I am trying to convert a website into react by breaking it into components.
My question how can I include my js files..
Will the code work if I include the js file in index.html or do I have to separate js code for each components ?
Some of the js code are required for each components.
You could just put the JavaScript code in the component which uses it. If you have a slider, you can put the JS functions, which control said slider in a <slider/> component.
Read Thinking in React
You can use create-react-app, this will create a demo project of React.
You can either write the component code in one file which will be App.js or if you want then you can create different files of every component. index.js will be the entry JS file, so the ReactDOM.render will take place in that file.
//App.js
import React, { Component } from 'react';
import FirstComp from './FirstComp';
class App extends Component{
render(){
return(
<div>
{/* JSX Statements */}
<FirstComp />
</div>
);
}
}
export default App;
//FirstComp.js
import React, { Component } from 'react';
class FirstComp extends Component{
render(){
return(
<div>
{/* JSX Statements */}
</div>
);
}
}
export default FirstComp;
Try FullStack React
import * as something from './something.js';
Now that you have imported the something.js file, you can call any function in something.js file.
something.someFunction()
Related
I have created a react app using the command create-react-app my-app
and when I build and start its working fine using npm start
Now I added one .JS file inside the SRC folder and used the tag inside App.Js
Here is the below code for that component
import React from 'react'
class Footer extends React.Component {
render() {
return (
<div>
<h1>It's a bit chilly out there</h1>
</div>
);
}
}
export default Footer;
After that I have added the Component into App.JS
class App extends React.Component{
render() {
return (
<>
<div>
Test Component created using Class
<Footer/>
</div>
</>
);
}
}
export default App;
After successfully compilation when I ran my app, I got empty browser and also get error in Console.
From the screenshots, i have understood to change the case used to name the react components.
Is your footer component named as Footer.js
Is your App component named as App.js
Comment if the above changes worked.
I am using npx create-next-app to create my NextJs project and now I want to add global style for it by bootstrap
After downloading bootstrap, it suggested me adding global style in pages/_app.js but I found no file like it. Thanks for helping me
when you make a new Nextjs project you don't have this file
you should create this file in root pages
_app.js or _app.tsx (if you use typescript)
const MyApp=()=>{
return(
enter code here
)
}
export default MyApp
You create your pages/_app.js, you place code below
import React from 'react';
export default function App({ Component, pageProps }) {
return (
<Component {...pageProps} />
);
}
To add bootstrap, you create styles folder in /public, you add your .css file of bootstrap (imagine it's bootstrap.css). After, you add import to your app.js file, and the example below:
import React from 'react';
import "../styles/bootstrap.css";
export default function App({ Component, pageProps }) {
return (
<Component {...pageProps} />
);
}
The possible reason you don't have app.js is because you didn't build your project yet
Add _document.js file in pages/_document.js, you can add your global style in this file index.jsx see documentation:
Custom Document Next.js
I have a typical website created with HTML, CSS, Javascript and I'm trying to convert it into react.
I can convert my HTML into JSX pretty easily with an online converter and my CSS is the same, I just have to import it differently.
But now I'm confused about how to link up my javascript files. Because my HTML is now JSX which is in a Javascript file as well.
Normally in html this is all I need to do to link my java script and everything works:
<script type="text/javascript" src="js/main.js"></script>
How would I do this in react such that my JSX will have the same functionality as did my HTML?
Right now whether I try to import it from file location:
import './javascript/main.js'
It doesn't do anything. I'm not getting any errors. My JSX and CSS works fine and all I have for my CSS is (this import works fine):
import './css/main.css'
If it should work, please let me know, it must mean there's an error elsewhere that I have to sort out.
Thanks in advance
I don't think you can import js code on a react app, probably you have to create react-app first, then create its components and add you javascript code within these components, it´s pretty easy, i recomment you to read the documentation of react and see how it works. Hope it helped you.
You can include JavaScript functions inside JSX itself :
import React from 'react';
const Something=()=>{
// Your javascript functions :
return(
<div>
Your Html here
</div>
)
}
export default Something
// Or if You are using Class Component :
import React, { Component } from 'react';
class Something extends Component {
state = { }
// Your Javascript Functions
render() {
return (
<div>
Your HTML goes here
</div>
);
}
}
export default Something;
and if you want to import js file from another location you have to include export in your function:
export const Name=()=> {
}
and import:
import {Name} from '/location';
I am trying to use a html and CSS template on create-react-app. I can convert all of the HTML to JSX without any issues and render the CSS just fine. I cant get the Script tags that home with the template to work though
I think you would write script tags in Reactjs the same way you would in HTML. Like this:
<script src="fooLink.js"></script>
(fooLink.js being any link.)
If you want to go further with React, try looking at this article:
https://reactjs.org/tutorial/tutorial.html
Or post the code you are having trouble with so we can help you.
I am not sure I understand but can't you add the script tags to your index.html file . The one where you have a div (usually) targeted by the render function of ReactDom (render( , document.getElementById('my target div'))
React works with classes (ES6) and functions which are called as
components. you can create one and import the created component in
your jsx (written inside the render() of the component)
//your first component(js)
import React, {Component} from 'react';
class ComponentOne extends React {
render() {
return <div>some text or {value}</div>
}
}
//your second component
import React, {Component} from 'react';
import ComponentOne from 'your path here';
class ComponentTwo extends React {
render() {
return <ComponentOne>;
}
You can learn more from https://reactjs.org/
npm install --save react-script-tag
then
import React, { Component } from 'react';
import ScriptTag from 'react-script-tag';
class Demo extends Component {
render() {
return (<ScriptTag isHydrating={true} type="text/javascript" src="some_script.js" />);
}
}
I'm trying to display my Deal component but I keep getting this error below.
I'm using Meteor with ReactJS.
Uncaught ReferenceError: Deal is not defined
at meteorInstall.imports.routes.routes.js
Here is my routes.js file
<Route path="/deals" component={Deal} secure="auth" />
My Deal.js component file, that the route should be linking too.
import React from 'react';
import { Link } from 'react-router';
import PrivateHeaderNav from './PrivateHeaderNav.js'
export default class Deal extends React.Component {
render() {
return (
<div className="content">
<PrivateHeaderNav/>
Deal
</div>
);
}
}
Am I missing something in the imports or in my Deal component?
Thanks
Your routes.js file is lacking the import of Deal component.
make sure you have this line in route.js:
import Deal from './path/to/Deal.js';