Problems getting started with React?

Front End Help
#1

Hi all,
I’m trying to run React on my laptop. I’m using notepad++.
I’ve added these three lines , above the tag:

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>  
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
	<script src="reactfile.js" type="text/babel"></script>

the reactfile.js is my react file.
I addes these line to test:

ReactDom.render(<p>testing</p>,document.getElementById("react-test"));

So shouldn’t it add the word “testing” in a § tag on my page?
There is a div tag that has the id of “react-test” , above the 3 script lines.

I can see nothing added to my page so I’m not sure if it’s working or if I’m doing something wrong?

Thanks so much!
:slight_smile:

#2

What React looks like without es6
What’s babel
The easiest way to create react app

#3

So what did I do wrong, I have no clue reading though those links?
I’m completely new to React , and this feels a bit overwhelming .

#4

There are at least a few issues wrong with your code:

  1. You don’t have a CDN to Babel referenced in your HTML. Babel needs to be “installed” in order for you to use JSX in your React code.
  2. Your “reactfile.js” needs to be a JSX file, not a regular JS file.
  3. The first argument to ReactDOM.render() needs to be a component, not regular HTML.

It also no longer works to load an HTML file directly in your browser. That used to work with React 15, but has since been deprecated due to CORS issues. You need to run a basic HTTP server now. You can use the one built into either Python (SimpleHTTPServer), or Node.js (https://www.npmjs.com/package/http-server).

If you don’t understand what Babel or JSX is, I’d recommend using Google. Also this is a good free starter resource for learning React that’s more accessible than the official docs: https://flaviocopes.com/page/react-handbook/

Once you understand the basic concepts and know how to set up a basic React app directly via the browser, I’d recommend learning Node.js and create-react-app. It vastly simplifies everything.

#5

Thanks for that , I’ll take a look at it all :slight_smile:
I started with some beginners course on React on youtube but it was from 2016 and didn’t explain anything about setup.

#6

The current version of React is 16 which came out in September 2017, so I’d recommend not learning from any resources dated before then, which will refer to React 15. 15 is obsolete; see the link below for info on how naming in software is basically versioned. Anytime software gets updated to a new major version, stuff inevitably breaks, and you have to learn most things anew.

#7

Thanks for the reply astv99 :slight_smile:
I started reading the book in the link you suggested, and
very early on it says the react file should be a .js file (with text/bable mime type), so I’m confused why you said my “reactfile.js” needs to be a JSX file?

Sorry if I’m asking too much ,I’m just a bit confused ,hope you don’t mind :slight_smile:

#8

It seems like the file extension doesn’t matter as far as getting things actually working. I just tried that and it looks like it runs whether the file is JS or JSX.

But JavaScript files containing React code should still be in JSX format regardless, so I’d consider that an oversight on the author’s part. It’s better to do it that way in your code editor for syntax highlighting.

#9

I would suggest using create react app when working locally and using Codesandbox or StackBlitz for online editors.

BTW, I don’t believe the .jsx extension is all that useful anymore (CRA, do not recommend it).


#10

Thanks lasJorg. So I will stick to reactfile.js after all. Confusing all :smile:

I just installed node.js and I’m running the npx and npm commands from the node cmd prompt, but get error messages?

I typed these in this order:
npx create-react-app todolist //I saw a success screen after running this
npm start

after running npm start I see all kinds off error messages ?
npm err! code ENOENT
etc

Hope someone can help, thanks! :slight_smile:

#11

If you’re coding on Windows, which I assume you are from the Notepad++ reference, you need to run Command Prompt as an Administrator. Or I’d recommend using this: https://cmder.net/

#12

Thanks, how do you know all this ? I feel I know nothing yet :stuck_out_tongue:
I tried it though, and I still get the same error message list ?

Edit : I typed :

cd todolist

and then :

 npm start

& now it works! :slight_smile:

#13

I’ve been at this coding thing for a while myself. :wink: Btw if you’re still using Notepad++, I’d recommend using this instead: https://code.visualstudio.com/

Notepad++ is fine as a general-purpose editor but since it doesn’t have syntax highlighting for React, you should use something that does.

#14

I have no clue reading though those links?

#15

Edit: never mind, I’ve decided to finish reading my JS and Jquery books , and spend more time learning those two before I start with React.
I will revive this thread when I need help again, thanks :slight_smile:

So now I’m stuck again.
I managed to get to the point where I run “npm start” in the node.js cmd prompt .

When I open the file I created through " npx react-create-app todolist" , todolist (it’s under windows32), I see a list of files , with no index.html file.?
I was following a tutorial on youtube that used visual studio and they had a index.html (with an id of root) ? I’m also reading a react book but it hasnt’ explained this yet.

Do I need visual studio for this to work, or do I use my own index.html file that I add to this system32/todolist file? And do I edit the js /css files that are in this list if I want to code react?

This is soo confusing !! :unamused

Thanks for any help! :slightly_smiling_face:

#16

You should not create the app inside system folders, that is a really bad idea. That happened because you ran the Node.js command prompt as admin. Doing that will open it up inside the System32 folder. Install the app inside a “normal” user folder.

The index.html file is inside the public folder.

Install the app using create-react-app into a folder of your choice.

Steps (there are different ways to do it, this is just one way)

  1. Install VS Code

  2. Create a “projects” folder inside your “Documents” folder

  3. Create a “todolist” folder inside “projects” folder

  4. Right-click the “todolist” folder and from the right-click menu select “Open with Code”

  5. Inside VS Code open the build-in terminal. From the menu View select Terminal, take note of the hotkey in the menu so you can use that instead of from now on

  6. Run npx create-react-app . (using . will create an app using the current folder name as the app name, i.e. todolist).

Visual Studio and Visual Studio Code (VS Code) are not the same programs. You do not need any of them to write React code but I would suggest using VS Code anyway.

As for how, and where to write the code you are better off looking at some React crash course articles and videos.

#17

Thanks for the reply lasjorg, I think I’m getting the hang of this now(slowly) :slight_smile:

I also found a very helpful course in case anyone is interested: