#how does React work?

67 messages · Page 1 of 1 (latest)

dapper veldt
#

Can you share your code and explain what you are trying to do?

pure niche
#

yes ofc

# 
import React, {Component} from "react";
import Typed from "react-typed";


 export class test extends Component{
     render() {

         return(

                 <div className="animated-typing">
                     <Typed
                         strings={
                             [
                                 "rtesrfesrfsetfwe",
                                 "raeresarse",
                             ]
                         }
                         typeSpeed={150}
                         backSpeed={100}
                         loop
                     />
                 </div>

         )
     }


 }```
#

this is in test.jsx

dapper veldt
#

oh my... you are using classes in React?

pure niche
# 
import './App.css';
import React,{Component} from "react";




class App extends Component{
    constructor(props) {
        super(props);

    }
    render() {
        return (
            <div>
                <test/>
            </div>
        );
    }
}

export default App;
#

that's in app.js

pure niche
#

i looked a bit on W3 and some other blogs

#

they said it was like this

dapper veldt
#

Very few people use it. Most of them use functional components

pure niche
#

at first i used functions but it didn t work

dapper veldt
#

Can you show what you did when you used functions?

pure niche
pure niche
# 
import React from "react";
import Typed from "react-typed";


 function test() {
     return(
         <>
             <div className="animated-typing">
                 <Typed
                     strings={
                         [
                             "rtesrfesrfsetfwe",
                             "raeresarse",
                         ]
                     }
                     typeSpeed={150}
                     backSpeed={100}
                     loop
                 />
             </div>
         </>
     )
 }```
# 
import './App.css';

function App() {
  return (
    <div className="App">
      <test/>
    </div>
  );
}

export default App```
dapper veldt
#

Import test in app.js

#

but first export test

#

Add export default test in test.js

#

and import test from "[test.js path here]"

pure niche
#

lol i feel stupid

#

thanks

dapper veldt
#

np

pure niche
#

it doesn't work if it dont put a maj

#

and is there a way to importe every JSX files from the component folder?

dapper veldt
pure niche
#

cap

#

sorry im not very proeficient in english lol

dapper veldt
#

You mean why it is "Test" instead of "test"?

pure niche
#

yes

dapper veldt
#

that's just how react works

pure niche
#

lol ok

dapper veldt
#

no real reason behind it

pure niche
#

or do i have to import every jsx file one by one?

dapper veldt
pure niche
#

Do you happen to know how can i pass a string in test.jsx and define the string in App.js

#

something like test(string sentence) {} in test.jsx
then test("hello world") in app.js

dapper veldt
#

props

#

Share you code and I will explain more

pure niche
#

okk thanks

# 
import Type from "./components/Type";
import './App.css';

function App() {
  return (
    <div className="App">
      <Type/>
    </div>
  );
}

export default App;
# 
import React from "react";
import Typed from "react-typed";

import './Type.css';


function Type() {
    return(
        <>
            <div className="animated-typing">
                <Typed
                    strings={
                        [
                            "Hey there! \n" +
                            "My name is Xyphes \n" +
                            "and this is my portfolio ;)",

                        ]
                    }
                    typeSpeed={150}
                    backSpeed={100}
                    loop
                />
            </div>
        </>
    )
}


export default Type
#

i'm trying to make new lines but \n doesnt work so i m just going to use <Type/> multiple times

dapper veldt
dapper veldt
#

then you can use my_string in your code

pure niche
#

i also tried with just props

# 
function Type({str}) {
    return(
        <>
            <div className="animated-typing">
                <Typed
                    strings={
                        {str}
                    }
                    typeSpeed={150}
                    backSpeed={100}
                    loop
                />
            </div>
        </>
    )
}```
dapper veldt
#

It should be str, not {str}, but I am not sure what Typed is

#

and how it works

pure niche
#

Typed is a library i'm using callled react-typed

#

it seemed good

pure niche
dapper veldt
# 
                    strings={
                        {str}
                    }
                    typeSpeed={150}
                    backSpeed={100}
                    loop
                />```
pure niche
#

kk

#

i'll chaange that

#

it still does not work 😦

#

i tried to change it is some place but i can't understand haha

#

i also tried something like this ```js
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
root.render(element);