Skip to content
RoadMap Programing
RoadMap Programing Yuri Caetano
More
Share
Explore
Quarter 2 React Kenzie Academy

7/27/20 First Steps In React

Soo, what is react?

Facebook say: is declarative, efficiency and flexible. Ok, so what about the features for React?
Declarative: if you said how to do something for someone, step by step, its not declarative, its imperative.
If you say for your computer cook for you, in imperative you will need say word by word how to do that, but in declarative not, the computer a ready “know how to cook”
Components: you can make and reuse a lot of components, like a video player, with this video player, you can put in every page you want.
Flexible: the react is flexible because if you want, you can you use in “every where” you want, like a mobile, or desktop pc, or smart tv’s.
Official website react:
https://reactjs.org/
⁠
documentation:
https://reactjs.org/docs/getting-started.html
⁠
⁠
About how the library react works:
Rendering dom in html its a little bit slow, and takes cost. But if you need change just something, the react is better way for you, because he make a mirror from original dom, and compare every time the new elements, states or events, and render it on your side.
In documentation about the react said: “the components allow you to separate the UI in independents parts reusable, think as if each piece were separated .
Below its example the Hello World, can run with react in simple html, with-out install nothing. You can try put it in your html file.
<body>
<div id="root"></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>
const element = React.createElement('h1', null, 'Hello, React!');
ReactDOM.render(
element,
document.getElementById('root')
);
</script>
</body>
The syntax are: first, you need create element in javascript, using react, like this
react.createElement(’element’, props, ‘Hello, React!’);
ok, now you need now, in element you put yours’s html element, like h1, p, div, span etc. And props, you just put null in this first time to example to Hello World, because you dont have state now. After you put the text node or wherever you want.
Ok, after all you need call the function reactDOM.render();
ReactDOM.render(
element,
document.getElementById('root')
);

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.