Installing React
Nodejs and NPM
JavaScript's original selling point was that it runs in the browser. NodeJS is a JavaScript runtime without a browser, so you can for example write a server / back-end in JavaScript too. Using a library called Electron, you can even write desktop apps in JavaScript/NodeJS (Electron is essentially google's Chrome browser without the branding, so you can use it to build your own user interface.) We will need NodeJS to run React, which compiles JSX code into JavaScript and HTML.
NodeJS comes with its own package manager, NPM (NodeJS Package Manager). The shell command to run it is npm
, but there is also npx
which downloads the latest version of a package and immediately runs it, if it contains a command-line tool.
- Install NodeJS for your operating system. On alpine, use
sudo apk add nodejs npm
; for other operating systems you can download it from nodejs.org or use your system's package manager, if available.
Your first React app
- Create a new react app with
npx create-react-app FOLDERNAME
. You cannot call the folderreact
itself, so please choose a different name. Downloading and preparing everything for the first time might take a while. - By default, react uses port 3000 for its server. If you want another port, like 8000, edit
package.json
and edit the line
"start": "react-scripts start",`
to read as follows
"start": "PORT=8000 react-scripts start",
- Start the react app with
npm start
inside the folder with thepackage.json
and open your browser onlocalhost:8000
or whichever port you are using (the default is 3000). You should see a message "Editsrc/App.js
and save to reload." in your browser.
Explore the Code
Have a look at the structure of the project files:
package.json
is the configuration file (like thepom.xml
for Java/maven).- The page being served is
public/index.html
although the server replaces%PUBLIC_URL%
itself (in development this just becomes the empty string). Note the contents of the page are essentially<div id="root"></div>
, but if you look at the source in the browser (Control+U) you will see that react has added a line at the end of the body pulling in the JavaScript files. If you look with the developer tools (F12) you will see that the content of the app has been added as a child of the root div. - The code lives in
src/
, mainly insrc/App.js
. The default code uses a function style component rather than a class style one, but the elements you see in the JSX code here (the HTML-embedded-in-JavaScript) are the ones that you saw in your browser inside the root div.