React: Unable to setup a local work space

1

It’s the must frustrating thing! I can finally start doing pretty cool things using JS and React, but I can only do them on websites like FCC, or scrimba. I don’t know if I’m simply importing React incorrectly, or there is a problem with my syntax, but I have never been able to get React to work from VS Code on my computer. I’m not sure the best way to ask for help setting up a local work space, but I desperately need it. Right now all I want to be able to do is have React render ‘hello world’ on a webpage.

Is anyone willing to walk a newbie through?

In my open folder on VS Code I have:

index.html:

<html>
    <head>
        <link rel='stylesheet' href='style.css'>
    </head>
    <body>
        <div id='root'></div>
        <h1>At least this works</h1>
        <script src='index.pack.js'></script>
    </body>
</html>

index.js

import React from 'react'

import ReactDOM from 'react-dom'

import App from './App'

ReactDOM.render(<App />, document.getElementById('root'))

App.js

import React from 'react'

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            name: 'Alex'
        }
    }
    render() {
        return (
            <div>
                <h1>Hello World</h1>
            </div>
        )
    }
}

export default App

style.css

blank.

1 Like
2

What do you mean by “not work”? The code is fine, but I am assuming you aren’t running something that needs to be run (ie normally a module bundler + a local server for the app to run on), and need more information to be able to help.

3

First you need node.js installed in your computer.
Then on the terminal you can type

npx create-react-app whatever-name-you-want

Once the folder for your project / app exists you can use the code you wrote.
In order to display it locally you’ve got to use the terminal again

cd whatever-name-you-want
npm start

For more infos:

4

Thank you very much! I’m out for lunch, but I can’t wait to try this.

5

Sweet baby Cthulu, it works! I’m still doing some things wrong, but at least I can make things appear locally that I build into this little tic-tac-toe app I’ve been dreaming about.

Thank you very much!

1 Like