React Tutorials
React Introduction
React Get Started
React Render HTML
React JSX
React Components
React Class
React Props
React Events
React Conditionals
React Lists
React Forms
React Router
React Memo
React CSS Styling
React Sass Styling
React ES6
React ES6
ES6 Classes
ES6 Arrow Functions
ES6 Variables
ES6 Array Methods
ES6 Destructing
ES6 Spread Operator
ES6 Modules
ES6 Ternary Operator
React Hooks
What is Hook?
useState
useContext
useRef
useReducer
useCallback
useMemo
Custom Hooks
Previous
React Getting Started
To use React in production, you need npm installed with Node.js.
To get an idea of what React is, you can write React code directly in HTML.
But in order to use React in production, you need npm and Node.js installed.
React Directly in HTML
The quickest way to start learning React is to write React directly to your HTML files.
Start by installing three scripts, the first two let's write React code in our JavaScripts, and the third, Babel, allows us to write syntax for JSX and ES6 in older browsers.
You will learn more about JSX in React JSX chapter.
Example
Include three CDN's in your HTML file:
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/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 method of using the React may be suitable for testing purposes, but in order to produce you will need to configure the React environment.
Setting up a React Environment
If you install npx with Node.js, you can create a React app using the create-react-app.
If you previously installed the create-react-app worldwide, it is recommended that you uninstall the package to ensure that npx always uses the latest version of the create-react-app.
To uninstall, use this command: npm uninstall -g create-react-app.
Launch this command to create a React app named my-react-app:
npx create-react-app my-react-app
The create-react-app will set everything you need to launch the React app.
Run the React Application
You are now ready to use your first real React program!
Launch this command to go to the my-react-app directory:
cd my-react-app
Run this command to run the React application my-react-app:
npm start
A new browser window will appear with your newly built React app! If not, open your browser and type in localhost:3000 in the address bar.
Result:
Modify the React Application
So far so good, but how do I change the content?
Look in the my-react-app directory, and you will find the src folder. Inside the src folder there is a file called App.js, open it and it will look like this:
/myReactApp/src/App.js:
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;Try changing the HTML content and saving the file.
Note that changes are visible immediately after saving the file, you do not need to reload the browser!
Example
Replace all the content inside the
Replace all the content inside the <div className="App"> with a
<h1> element.
See the changes in the browser when you click Save.
function App() {
return (
<div className="App">
<h1>Hello World!</h1>
</div>
);
}
export default App;Note that we have removed unwanted imports (logo.svg and App.css).
Result:
What's Next
You now have the React Environment on your computer, and you are ready to learn more about React.
In this tutorial we will use our "Show React" tool to explain the various aspects of React, and how they are displayed in the browser.
If you want to follow the same steps on your computer, first unzip the src folder so that it contains only one file: index.js. You should also delete any unnecessary lines of code within the index.js file to make it look like an example in the "Show React" tool below:
Example
Click the "Run Example" button to see the result.
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
const myfirstelement = <h1>Hello React!</h1>
ReactDOM.render(myfirstelement, document.getElementById('root'));