How to use React

#react #beginners

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;