Learn react in less than 5 minutes…more or less
🗣React 🗣React🗣 React , you’re probably hearing it everywhere and if you’ve wondered what it is and decided to put off learning it for whatever reason or just want an overview of what it is, how it functions you’ve come to the right place. React is simply a JavaScript library for building user interfaces. It is an open sourced JavaScript library created in Facebook which has now expanded its ability to build mobile apps(react native). Its used in almost every company this days both small and big including Facebook itself, Netflix, Microsoft and more
Your first react app
since this tutorial is about learning react and not about installation mumbo jumbo I’ll leave that up to you and focus on getting you your first app as fast as possible thus go to codesandbox and create a free account. start a new sandbox and select the react template.
and there you have it your first react app!
ReactDOM.render
Navigate to your index.js file inside the src directory. There you can find the ReactDOM.render method which is where the magic happens as this is where the element we want to render is shown.(we’ll be discussing elements shortly) The ReactDOM.render method takes two arguments: The element that we want and where we would like to display it. So lets remove the App element and add our own element. replace the ReactDOM.render method with the snippet below.
ReactDOM.render(React.createElement('h2',null,'Baba'), rootElement);what this does is remove the previous app element you have and only display an h2 with a text of ‘Baba’. If you are wondering what that root element is go to index.html inside the public directory and find an element with an id of root.
React elements
Elements are the smallest building blocks of React apps. An element describes what you want to see on the screen:
const element = <h2>Hello, world</h2>;Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements. so what we did above was just simply create an h2 element inside of the ReactDOM.render method.
JSX
consider the variable declaration
const element = <h1>Hello, world!</h1>;This is neither a JavaScript string text or an html element. It’s JSX. In the above example we created an element using the React.createElement method but that was just one element if we wanted to create another element we would have to use another React.createElement. Now imagine if we have hundreds of elements we had to create and some where nested within each other. we would have tons of createElement calls and spaghetti code we would never want to see again. And that’s where JSX comes in. JSX in simple terms allows us to write html in our JavaScript code.
let name = 'Abel'
ReactDOM.render(
<h1>Baba</h1>
<h2 className="header__two">{name}</h2>
<p>This is simply a paragraph placeholder which has a <b>bold</b> element in it to show power of JSX </p>, rootElement);Replacing the ReactDOM.render method with our above code shows the power of JSX and if you take a look at header 2 you can see that you can you JavaScript variables inside of your html by simply wrapping them with curly braces. Another thing to keep in mind is when we give classes instead of using class we use the className attribute because class is a keyword in JavaScript.
React components
Components are the core of your react application. They let you split the UI into independent, reusable pieces, and think about each piece in isolation. Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}React state with hooks
If there’s any sort of change in our code our react components will be rerendered whether a change of properties or a change of state. A stateful app in react is one which tracks your changes and a stateless one simply displays the UI. To add state to our app we add the {useState} hook
import React, {useState} from "react"
const [status, setStatus] = useState("open")
return (<h1>Hello, {props.name}
we are {status}
<button onClick={()=> setStatus('closed')}>button</button>useState is a built in hook used to handle state changes in our application. Hook is a function that allows you to add some functionality to a component. The useState value returns two arguments, the first value that is returned is the state value and the second value is a function we use to change the state value.
There’s definitely way more to react than what you’ve read in the past five minutes and this was just an overview of what react’s about. If you are interested in finding out more I highly recommend going through the react docs or going through the free lessons on freecodecamp.
