HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
To get an overview 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
The quickest way start learning React is to write React directly in your HTML files.
The easiest way to get started with creating HTML files is w3resource 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.
This way of using React can be OK for testing purposes, but for production you will need to set up a React environment.
If you have npx and Node.js installed, you can create a React application by
using create-react-app
.
If you've previously installed create-react-app
globally,
it is recommended that you uninstall the package to ensure npx always uses the latest version of create-react-app
.
To uninstall, run this command: npm uninstall -g create-react-app
.
Run this command to create a React application named
my-react-app
:
npx create-react-app my-react-app
The create-react-app
will set up everything you need to run a React application.
Now you are ready to run your first real React application!
Run this command to move 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 pop up with your newly created React App! If not, open your browser and type
localhost:3000
in the address bar.
The result:
So far so good, but how do I change the content?
Look in the my-react-app
directory, and you will find a
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 save the file.
Notice that the changes are visible immediately after you save the file, you do not have to reload the browser!
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;
Notice that we have removed the imports we do not need (logo.svg and App.css).
The result:
Now you have a React Environment on your computer, and you are ready to learn more about React.
In the rest of 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, start by
stripping down the src
folder to only contain
one file: index.js
. You should also remove any
unnecessary lines of code inside the index.js
file to make them look like the example in the "Show React" tool
below:
Click the "Run Example" button to see the result.
index.js
:
import React from 'react';
import ReactDOM from 'react-dom/client';
const myFirstElement = <h1>Hello React!</h1>
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myFirstElement);
Enter the correct ReactDOM method to render the React element to the DOM.
ReactDOM.(myElement, document.getElementById('root'));