React Getting Started
To use React in production, you need npm which is included with Node.js.
Modern React projects use tools like Vite or Create React App — Global Tuts explains what each file does.
But in order to use React in production, you need npm and Node.js installed.
Why this matters on Global Tuts
A working dev environment lets you focus on components instead of configuration errors.
Common beginner mistakes
- Node version mismatch causing install failures
- Editing files outside src without rebuild
- Confusing npm start with npm build
React Directly in HTML
The quickest way start learning React is to write React directly in your HTML files.
globaltuts Spaces
The easiest way to get started with creating HTML files is globaltuts Spaces!
It is the perfect place to create, edit, and share your work with others!
Start by including three scripts, the first two let us write React code in our JavaScripts, and the third, Babel, allows us to write JSX syntax and ES6 in older browsers.
You will learn more about JSX in the React JSX chapter.
Example
Include three CDN's in your HTML file:
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="mydiv"></div> <script type="text/babel"> function Hello() { return <h1>Hello World!</h1>;} ReactDOM.render(<Hello />, document.getElementById('mydiv')) </script> </body> </html>
This way of using React can be OK for testing purposes, but for production you will need to set up a React environment.