What is REACT
React is a javascript library focused on creating interfaces by merging html with js (javascript).
A summary of the HTML
HTML is a markup language for the web, the purpose of which is to create an interface for the user, with tags such as
<h1></h1>
the <h1>
tag is used to demarcate a title, a big title, this goes for all the other variations of the tag, they all represent a title.
<p></p>
the
tag represents a paragraph, and that's all you'll need for this tutorial.
A summary of JAVASCRIPT and react
The javascript is an object-based, interpreted language, and is better known as the scripting language of the web. Nowadays, many web pages are made with javascript as their scripting part, either using node.js or pure javascript, in our case react needs to be used alongside node.js with javascript, as this is a javascript library and does not come built-in with the scripting language of the web. to start the react project will use a command line, which is;
npm i create-react-app
This command is to download the react project creator.
npx create-react-app your-project-name
This command already creates the project.
There will probably come a project where the app.js looks like this
import logo from './logo.svg';
function App() {
return (
<div className="App">
</div>
);
}
export default App;
Lets explain this code.
import -this in the thing who you import- from -the file who this things is-
the import line of code imports something into our code, be it a library or another .js code file.
function App() {
return (
<div className="App">
</div>
);
}
This code will call the HTML elements, to be displayed, as I said at the beginning this will create the html elements and render them together with the javascript, incorporating javascript with html.
To add html elements we could add the elements, such as the paragraph and the header, inside the parent div, in this case the APP div, the result will be;
function App() {
return (
<div className="App">
<h1>Hello world, I am a Header</h1>
<p>Hello world, I am a paragraph</p>
</div>
);
}
To run this code you will need to prompt this into your cmd;
npm start
The result will be;
Top comments (1)
Very useful