React JS is a component-based JavaScript library (not framework)! This is very important information, as every type of library has its strengths and limitations.
Exit swallowing React JS code will not help you, it is very important to know the proposal, see the solutions proposed by the library.
In this series of articles we also set up Babel JS to transpile JSX to JavaScript. As a bonus you will finally understand Babel;)
Like any component-based library, it has its limitations when it comes to propagating information between components, since it works with one-way data binding, here we see its solutions such as the Composition and Context API technique.
We also talk about the state of the component, we use Hook useState and a technique called Lifting State UP. Finally, I show the component's lifecycle using another Hook: useEffect.
This may be the best tutorial for beginners that you will find, in it, I will deal with:
- What are components
- Starting with CDN
- Chaining components
- One-way data flow (One-way binding)
- Context API
- Babel JS - Transpiring JSX
- Composition
- Component status - Using React Hooks: useState
- Lifting State Up
- Component life cycle with Hook useEffect (Example saving data to local storage)
That will be divided between some articles, in this you will learn What are components and Starting with CDN, it won't be long before the next ones come out.
What are components
Build encapsulated components that manage their own state, then compose them to make complex UIs.
Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
Creating simple HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React JS - BEST GUIDE for Beginners!</title>
</head>
<body>
</body>
</html>
Everything will be done in this index for better understanding.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React JS - BEST GUIDE for Beginners!</title>
</head>
<body>
<script>
function MyComponent(){
}
</script>
</body>
</html>
The MyComponent function could already be a component in React.
Starting with CDN
Now we need to inject React to start the game, we will use the CDN for testing purposes, but to create a more robust application it must be installed with NPM or Yarn.
Go here to get the links to get started.
Your index.html should look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React JS - BEST GUIDE for Beginners!</title>
</head>
<body>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script>
function MyComponent(){
}
</script>
</body>
</html>
The first link of the CDN is the entire React, the entire library, the virtual DOM, everything that can be understood as React.
The second link is the React DOM for you to inject the React components on the page or generate a string and do the rendering via Back-end
In that case it will be injected into a div called app:
<body>
<div id="app"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script>
function MYComponent(){
}
</script>
</body>
Now all the components that we are going to generate via React will be injected into this
.React DOM has this role of injecting on the page, so we will use a global variable called ReactDOM that the second CDN link generated for us, and now we have the render method next to it.
ReactDOM.render()
It is very simple, basically you say which component you want to inject and where it will be injected.
In this case we will use the MyComponent function to be injected, it will look like this:
<script>
function MyComponent(){
}
ReactDOM.render(
MyComponent
)
</script>
However, it is not ready yet, MyComponent is a normal JavaScript function, React does not yet know that this is a component, to know we need to use a method of React called createElement.
CreateElement accepts three main parameters, the first is the component, the second are properties that I wanted to pass on to him, which we will talk about next, the third are the children of this component that we are not going to address at the moment.
ReactDOM.render(
React.createElement(MyComponent)
)
We will ignore the other parameters for now, and we will pass only the component.
Now just say where this component will be injected, manipulating the DOM.
ReactDOM.render(
React.createElement(MyComponent),
document.getElementById("app")
);
We finished this part, our code looks like this so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React JS - BEST GUIDE for Beginners!</title>
</head>
<body>
<div id="app"></div>
<script
crossorigin
src="https://unpkg.com/react@16/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
></script>
<script>
function MyComponent() {
}
ReactDOM.render(
React.createElement(MyComponent),
document.getElementById("app")
);
</script>
</body>
</html>
As you noticed our component MyComponent is empty, and to create these tags that would be HTML tags, div, span, etc., in React everything is created with this function React.createElement, with the same syntax.
So let's start creating, our component will look like this:
function MyComponent() {
return React.createElement("div", null, "Hello world");
}
As explained previously there will be three parameters, in the first we put an HTML tag inside strings, it could be span, h1, in this case I put a div, in the second parameter are properties like classes, id, style, any attribute inside an object could be placed, in this case I put null, and the third onwards are the children of that tag, in our case the children of that tag was a string.
As you can see we also have a return to the beginning, this is because every component must return an output of the function with React elements.
Saving we will see this div being rendered through React:
Inspecting the element is there our div
Switching to h1
<script>
function MyComponent() {
return React.createElement("h1", null, "Hello world");
}
In React, you will never have just one component, in fact, you will have several one calling the other, always one will be the main one that will render the entire page that will call all the others.
That each one will have children.
Final code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React JS - BEST GUIDE for Beginners!</title>
</head>
<body>
<div id="app"></div>
<script
crossorigin
src="https://unpkg.com/react@16/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
></script>
<script>
function MyComponent() {
return React.createElement("h1", null, "Hello world");
}
ReactDOM.render(
React.createElement(MyComponent),
document.getElementById("app")
);
</script>
</body>
</html>
The component section is now online! Click on the link below to see the continuation, it shows what makes React one of the best solutions for the front end, the components! It can work wonders.
Follow me on Twitter for updates Here
Credits: Programador a bordo
Oldest comments (0)